From e80b6b202813c6aeb615bc52e7ffb164bdd1a84f Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 2 Aug 2022 18:16:30 +0200
Subject: [PATCH] Responsive button layout via ButtonGroup

---
 frontend/src/components/form/ActionButton.vue |  2 -
 frontend/src/components/form/ButtonGroup.vue  | 50 +++++++++++++++++++
 frontend/src/scss/_mixins.scss                | 21 ++++++++
 frontend/src/scss/_variables.scss             | 39 ++++++++-------
 frontend/src/views/AdminDashboardView.vue     |  1 +
 frontend/src/views/HomeView.vue               | 12 +++--
 6 files changed, 101 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/form/ButtonGroup.vue

diff --git a/frontend/src/components/form/ActionButton.vue b/frontend/src/components/form/ActionButton.vue
index ab9866e..7e45114 100644
--- a/frontend/src/components/form/ActionButton.vue
+++ b/frontend/src/components/form/ActionButton.vue
@@ -29,8 +29,6 @@ function onClick() {
 @import "../../scss/variables";
 
 button {
-    margin: 0.3em;
-
     padding: $button-padding;
     border-radius: $button-border-radius;
     border-width: $button-border-width;
diff --git a/frontend/src/components/form/ButtonGroup.vue b/frontend/src/components/form/ButtonGroup.vue
new file mode 100644
index 0000000..09d44e8
--- /dev/null
+++ b/frontend/src/components/form/ButtonGroup.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type {ButtonSize} from "@/types";
+
+interface Props {
+    buttonSize: ButtonSize;
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+    <div :class="['button-group', buttonSize]">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss">
+@import "../../scss/variables";
+@import "../../scss/mixins";
+
+.button-group {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    button {
+        margin: $button-margin;
+    }
+}
+
+@include max-page-breakpoint(smaller) {
+    .button-group {
+        flex-direction: column;
+
+        button {
+            margin: $button-margin 0;
+            width: 100%;
+        }
+    }
+}
+@include page-breakpoint(smaller) {
+    .button-group {
+        align-items: center;
+        button {
+            flex-grow: 1;
+            max-width: 80%;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/scss/_mixins.scss b/frontend/src/scss/_mixins.scss
index bc2da27..a44c9ee 100644
--- a/frontend/src/scss/_mixins.scss
+++ b/frontend/src/scss/_mixins.scss
@@ -15,3 +15,24 @@
         }
     }
 }
+
+@mixin min-page-breakpoint($name) {
+    $breakpoint: map-get($page-breakpoints, $name);
+    $lower-bound: nth($breakpoint, 1);
+    @media ($lower-bound <= width) {
+        @content;
+    }
+}
+
+@mixin max-page-breakpoint($name) {
+    $breakpoint: map-get($page-breakpoints, $name);
+    $upper-bound: nth($breakpoint, 2);
+    @if ($upper-bound == null) {
+        @error "Breakpoint #{$name} has no upper bound.";
+    }
+    @else {
+        @media (width < $upper-bound) {
+            @content;
+        }
+    }
+}
diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index 71b8eba..559b1db 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -33,20 +33,22 @@ $variant-color-info: map-get($variant-colors, info);
 // Page
 $page-breakpoints: (
     // first value is <=, second <
-    xs: (0px, 576px),
-    sm: (576px, 768px),
-    md: (768px, 992px),
-    lg: (992px, 1200px),
-    xl: (1200px, 1400px),
-    xxl: (1400px, null),
+    smallest: (0px, 375px),
+    smaller: (375px, 576px),
+    small: (576px, 768px),
+    medium: (768px, 992px),
+    large: (992px, 1200px),
+    larger: (1200px, 1400px),
+    largest: (1400px, null),
 );
 $page-container-widths: (
-    xs: 100%,
-    sm: 100%,
-    md: 768px,
-    lg: 992px,
-    xl: 992px,
-    xxl: 992px,
+    smallest: 100%,
+    smaller: 100%,
+    small: 100%,
+    medium: 768px,
+    large: 992px,
+    larger: 992px,
+    largest: 992px,
 );
 $page-background-color: $gray-darkest;
 $page-text-color: $gray-lighter;
@@ -90,12 +92,13 @@ $nav-footer-padding: 0.75em;
 
 // Statistics
 $statistics-card-widths: (
-    xs: 100%,
-    sm: 50%,
-    md: 50%,
-    lg: 33.3333%,
-    xl: 33.3333%,
-    xxl: 33.3333%,
+    smallest: 100%,
+    smaller: 80%,
+    small: 50%,
+    medium: 50%,
+    large: 33.3333%,
+    larger: 33.3333%,
+    largest: 33.3333%,
 );
 $statistics-card-height: 4.5em;
 $statistics-card-margin: 0.5em;
diff --git a/frontend/src/views/AdminDashboardView.vue b/frontend/src/views/AdminDashboardView.vue
index c09f6a3..35a1217 100644
--- a/frontend/src/views/AdminDashboardView.vue
+++ b/frontend/src/views/AdminDashboardView.vue
@@ -67,6 +67,7 @@ refresh();
 
 .statistics {
     display: grid;
+    justify-content: center;
 }
 
 @each $breakpoint, $width in $statistics-card-widths {
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 3c0c54d..2bb8a21 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import ActionButton from "@/components/form/ActionButton.vue";
+import ButtonGroup from "@/components/form/ButtonGroup.vue";
 import PageContainer from "@/components/page/PageContainer.vue";
-import {ButtonSize, ComponentVariant} from "@/types";
-</script>
+import {ButtonSize, ComponentVariant} from "@/types";</script>
 
 <template>
     <PageContainer>
@@ -12,7 +12,7 @@ import {ButtonSize, ComponentVariant} from "@/types";
             Knoten in Betrieb und möchtest seine Daten ändern? Oder Du möchtest einen Knoten, der nicht mehr in Betrieb
             ist löschen? Dann bist Du hier richtig!</p>
 
-        <div class="actions">
+        <ButtonGroup :button-size="ButtonSize.LARGE">
             <ActionButton
                 :variant="ComponentVariant.INFO"
                 :size="ButtonSize.LARGE"
@@ -31,9 +31,13 @@ import {ButtonSize, ComponentVariant} from "@/types";
                 icon="trash">
                 Knoten löschen
             </ActionButton>
-        </div>
+        </ButtonGroup>
     </PageContainer>
 </template>
 
 <style lang="scss" scoped>
+@import "../scss/variables";
+@import "../scss/mixins";
+
+
 </style>