Skip to content
GitLab
Commit 6ea59860 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion ♻
Browse files

improve general browsing in frontend

parent c0b82372
Pipeline #32106 passed with stages
in 3 minutes and 3 seconds
Hide whitespace changes
Inline Side-by-side
frontend/src/App.vue
View file @ 6ea59860
......@@ -2,7 +2,7 @@
<v-app>
<Navbar/>
<v-content class="ma-3">
<keep-alive :exclude="/gene-detail.*/">
<keep-alive include="compare,stats,genes">
<router-view></router-view>
</keep-alive>
......
frontend/src/components/eggnogcard/eggnogcard.html
View file @ 6ea59860
......@@ -16,8 +16,8 @@
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<!-- Simple information -->
<SimpleListing v-else :listData="eggnogDetails"/>
<SimpleListing v-else :listData="eggnogDetails" :color="color"/>
<!-- Expanded information -->
<SimpleExpand :expandData="eggnogExpandDetails"/>
<SimpleExpand :expandData="eggnogExpandDetails" color="color"/>
</v-card>
</v-flex>
\ No newline at end of file
frontend/src/components/eggnogcard/eggnogcard.js
View file @ 6ea59860
......@@ -9,6 +9,7 @@ export default {
name: 'EggNogCard',
props: {
eggnogId: String,
color: String,
},
mounted() {
this.getEggNogDetail();
......
frontend/src/components/keggcard/keggcard.html
View file @ 6ea59860
......@@ -16,8 +16,8 @@
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<!-- Simple information -->
<SimpleListing v-else :listData="keggDetails"/>
<SimpleListing v-else :listData="keggDetails" :color="color"/>
<!-- Expandable details (pathways, diseases, references...) -->
<SimpleExpand :expandData="keggExpandDetails"/>
<SimpleExpand :expandData="keggExpandDetails" :color="color"/>
</v-card>
</v-flex>
\ No newline at end of file
frontend/src/components/keggcard/keggcard.js
View file @ 6ea59860
......@@ -10,6 +10,7 @@ export default {
name: 'KeggCard',
props: {
keggId: String,
color: String,
},
mounted() {
this.getKeggDetail();
......
frontend/src/components/listing/simpleexpand/simpleexpand.html
View file @ 6ea59860
......@@ -4,7 +4,7 @@
<v-divider
:key="expanditem.title"
></v-divider>
<v-expansion-panel-content>
<v-expansion-panel-content :class="colors.lighten_5">
<template v-slot:header>
<div>
<v-icon small color="primary">{{ expanditem.icon }}</v-icon>
......@@ -12,10 +12,10 @@
</div>
</template>
<v-card>
<v-list>
<v-list :class="colors.lighten_4">
<template v-for="(item, index) in expanditem.content">
<v-divider></v-divider>
<v-list-tile :key="item.id" class="dropdown">
<v-divider v-if="index > 0" :key="index"/>
<v-list-tile :key="item.id" :class="colors.lighten_4">
<v-list-tile-content>
<v-tooltip top>
<template v-slot:activator="{ on }">
......
frontend/src/components/listing/simpleexpand/simpleexpand.js
View file @ 6ea59860
......@@ -2,5 +2,14 @@ export default {
name: 'SimpleExpand',
props: {
expandData: Array,
color: String,
},
computed: {
colors() {
return {
lighten_4: `${this.color} lighten-4`,
lighten_5: `${this.color} lighten-5`,
}
}
}
};
\ No newline at end of file
frontend/src/components/listing/simplelisting/simplelisting.html
View file @ 6ea59860
<div name="simplelisting">
<v-list>
<v-list :class="colors.lighten_5">
<template v-for="(item, index) in listData">
<v-divider
v-if="index > 0"
:key="index"
></v-divider>
<v-list-tile :key="item.title">
<v-list-tile :key="item.title" :href="item.url_all" target="_blank">
<v-list-tile-action v-if="item.icon">
<v-icon :color="item.icon_color">{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content :key="item.content">
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
......
frontend/src/components/listing/simplelisting/simplelisting.js
View file @ 6ea59860
......@@ -2,5 +2,14 @@ export default {
name: 'SimpleListing',
props: {
listData: Array,
color: String,
},
computed: {
colors() {
return {
lighten_4: `${this.color} lighten-4`,
lighten_5: `${this.color} lighten-5`,
}
}
}
};
\ No newline at end of file
frontend/src/components/taxonomycard/taxonomycard.html
View file @ 6ea59860
......@@ -28,9 +28,14 @@
<v-list-tile-sub-title v-html="item.content.name"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn :href="item.url" icon flat target="_blank" class="primary--text">
<v-icon>open_in_new</v-icon>
</v-btn>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="primary--text" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Visit NCBI taxonomy</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
......
frontend/src/views/about/about.html
View file @ 6ea59860
......@@ -44,29 +44,7 @@
</template>
<v-card class="blue-grey lighten-5 ma-0 elevation-2 ma-4">
<v-card-text>
<v-container class="pa-0">
<v-list class="blue-grey lighten-5">
<template v-for="item in techStack">
<v-list-tile
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>
</template>
</v-list>
</v-container>
<SimpleListing color="blue-grey" :listData="techStack"/>
</v-card-text>
</v-card>
</v-timeline-item>
......
frontend/src/views/about/about.js
View file @ 6ea59860
import Logos from '@/components/logos/logos.vue';
import SimpleListing from '@/components/listing/simplelisting/simplelisting.vue';
export default {
name: 'about',
computed: {
techStack() {
return [
{
icon: "fas fa-database",
title: "PostgreSQL",
subtitle: "Database",
url: "https://www.postgresql.org/",
color: "tertiary",
content: "Database",
url_all: "https://www.postgresql.org/",
icon_color: "tertiary",
},
{
icon: "fab fa-python",
title: "Django",
subtitle: "Backend - ORM",
url: "https://www.djangoproject.com/",
color: "kegg",
content: "Backend - ORM",
url_all: "https://www.djangoproject.com/",
icon_color: "kegg",
},
{
icon: "fab fa-python",
title: "Django REST framework",
subtitle: "Backend - API",
url: "https://www.django-rest-framework.org/",
color: "kegg",
content: "Backend - API",
url_all: "https://www.django-rest-framework.org/",
icon_color: "kegg",
},
{
icon: "fab fa-vuejs",
title: "Vue.js",
subtitle: "Frontend",
url: "https://vuejs.org/",
color: "green",
content: "Frontend",
url_all: "https://vuejs.org/",
icon_color: "green",
},
{
icon: "fab fa-docker",
title: "Docker Compose",
subtitle: "Local development environment",
url: "https://docs.docker.com/compose/",
color: 'tertiary',
content: "Local development environment",
url_all: "https://docs.docker.com/compose/",
icon_color: 'tertiary',
},
{
icon: "fab fa-docker",
title: "Kubernetes",
subtitle: "Production environment",
url: "https://kubernetes.io/",
color: 'tertiary',
content: "Production environment",
url_all: "https://kubernetes.io/",
icon_color: 'tertiary',
},
]
},
......@@ -53,6 +55,6 @@ export default {
}
},
components: {
logos: Logos,
logos: Logos, SimpleListing,
},
}
\ No newline at end of file
frontend/src/views/compare/compare.js
View file @ 6ea59860
......@@ -5,7 +5,7 @@ import Doughnut from '@/components/Doughnut.vue';
export default {
name: 'home',
name: 'compare',
data() {
return {
// Gene sources
......
frontend/src/views/genedetail/genedetail.html
View file @ 6ea59860
......@@ -17,7 +17,7 @@
</v-layout>
</v-alert>
<v-card v-else>
<v-card v-else class="blue-grey lighten-5">
<v-container
fluid
grid-list-md
......@@ -47,7 +47,7 @@
<div>
<v-textarea
readonly
background-color="dropdown"
background-color="blue-grey lighten-4"
hide-details
:value="sequence"
id="fastaseq"
......
frontend/src/views/home/home.html
View file @ 6ea59860
......@@ -16,7 +16,7 @@
<v-layout justify-space-around>
<v-flex md10>
<v-text-field
label="Enter gene ID to visit page"
label="Enter gene ID to visit page (e.g. v1948144)"
solo
class="my-1 mx-2"
flat
......
frontend/src/views/stats/stats.js
View file @ 6ea59860
......@@ -5,7 +5,7 @@ import Doughnut from '@/components/Doughnut.vue';
export default {
name: 'home',
name: 'stats',
data() {
return {
// Gene source
......
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