From e885975affe1790ab8e9df1b481d6350bb343cd3 Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 2 Aug 2022 17:07:57 +0200
Subject: [PATCH] Added PageContainer handling responsive breakpoints.

---
 .../src/components/page/PageContainer.vue     | 28 +++++++++++++++++++
 frontend/src/scss/_mixins.scss                | 17 +++++++++++
 frontend/src/scss/_variables.scss             | 17 +++++++++++
 frontend/src/views/HomeView.vue               |  5 ++--
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/page/PageContainer.vue
 create mode 100644 frontend/src/scss/_mixins.scss

diff --git a/frontend/src/components/page/PageContainer.vue b/frontend/src/components/page/PageContainer.vue
new file mode 100644
index 0000000..5e85dec
--- /dev/null
+++ b/frontend/src/components/page/PageContainer.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="page-container">
+        <div class="content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../scss/variables";
+@import "../../scss/mixins";
+
+.page-container {
+    display: flex;
+    justify-content: center;
+}
+
+@each $breakpoint, $width in $page-container-widths {
+    @include page-breakpoint($breakpoint) {
+        .content {
+            width: $width;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/scss/_mixins.scss b/frontend/src/scss/_mixins.scss
new file mode 100644
index 0000000..bc2da27
--- /dev/null
+++ b/frontend/src/scss/_mixins.scss
@@ -0,0 +1,17 @@
+@import "variables";
+
+@mixin page-breakpoint($name) {
+    $breakpoint: map-get($page-breakpoints, $name);
+    $lower-bound: nth($breakpoint, 1);
+    $upper-bound: nth($breakpoint, 2);
+    @if ($upper-bound == null) {
+        @media ($lower-bound <= width) {
+            @content;
+        }
+    }
+    @else {
+        @media ($lower-bound <= width < $upper-bound) {
+            @content;
+        }
+    }
+}
diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index a18c939..bfe7cb1 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -31,6 +31,23 @@ $variant-color-danger: map-get($variant-colors, danger);
 $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),
+);
+$page-container-widths: (
+    xs: 100%,
+    sm: 100%,
+    md: 768px,
+    lg: 992px,
+    xl: 992px,
+    xxl: 992px,
+);
 $page-background-color: $gray-darkest;
 $page-text-color: $gray-lighter;
 $page-padding: 0.5em 0.5em 4.5em 0.5em;
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 2b6786c..3c0c54d 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import ActionButton from "@/components/form/ActionButton.vue";
+import PageContainer from "@/components/page/PageContainer.vue";
 import {ButtonSize, ComponentVariant} from "@/types";
 </script>
 
 <template>
-    <div>
+    <PageContainer>
         <h2>Willkommen!</h2>
 
         <p>Du hast einen neuen Freifunk Hamburg Router (Knoten), den Du in Betrieb nehmen möchtest? Du hast schon einen
@@ -31,7 +32,7 @@ import {ButtonSize, ComponentVariant} from "@/types";
                 Knoten löschen
             </ActionButton>
         </div>
-    </div>
+    </PageContainer>
 </template>
 
 <style lang="scss" scoped>