From 21ecd22103346ae5d81deafe1546188024fae566 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Thu, 18 Mar 2021 18:37:57 -0500
Subject: [PATCH] Add basic layout with main masthead
---
assets/variables.scss | 2 +
components/Logo.vue | 82 +++--------------------------------------
layouts/default.vue | 86 +++++--------------------------------------
nuxt.config.js | 12 +++---
pages/index.vue | 68 ++++++++++++++++++++++++++++++----
5 files changed, 83 insertions(+), 167 deletions(-)
diff --git a/assets/variables.scss b/assets/variables.scss
index f60e609..b87260b 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -2,3 +2,5 @@
//
// The variables you want to modify
// $font-size-root: 20px;
+$eubopen-primary-color: #113a70;
+$eubopen-secondary-color: #9dbfdc;
diff --git a/components/Logo.vue b/components/Logo.vue
index 6c72854..2820bc9 100644
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -1,79 +1,9 @@
<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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 48daba2..6c60408 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,91 +1,23 @@
<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>© {{ 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>
diff --git a/nuxt.config.js b/nuxt.config.js
index 13cae7d..370bf85 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -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,
diff --git a/pages/index.vue b/pages/index.vue
index d9461ce..3f9d146 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -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>
--
GitLab