Skip to content
Snippets Groups Projects
Commit 21ecd221 authored by David Mendez's avatar David Mendez
Browse files

Add basic layout with main masthead

parent dc0de7b8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/variables.scss
+ 2
− 0
View file @ 21ecd221
......@@ -2,3 +2,5 @@
//
// The variables you want to modify
// $font-size-root: 20px;
$eubopen-primary-color: #113a70;
$eubopen-secondary-color: #9dbfdc;
components/Logo.vue
+ 6
− 76
View file @ 21ecd221
<template>
<div class="VueToNuxtLogo">
<div class="Triangle Triangle--two" />
<div class="Triangle Triangle--one" />
<div class="Triangle Triangle--three" />
<div class="Triangle Triangle--four" />
</div>
<v-img
:src="require('~/static/img/logo.png')"
max-height="150"
max-width="200"
></v-img>
</template>
<style>
.VueToNuxtLogo {
display: inline-block;
animation: turn 2s linear forwards 1s;
transform: rotateX(180deg);
position: relative;
overflow: hidden;
height: 180px;
width: 245px;
}
.Triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
.Triangle--one {
border-left: 105px solid transparent;
border-right: 105px solid transparent;
border-bottom: 180px solid #41b883;
}
.Triangle--two {
top: 30px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 87.5px solid transparent;
border-right: 87.5px solid transparent;
border-bottom: 150px solid #3b8070;
}
.Triangle--three {
top: 60px;
left: 35px;
animation: goright 0.5s linear forwards 3.5s;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #35495e;
}
.Triangle--four {
top: 120px;
left: 70px;
animation: godown 0.5s linear forwards 3s;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 60px solid #fff;
}
@keyframes turn {
100% {
transform: rotateX(0deg);
}
}
@keyframes godown {
100% {
top: 180px;
}
}
@keyframes goright {
100% {
left: 70px;
}
}
</style>
<style></style>
layouts/default.vue
+ 9
− 77
View file @ 21ecd221
<template>
<v-app dark>
<v-navigation-drawer
v-model="drawer"
:mini-variant="miniVariant"
:clipped="clipped"
fixed
app
>
<v-list>
<v-list-item
v-for="(item, i) in items"
:key="i"
:to="item.to"
router
exact
>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="item.title" />
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar :clipped-left="clipped" fixed app>
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-btn icon @click.stop="miniVariant = !miniVariant">
<v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
</v-btn>
<v-btn icon @click.stop="clipped = !clipped">
<v-icon>mdi-application</v-icon>
</v-btn>
<v-btn icon @click.stop="fixed = !fixed">
<v-icon>mdi-minus</v-icon>
</v-btn>
<v-toolbar-title v-text="title" />
<v-spacer />
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
<v-icon>mdi-menu</v-icon>
</v-btn>
</v-app-bar>
<v-app>
<MainAppBar />
<v-main>
<v-container>
<nuxt />
</v-container>
</v-main>
<v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
<v-list>
<v-list-item @click.native="right = !right">
<v-list-item-action>
<v-icon light> mdi-repeat </v-icon>
</v-list-item-action>
<v-list-item-title>Switch drawer (click me)</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-footer :absolute="!fixed" app>
<span>&copy; {{ new Date().getFullYear() }}</span>
</v-footer>
<Footer />
</v-app>
</template>
<script>
import MainAppBar from '~/components/nav_bar/MainAppBar.vue'
import Footer from '~/components/footer/Footer.vue'
export default {
data() {
return {
clipped: false,
drawer: false,
fixed: false,
items: [
{
icon: 'mdi-apps',
title: 'Welcome',
to: '/',
},
{
icon: 'mdi-chart-bubble',
title: 'Inspire',
to: '/inspire',
},
],
miniVariant: false,
right: true,
rightDrawer: false,
title: 'Vuetify.js',
}
components: {
MainAppBar,
Footer,
},
}
</script>
nuxt.config.js
+ 6
− 6
View file @ 21ecd221
......@@ -53,13 +53,13 @@ export default {
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
light: {
primary: '#113a70',
accent: '#e4eaf3',
secondary: '#9dbfdc',
info: '#96cfbd',
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
......
pages/index.vue
+ 60
− 8
View file @ 21ecd221
......@@ -5,14 +5,66 @@
<logo />
<vuetify-logo />
</div>
<v-card>
<v-card-title class="headline">
This is the EUbOPEN website!
</v-card-title>
<v-card-text>
This is the ES Proxy base URL: {{ esProxyBaseUrl }}
</v-card-text>
</v-card>
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum
pharetra lorem nec ultrices. Nulla condimentum luctus tellus ut iaculis.
Morbi feugiat mattis libero id imperdiet. Nulla nec leo dictum,
imperdiet sem at, aliquet leo. Duis in tempor magna. In hac habitasse
platea dictumst. Quisque facilisis nulla a bibendum suscipit. Duis nec
ex volutpat libero laoreet tincidunt ut quis nunc. Vivamus eu sapien non
leo mattis malesuada vel ac turpis. Suspendisse at lorem congue,
pellentesque urna et, commodo eros. In hac habitasse platea dictumst.
Pellentesque feugiat aliquam libero eu faucibus. Nunc quis varius neque.
Donec a turpis at nulla fringilla accumsan at vel nisl.
</p>
<h2>Orci varius</h2>
<p>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec et varius diam. Quisque ligula dolor, placerat a
pretium eget, mollis sit amet risus. Pellentesque sagittis quam est, et
elementum mi blandit non. Etiam nec urna sit amet magna viverra
venenatis nec id nibh. Nullam condimentum enim volutpat, cursus metus
vel, vestibulum elit. Vivamus ac dictum nibh.
</p>
<h3>Mauris dignissim</h3>
<p>
Mauris dignissim enim tincidunt magna pulvinar, ac gravida est rhoncus.
Sed dictum commodo quam, et congue tortor vulputate vel. Proin fermentum
libero vel fringilla finibus. Nullam nisi nunc, maximus nec tincidunt
et, molestie placerat nulla. Maecenas sodales quam odio, ac porta tellus
volutpat ac. Proin ut molestie tortor. In et vestibulum velit. Mauris ac
orci ut mauris facilisis iaculis ut id augue. Duis egestas, est eget
convallis pharetra, purus lectus efficitur sapien, quis malesuada nunc
augue finibus mauris. Praesent eu mattis tellus. Sed mattis vitae nisi
molestie feugiat. Quisque semper massa eu tortor euismod consectetur.
Etiam nibh sapien, congue et dapibus eget, aliquet vitae nunc.
</p>
<p>
Nam ut eleifend metus, nec interdum nulla. Nam volutpat lectus nec lacus
rhoncus, at consectetur mi volutpat. Donec sodales libero a diam congue
facilisis. Nulla id velit dui. Mauris eu orci eu elit molestie commodo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Duis nec nulla ultricies, feugiat mi ut, pharetra
dui. Vivamus sollicitudin nisi congue, scelerisque diam sit amet,
imperdiet sem. Etiam justo nunc, eleifend eu pretium ut, condimentum sit
amet leo. Cras luctus arcu mauris, at dapibus purus malesuada nec.
Pellentesque ante mauris, pharetra id sagittis ut, tincidunt ac nibh.
</p>
<p>
Proin sit amet lobortis sapien. Mauris venenatis id nulla et aliquet.
Nulla interdum, dui consectetur finibus volutpat, lectus dolor tempus
justo, vel iaculis ipsum lacus nec turpis. Aenean fringilla, ex eget
fringilla efficitur, magna lacus venenatis eros, vitae blandit velit
ante sit amet arcu. Ut nulla tortor, consequat eu erat nec, venenatis
mollis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ac odio at orci porttitor malesuada ac ac dui. In efficitur
sit amet ex a condimentum. Sed aliquam dignissim ligula eu elementum.
Nunc nulla ipsum, scelerisque nec interdum luctus, lobortis quis arcu.
Praesent quam risus, viverra a lacus ac, consectetur elementum dolor.
Duis enim diam, vestibulum in enim eu, lacinia vulputate metus. Etiam
sed ultrices felis.
</p>
</v-col>
</v-row>
</template>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment