From 9c3bcfe59c185cc7ac65bd0c03c3b9b002f8951d Mon Sep 17 00:00:00 2001
From: Simon Malesys <simon.malesys@pasteur.fr>
Date: Wed, 17 Jan 2024 14:57:02 +0100
Subject: [PATCH] Fix the style and behavior of the selected card
---
client/pages/gwas.vue | 54 ++++++++++++++++++++++++-------------------
1 file changed, 30 insertions(+), 24 deletions(-)
diff --git a/client/pages/gwas.vue b/client/pages/gwas.vue
index 73dcbc0a..ab5839b9 100644
--- a/client/pages/gwas.vue
+++ b/client/pages/gwas.vue
@@ -9,27 +9,32 @@
<section>
<h2>Select an ancestry:</h2>
- <v-row class="initmeta-card-list">
- <v-col v-for="meta in initMetaList" :key="meta.name">
- <v-card class="initmeta-card" :class="{ 'selected-table': selectedInitTable === meta.name }">
- <v-card-title>{{ meta.name }}</v-card-title>
- <v-card-text>{{ meta.desc }}</v-card-text>
- <v-card-text>
- <div>
- <strong>{{ meta.nb_snps.toLocaleString() }}</strong>
- SNPS
- </div>
- <div>
- <strong>{{ meta.nb_phenotypes.toLocaleString() }}</strong>
- phenotypes
- </div>
- </v-card-text>
- <v-card-actions class="card-buttons">
- <v-btn class="button" color="primary" @click="selectAncestry('initTable.hdf5')">Select this ancestry</v-btn>
- </v-card-actions>
- </v-card>
- </v-col>
- </v-row>
+ <div class="initmeta-card-list">
+ <v-card
+ v-for="meta in initMetaList"
+ :key="meta.name"
+ class="initmeta-card"
+ :class="{ 'selected-table': selectedInitTable === meta.name }"
+ :color="selectedInitTable === meta.name ? 'blue lighten-4' : ''">
+ <v-card-title>{{ meta.name }}</v-card-title>
+ <v-card-text>{{ meta.desc }}</v-card-text>
+ <v-card-text>
+ <div>
+ <strong>{{ meta.nb_snps.toLocaleString() }}</strong>
+ SNPS
+ </div>
+ <div>
+ <strong>{{ meta.nb_phenotypes.toLocaleString() }}</strong>
+ phenotypes
+ </div>
+ </v-card-text>
+ <v-card-actions class="card-buttons">
+ <v-btn class="button" color="primary" @click="selectAncestry(meta.name)">
+ Select this ancestry
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </div>
</section>
<section v-show="phenotypes.length">
@@ -158,12 +163,13 @@ section h2 {
.initmeta-card-list {
display: flex;
+ flex-flow: row wrap;
+ gap: 20px;
justify-content: center;
}
-.selected-table {
- border-color: #3b7fe0;
- color: #3b7fe0;
+.initmeta-card {
+ width: 400px;
}
.card-title {
--
GitLab