Commit 62dac7d6 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

update home and about pages

parent cf3de73e
Pipeline #32001 passed with stages
in 3 minutes and 36 seconds
frontend/public/img/archi.png

144 KB | W: | H:

frontend/public/img/archi.png

179 KB | W: | H:

frontend/public/img/archi.png
frontend/public/img/archi.png
frontend/public/img/archi.png
frontend/public/img/archi.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -11,8 +11,8 @@
<v-spacer></v-spacer>
<div>
Metagenomics Signature group, Institut Pasteur.
<span class="font-italic font-weight-light">This work is founded by <a target="_blank" href="https://www.bpifrance.fr/">bpifrance.</a></span>
<span class="font-italic font-weight-light"> Icons from <a target="_blank" href="https://fontawesome.com/license">fontawesome</a></span>
<span class="font-italic font-weight-light">Work founded by <a target="_blank" href="https://www.bpifrance.fr/">bpifrance</a></span>.
<span class="font-italic font-weight-light">Icons from <a target="_blank" href="https://fontawesome.com/license">fontawesome</a></span>.
</div>
<v-spacer></v-spacer>
<span class="font-weight-light"><a :href="commitURL" target="_blank">{{commitHash}}</a></span>
......@@ -40,7 +40,7 @@ export default {
},
baseTitle() {
return process.env.VUE_APP_TITLE;
}
},
},
created () {
document.title = this.baseTitle;
......
......@@ -2,23 +2,28 @@
<v-navigation-drawer
v-bind:value="value"
v-on:input="$emit('input', $event)"
app width=200 class="primary" dark
app width=220 class="primary" dark
>
<v-toolbar flat class="primary">
<v-list>
<v-list-tile>
<v-list-tile router to="/" active-class="secondary" key="home">
<v-list-tile-action>
<v-icon>fas fa-database</v-icon>
</v-list-tile-action>
<v-list-tile-title>
Browse content
<span class="font-weight-light">Metagene</span>
<span>DB</span>
<span class="font-weight-light"></span>
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider></v-divider>
<v-list class="pt-0">
<!-- Main menu -->
<v-list>
<v-list-tile
v-for="item in items"
v-for="item in menuMain"
:key="item.title"
router :to="item.route"
active-class="secondary"
......@@ -26,7 +31,24 @@
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<!-- Secondary menu -->
<v-list>
<v-list-tile
v-for="item in menuSec"
:key="item.title"
router :to="item.route"
active-class="secondary"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
......@@ -38,7 +60,11 @@
<script>
export default {
props: {
items: {
menuMain: {
type: Array,
required: true,
},
menuSec: {
type: Array,
required: true,
},
......
<template>
<nav>
<v-toolbar flat app dark height="40" class="primary">
<v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="headline">
<span class="font-weight-light">Metagene</span>
......@@ -14,7 +15,7 @@
</v-btn>
</v-toolbar>
<Drawer :items="items" v-model="drawer"/>
<Drawer :menuMain="menuMain" :menuSec="menuSec" v-model="drawer"/>
</nav>
</template>
......@@ -27,16 +28,24 @@ export default {
components: { Drawer, Help },
data() {
return {
drawer: false,
items: [
{ title: 'Home', icon: 'fa-home', route: '/' },
{ title: 'Catalog Statistics', icon: 'far fa-chart-bar', route: '/stats' },
{ title: 'Compare Taxonomy', icon: 'far fa-clone', route: '/compare' },
{ title: 'Genes', icon: 'format_list_bulleted', route: '/genes' },
{ title: 'About', icon: 'contact_support', route: '/about' },
],
drawer: true,
right: null,
};
},
computed: {
menuMain() {
return [
{ title: 'Catalog Statistics', icon: 'far fa-chart-bar', route: '/stats' },
{ title: 'Compare Taxonomy', icon: 'far fa-clone', route: '/compare' },
{ title: 'List genes', icon: 'format_list_bulleted', route: '/genes' },
];
},
menuSec() {
return [
{ title: 'About', icon: 'contact_support', route: '/about' },
{ title: 'Contact us', icon: 'fas fa-address-book'}
];
},
}
};
</script>
......@@ -2,7 +2,7 @@
<v-container fluid grid-list-md>
<v-layout wrap row align-center justify-center>
<v-flex v-for="item in mediumLogos"
sm12 md6 lg3 xl2
sm12 md4 lg3 xl2
>
<v-img
:src="item.src"
......@@ -10,7 +10,7 @@
/>
</v-flex>
<v-flex v-for="item in smallLogos"
sm6 md3 lg1
sm6 md2 lg1
>
<v-img
:src="item.src"
......
......@@ -8,6 +8,8 @@ import 'vuetify/dist/vuetify.min.css';
import './assets/styles/fonts.css';
import '@fortawesome/fontawesome-free/css/all.css';
var pouet = 2;
Vue.config.productionTip = false;
Vue.use(Vuetify, {
iconfont: 'fa',
......
......@@ -4,65 +4,90 @@
<v-toolbar-title>About</v-toolbar-title>
</v-toolbar>
<v-card>
<v-card-title class="pb-2">
<v-container fluid>
<v-layout wrap >
<v-flex sm12 md6 class="pa-1">
<h3 class="mb-1">MetageneDB</h3>
<div>
<v-timeline>
<v-timeline-item
color="primary"
large
>
<template v-slot:opposite>
<span class="title">The MetageneDB project</span>
</template>
<v-card class="elevation-2 ma-4">
<v-card-text class="text-xs-justify">
<v-container class="pa-0">
<p>
This work is lead by the
<a href="https://research.pasteur.fr/en/department/computational-biology/">Metagenomics Signature group</a>
at
<a href="https://research.pasteur.fr/en">Institut Pasteur</a>
and is part of the InSPIRe project.
This work is lead by the <a href="https://research.pasteur.fr/en/department/computational-biology/">Metagenomics Signature group</a>
at <a href="https://research.pasteur.fr/en">Institut Pasteur</a> and is part of the InSPIRe project.
</p>
</div>
<!-- Technical details -->
<h4 class="mb-1">Technical details</h4>
<v-list subheader>
<v-list-tile
v-for="item in techStack"
avatar
:href="item.url"
target="_blank"
>
<v-list-tile-action>
<v-icon :color="item.color">{{ item.icon }}</v-icon>
</v-list-tile-action>
Our main motivation is to provide a support for all the analysis that are based on gene catalogs.
</v-container>
</v-card-text>
</v-card>
</v-timeline-item>
<v-timeline-item
color="primary lighten-2"
right
>
<template v-slot:opposite>
<span class="subheading">Architecture overview</span>
</template>
<v-card class="pa-2 elevation-2 ma-4">
<v-img :src="archiImg"/></v-flex>
</v-card>
</v-timeline-item>
<v-timeline-item
color="primary lighten-2"
small
>
<template v-slot:opposite>
<span class="subheading">Technical details</span>
</template>
<v-card class="ma-0 elevation-2 ma-4">
<v-card-text>
<v-container class="pa-0">
<v-list subheader>
<v-list-tile
v-for="item in techStack"
avatar
:href="item.url"
target="_blank"
>
<v-list-tile-action>
<v-icon :color="item.color">{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-flex>
<v-flex sm12 md4 offset-md1>
<v-img :src="archiImg"/>
</v-flex>
</v-layout>
</v-container>
</v-card-title>
<v-card-title class="pt-2">
<v-container fluid>
<v-layout>
<v-flex md6 class="pa-2">
<h3 class="mb-1">The InSPIRe project</h3>
<div class="justify">
<p>The <b>In</b>novative <b>S</b>trategies for <b>P</b>erinatal <b>I</b>nfection Risk-<b>Re</b>duction project is coordinated by Elvesys, INSERM, Institut Pasteur and APHP.
</v-list-tile>
</v-list>
</v-container>
</v-card-text>
</v-card>
</v-timeline-item>
<v-timeline-item
color="secondary"
large
>
<template v-slot:opposite>
<span class="title">The InSPIRe project</span>
</template>
<v-card class="elevation-2 ma-4">
<v-card-text class="text-xs-justify">
<v-container class="pa-0">
<p>
The <b>In</b>novative <b>S</b>trategies for <b>P</b>erinatal <b>I</b>nfection Risk-<b>Re</b>duction project is coordinated by Elvesys, INSERM, Institut Pasteur and APHP.</br>
</p>
The clinical aspect of the study is based on a large cohort of mother/child and aims to identify the main germs and the best biomarkers from the vaginal flora to predict neonatal infections.
(need more details here about the project, perhaps also something to illustrate)</p>
</div>
</v-flex>
<v-flex md6>
<v-img src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"/>
</v-flex>
</v-layout>
</v-container>
</v-card-title>
</v-container>
</v-card-text>
</v-card>
</v-timeline-item>
</v-timeline>
</v-card>
<!-- Logos -->
<logos/>
</div>
\ No newline at end of file
......@@ -42,7 +42,7 @@ export default {
{
icon: "fab fa-docker",
title: "Kubernetes",
subtitle: "Production environment (special thanks to the IT Department at Pasteur)",
subtitle: "Production environment",
url: "https://kubernetes.io/",
color: 'tertiary',
},
......
<div class="home">
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">home</v-icon>
<v-icon class="white--text">fa-home</v-icon>
<v-toolbar-title>Home</v-toolbar-title>
</v-toolbar>
<v-card>
<v-container fluid>
<v-layout wrap align-center>
<v-flex sm12 md6 class="mr-4">
<v-toolbar class="primary lighten-1 white--text" dense>
<v-toolbar-title>Welcome to MetageneDB</v-toolbar-title>
</v-toolbar>
<v-card>
<v-card-text>
<v-container class="pa-0 text-xs-justify">
<p>
<b>MetageneDB</b> supports metagenomic gene catalogs by easing their use and providing an intuitive interface to browse and visualize their content.</br>
</p>
The backend server also exposes an API that can be requested to obtain annotations about a given gene and its documentation can be found
<a href="/api/swagger" target="_blank">here</a>.
</v-container>
</v-card-text>
</v-card>
</v-flex>
<v-flex md5 class="ml-4">
<!-- <v-container fluid> -->
<v-layout wrap justify-space-between>
<v-flex
v-for="item in menu"
md6
class="px-2"
>
<v-btn :to="item.route" large block class="primary lighten-1">
<v-layout align-center>
<v-icon>{{ item.icon }}</v-icon>
<v-spacer/>
<span class="body-2">{{ item.title }}</span>
<v-spacer/>
</v-layout>
</v-btn>
</v-flex>
</v-layout>
<!-- </v-container> -->
</v-flex>
</v-layout>
</v-container>
</v-card>
<!-- Logos -->
<logos/>
</div>
\ No newline at end of file
......@@ -4,4 +4,15 @@ export default {
components: {
logos: Logos,
},
computed: {
menu() {
return [
{ title: 'Catalog Statistics', icon: 'far fa-chart-bar', route: '/stats' },
{ title: 'Compare Taxonomy', icon: 'far fa-clone', route: '/compare' },
{ title: 'List genes', icon: 'format_list_bulleted', route: '/genes' },
{ title: 'About', icon: 'contact_support', route: '/about' },
{ title: 'Contact us', icon: 'fas fa-address-book'}
];
},
}
}
\ No newline at end of file
Supports Markdown
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