Skip to content
Snippets Groups Projects
Commit df335a09 authored by Simon Malesys's avatar Simon Malesys
Browse files

Fix the style and behavior of the selected card

parent a84c37c4
No related branches found
No related tags found
1 merge request!88Update frontend
Hide whitespace changes
Inline Side-by-side
Showing
with 30 additions and 24 deletions
client/pages/gwas.vue
+ 30
− 24
View file @ df335a09
...@@ -9,27 +9,32 @@ ...@@ -9,27 +9,32 @@
<section> <section>
<h2>Select an ancestry:</h2> <h2>Select an ancestry:</h2>
<v-row class="initmeta-card-list"> <div class="initmeta-card-list">
<v-col v-for="meta in initMetaList" :key="meta.name"> <v-card
<v-card class="initmeta-card" :class="{ 'selected-table': selectedInitTable === meta.name }"> v-for="meta in initMetaList"
<v-card-title>{{ meta.name }}</v-card-title> :key="meta.name"
<v-card-text>{{ meta.desc }}</v-card-text> class="initmeta-card"
<v-card-text> :class="{ 'selected-table': selectedInitTable === meta.name }"
<div> :color="selectedInitTable === meta.name ? 'blue lighten-4' : ''">
<strong>{{ meta.nb_snps.toLocaleString() }}</strong> <v-card-title>{{ meta.name }}</v-card-title>
SNPS <v-card-text>{{ meta.desc }}</v-card-text>
</div> <v-card-text>
<div> <div>
<strong>{{ meta.nb_phenotypes.toLocaleString() }}</strong> <strong>{{ meta.nb_snps.toLocaleString() }}</strong>
phenotypes SNPS
</div> </div>
</v-card-text> <div>
<v-card-actions class="card-buttons"> <strong>{{ meta.nb_phenotypes.toLocaleString() }}</strong>
<v-btn class="button" color="primary" @click="selectAncestry('initTable.hdf5')">Select this ancestry</v-btn> phenotypes
</v-card-actions> </div>
</v-card> </v-card-text>
</v-col> <v-card-actions class="card-buttons">
</v-row> <v-btn class="button" color="primary" @click="selectAncestry(meta.name)">
Select this ancestry
</v-btn>
</v-card-actions>
</v-card>
</div>
</section> </section>
<section v-show="phenotypes.length"> <section v-show="phenotypes.length">
...@@ -158,12 +163,13 @@ section h2 { ...@@ -158,12 +163,13 @@ section h2 {
.initmeta-card-list { .initmeta-card-list {
display: flex; display: flex;
flex-flow: row wrap;
gap: 20px;
justify-content: center; justify-content: center;
} }
.selected-table { .initmeta-card {
border-color: #3b7fe0; width: 400px;
color: #3b7fe0;
} }
.card-title { .card-title {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment