- Let last card takes the full width

- Make all cards height equal in small screens - Adjust statistics page grid
threefoldtech · Jun 23, 2024 · edfc0eb · edfc0eb
1 parent a2fded9
commit edfc0eb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/playground/src/components/statistics_card.vue b/packages/playground/src/components/statistics_card.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card color="primary" class="py-2 text-center">
+  <v-card color="primary" class="py-2 text-center flex-grow-1">
     <div class="font-weight-medium">
       <v-icon class="mr-2" size="small">{{ item.icon }} </v-icon>
       <span>

diff --git a/packages/playground/src/views/stats.vue b/packages/playground/src/views/stats.vue
@@ -24,12 +24,18 @@
               </v-btn>
             </v-alert>
           </v-col>
-          <v-col cols="12" sm="6">
+          <v-col cols="12" md="8">
             <tf-map r="125" g="227" b="200" :nodes="nodesDistribution" />
           </v-col>
-          <v-col v-if="Istats.length !== 0">
+          <v-col v-if="Istats.length !== 0" cols="12" md="4">
             <v-row>
-              <v-col v-for="item of Istats" :key="item.title" cols="12" sm="6">
+              <v-col
+                v-for="(item, index) of Istats"
+                :key="item.title"
+                :cols="index === Istats.length - 1 ? 12 : 6"
+                :md="index === Istats.length - 1 ? 12 : 6"
+                class="d-flex flex-grow-1"
+              >
                 <StatisticsCard :item="item" />
               </v-col>
             </v-row>