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

add textarea to go directly to gene card from home page

parent b13594ad
Pipeline #32095 passed with stages
in 3 minutes and 12 seconds
...@@ -9,7 +9,12 @@ ...@@ -9,7 +9,12 @@
:value="true" :value="true"
type="warning" type="warning"
> >
Gene "{{ geneId }}" not found in the database. <v-layout align-center>
Gene "{{ geneId }}" not found in the database.
<v-spacer/>
<router-link to="/">redirect to home page</router-link>
<v-icon small class="ml-1">fa-home</v-icon>
</v-layout>
</v-alert> </v-alert>
<v-card v-else> <v-card v-else>
......
...@@ -13,6 +13,28 @@ ...@@ -13,6 +13,28 @@
<v-card class="blue-grey lighten-5"> <v-card class="blue-grey lighten-5">
<v-card-text> <v-card-text>
<v-container class="pa-0 text-xs-justify"> <v-container class="pa-0 text-xs-justify">
<v-layout>
<v-flex md10>
<v-text-field
label="Enter gene ID to visit page"
solo
class="my-1 mx-2"
flat
v-model="geneId"
v-on:keyup.enter.native="goToGeneDetail"
></v-text-field>
</v-flex>
<v-flex md1 class="ml-3">
<v-btn
:to="/gene-detail/ + geneIdLower"
small fab
:disabled="disableGo"
class="light-green lighten-2"
>
Go
</v-btn>
</v-flex>
</v-layout>
<p> <p>
<b>MetageneDB</b> supports metagenomic gene catalogs by easing their use and providing an intuitive interface to browse and visualize their content.</br> <b>MetageneDB</b> supports metagenomic gene catalogs by easing their use and providing an intuitive interface to browse and visualize their content.</br>
</p> </p>
...@@ -23,24 +45,22 @@ ...@@ -23,24 +45,22 @@
</v-card> </v-card>
</v-flex> </v-flex>
<v-flex md5 class="ml-4"> <v-flex md5 class="ml-4">
<!-- <v-container fluid> --> <v-layout wrap justify-space-between>
<v-layout wrap justify-space-between> <v-flex
<v-flex v-for="item in menu"
v-for="item in menu" md6
md6 class="px-2"
class="px-2" >
> <v-btn :to="item.route" large block class="primary lighten-1">
<v-btn :to="item.route" large block class="primary lighten-1"> <v-layout align-center>
<v-layout align-center> <v-icon>{{ item.icon }}</v-icon>
<v-icon>{{ item.icon }}</v-icon> <v-spacer/>
<v-spacer/> <span class="body-2">{{ item.title }}</span>
<span class="body-2">{{ item.title }}</span> <v-spacer/>
<v-spacer/> </v-layout>
</v-layout> </v-btn>
</v-btn> </v-flex>
</v-flex> </v-layout>
</v-layout>
<!-- </v-container> -->
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
......
...@@ -4,6 +4,11 @@ export default { ...@@ -4,6 +4,11 @@ export default {
components: { components: {
logos: Logos, logos: Logos,
}, },
data() {
return {
geneId: '',
}
},
computed: { computed: {
menu() { menu() {
return [ return [
...@@ -14,5 +19,21 @@ export default { ...@@ -14,5 +19,21 @@ export default {
{ title: 'Contact us', icon: 'fas fa-address-book'} { title: 'Contact us', icon: 'fas fa-address-book'}
]; ];
}, },
disableGo() {
if (this.geneId) {
return false;
}
return true;
},
geneIdLower() {
return this.geneId.toLowerCase();
}
},
methods: {
goToGeneDetail() {
this.$router.push({
path: `/gene-detail/${this.geneIdLower}`
})
}
} }
} }
\ 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