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

refactor genedetail page

parent ca5b42f5
Pipeline #32010 passed with stages
in 3 minutes and 16 seconds
......@@ -4,7 +4,7 @@ import Router from 'vue-router';
import About from '@/views/about/about.vue';
import Catalogstats from '@/views/stats/stats.vue';
import Compare from '@/views/compare/compare.vue'
import GeneDetail from '@/views/GeneDetail.vue';
import GeneDetail from '@/views/genedetail/genedetail.vue';
import Genes from '@/views/genes/genes.vue';
import Home from '@/views/home/home.vue';
......
<div class="gene-detail">
<v-flex>
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">fa-clipboard</v-icon>
<v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
</v-toolbar>
<v-card>
<v-container
fluid
grid-list-md
>
<v-layout row wrap>
<!-- General information -->
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar class="primary white--text" dense>
<v-icon class="white--text">format_list_bulleted</v-icon>
<v-toolbar-title>
Gene information
</v-toolbar-title>
</v-toolbar>
<v-list>
<template v-for="(item, index) in gene_detail">
<v-divider
v-if="index > 0"
:key="index"
></v-divider>
<v-list-tile :key="item.title">
<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>
</v-list-tile-content>
</v-list-tile>
</template>
<v-expansion-panel>
<v-expansion-panel-content>
<template v-slot:header><div>FASTA sequence</div></template>
<div>
<v-textarea
readonly
background-color="dropdown"
hide-details
:value="sequence"
id="fastaseq"
></v-textarea>
<v-layout wrap align-center>
<v-spacer></v-spacer>
<v-btn @click="copyFasta" class="ma-2 secondary lighten-1">Copy FASTA
<v-icon right dark>far fa-copy</v-icon>
</v-btn>
</v-layout>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-list>
</v-card>
</v-flex>
<!-- KEGG Function -->
<KeggCard :kegg_id='kegg_id'></KeggCard>
<TaxonomyCard :taxonomy_id='taxonomy_id'></TaxonomyCard>
</v-layout>
</v-container>
</v-card>
</v-flex>
</div>
\ No newline at end of file
<template>
<div class="gene-detail">
<v-flex>
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">fa-clipboard</v-icon>
<v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
</v-toolbar>
<v-card>
<v-container
fluid
grid-list-md
>
<v-layout row wrap>
<!-- General information -->
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar class="primary white--text" dense>
<v-icon class="white--text">format_list_bulleted</v-icon>
<v-toolbar-title>
Gene information
</v-toolbar-title>
</v-toolbar>
<v-list>
<template v-for="(item, index) in gene_detail">
<v-divider
v-if="index > 0"
:key="index"
></v-divider>
<v-list-tile :key="item.title">
<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>
</v-list-tile-content>
</v-list-tile>
</template>
<v-expansion-panel>
<v-expansion-panel-content>
<template v-slot:header><div>FASTA sequence</div></template>
<div>
<v-textarea
readonly
background-color="dropdown"
hide-details
:value="sequence"
id="fastaseq"
></v-textarea>
<v-layout wrap align-center>
<v-spacer></v-spacer>
<v-btn @click="copyFasta" class="ma-2 secondary lighten-1">Copy FASTA
<v-icon right dark>far fa-copy</v-icon>
</v-btn>
</v-layout>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-list>
</v-card>
</v-flex>
<!-- KEGG Function -->
<KeggCard :kegg_id='kegg_id'></KeggCard>
<TaxonomyCard :taxonomy_id='taxonomy_id'></TaxonomyCard>
</v-layout>
</v-container>
</v-card>
</v-flex>
</div>
</template>
<script>
import axios from 'axios';
import KeggCard from '@/components/KeggCard.vue';
import TaxonomyCard from '@/components/TaxonomyCard.vue';
......@@ -136,6 +66,4 @@ export default {
document.execCommand("copy");
}
},
};
</script>
<style src="./genedetails.scss" lang="scss" scoped></style>
};
\ No newline at end of file
<template src="./genedetail.html" lang="html"></template>
<script src="./genedetail.js" lang="js"></script>
<style src="./genedetail.scss" lang="scss" scoped></style>
\ 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