From 33f076b1b63f9c0d2c9a145c5c7f477017fbc65c Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 2 Aug 2022 17:21:05 +0200
Subject: [PATCH] Responsive statistics card in admin dashboard.

---
 frontend/src/scss/_variables.scss         |  8 +++++++
 frontend/src/views/AdminDashboardView.vue | 29 ++++++++++++++++-------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index bfe7cb1..71b8eba 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -89,6 +89,14 @@ $nav-header-logo-margin: 0 0.5em 0 0;
 $nav-footer-padding: 0.75em;
 
 // Statistics
+$statistics-card-widths: (
+    xs: 100%,
+    sm: 50%,
+    md: 50%,
+    lg: 33.3333%,
+    xl: 33.3333%,
+    xxl: 33.3333%,
+);
 $statistics-card-height: 4.5em;
 $statistics-card-margin: 0.5em;
 $statistics-card-padding: 0.3em 0.5em;
diff --git a/frontend/src/views/AdminDashboardView.vue b/frontend/src/views/AdminDashboardView.vue
index c8eeaef..c09f6a3 100644
--- a/frontend/src/views/AdminDashboardView.vue
+++ b/frontend/src/views/AdminDashboardView.vue
@@ -2,6 +2,7 @@
 import StatisticsCard from "@/components/admin/StatisticsCard.vue";
 import {useStatisticsStore} from "@/stores/statistics";
 import {ComponentVariant, MonitoringState} from "@/types";
+import PageContainer from "@/components/page/PageContainer.vue";
 
 const statistics = useStatisticsStore();
 
@@ -13,7 +14,7 @@ refresh();
 </script>
 
 <template>
-    <div v-if="statistics.getStatistics">
+    <PageContainer v-if="statistics.getStatistics">
         <h2>Knotenstatistik</h2>
 
         <div class="statistics">
@@ -23,7 +24,7 @@ refresh();
                 :variant="ComponentVariant.INFO"
                 :value="statistics.getStatistics.nodes.registered"
                 link="/admin/nodes"
-                />
+            />
             <StatisticsCard
                 title="Mit hinterlegtem fastd-Key"
                 icon="lock"
@@ -31,7 +32,7 @@ refresh();
                 :value="statistics.getStatistics.nodes.withVPN"
                 link="/admin/nodes"
                 :filter="{hasKey: true}"
-                />
+            />
             <StatisticsCard
                 title="Mit Koordinaten"
                 icon="map-marker"
@@ -39,7 +40,7 @@ refresh();
                 :value="statistics.getStatistics.nodes.withCoords"
                 link="/admin/nodes"
                 :filter="{hasCoords: true}"
-                />
+            />
             <StatisticsCard
                 title="Monitoring aktiv"
                 icon="heartbeat"
@@ -47,7 +48,7 @@ refresh();
                 :value="statistics.getStatistics.nodes.monitoring.active"
                 link="/admin/nodes"
                 :filter="{monitoringState: MonitoringState.ACTIVE}"
-                />
+            />
             <StatisticsCard
                 title="Monitoring noch nicht bestätigt"
                 icon="envelope"
@@ -55,15 +56,25 @@ refresh();
                 :value="statistics.getStatistics.nodes.monitoring.pending"
                 link="/admin/nodes"
                 :filter="{monitoringState: MonitoringState.PENDING}"
-                />
+            />
         </div>
-    </div>
+    </PageContainer>
 </template>
 
 <style lang="scss" scoped>
+@import "../scss/variables";
+@import "../scss/mixins";
+
 .statistics {
     display: grid;
-    // TODO: Responsive sizes
-    grid-template-columns: repeat(auto-fill, minmax(25%, 100%));
 }
+
+@each $breakpoint, $width in $statistics-card-widths {
+    @include page-breakpoint($breakpoint) {
+        .statistics {
+            grid-template-columns: repeat(auto-fill, $width);
+        }
+    }
+}
+
 </style>