diff --git a/client/pages/gwas.vue b/client/pages/gwas.vue index 73dcbc0ab23469e5f41150733514177a1517ef0d..ab5839b98afb1694be3d54e4d4d2c4b37afd4bb3 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 {