From 41f8c89178dc322f493e24d630e94bb4bdf88590 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gi=C3=B2=20Diani?= <mail@gionathandiani.name>
Date: Sun, 19 Jan 2025 11:27:21 +0100
Subject: [PATCH] really basic mobile view

---
 dashboard/resources/css/app.css              | 34 +++++++++++++++-----
 dashboard/resources/views/overview.blade.php |  6 ++--
 dashboard/resources/views/property.blade.php |  4 +--
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/dashboard/resources/css/app.css b/dashboard/resources/css/app.css
index dc571bc..a1a11d2 100644
--- a/dashboard/resources/css/app.css
+++ b/dashboard/resources/css/app.css
@@ -191,10 +191,10 @@ body.overview main{
   grid-template-columns: repeat(8, minmax(1%, 50%));
   grid-template-rows: repeat(4, 1fr);
   grid-template-areas:
-      "chart3 chart3 chart3 chart1 chart1 chart1 chart4 chart4"
-      "chart3 chart3 chart3 chart1 chart1 chart1 chart4 chart4"
-      "chart3 chart3 chart3 chart2 chart2 chart2 chart4 chart4"
-      "chart3 chart3 chart3 chart2 chart2 chart2 chart4 chart4"
+      "chart1 chart1 chart1 chart2 chart2 chart2 chart4 chart4"
+      "chart1 chart1 chart1 chart2 chart2 chart2 chart4 chart4"
+      "chart1 chart1 chart1 chart3 chart3 chart3 chart4 chart4"
+      "chart1 chart1 chart1 chart3 chart3 chart3 chart4 chart4"
 }
 
 body.region main{
@@ -214,8 +214,8 @@ body.property main{
   grid-template-columns: repeat(4, minmax(10%, 50%));
     grid-template-rows: repeat(4, 1fr) 4em;
     grid-template-areas:
-      "chart2 chart2 chart1 chart1"
-      "chart2 chart2 chart1 chart1"
+      "chart1 chart1 chart2 chart2"
+      "chart1 chart1 chart2 chart2"
       "chart5 chart5 chart3 chart4"
       "chart5 chart5 chart3 chart4"
       "chart5 chart5 timeline timeline";
@@ -260,10 +260,28 @@ article>header>h2{
     height: auto;
   }
 
-  main{
+  body.overview main,
+  body.region main,
+  body.property main{
     height: auto;
     grid-template-columns: 100%;
-    grid-template-rows: repeat(4, minmax(20em, 25em));
+    grid-template-rows: repeat(5, minmax(20em, 25em)) 4em;
+    grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart5" "chart6" "timeline";
+  }
+
+  body.overview main{
+    grid-template-rows: minmax(20em, 40em) repeat(3, minmax(20em, 25em));
+    grid-template-areas: "chart1" "chart2" "chart3" "chart4";
+  }
+
+  body.region main{
+    grid-template-rows: minmax(20em, 40em) repeat(4, minmax(20em, 25em)) 4em;
+    grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart6" "timeline";
+  }
+
+  body.property main{
+    grid-template-rows: repeat(5, minmax(20em, 25em)) 4em;
+    grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart5" "timeline";
   }
 }
 
diff --git a/dashboard/resources/views/overview.blade.php b/dashboard/resources/views/overview.blade.php
index e5a4147..5f3aff9 100644
--- a/dashboard/resources/views/overview.blade.php
+++ b/dashboard/resources/views/overview.blade.php
@@ -11,7 +11,7 @@
 </nav>
 @endsection
 @section('main')
-<article class="header" style="grid-area: chart3;">
+<article class="header" style="grid-area: chart1;">
   <header>
     <h2>Verfügbarkeit aller Mietobjekte über gesamten beobachteten Zeitraum</h2>
     <button popovertarget="pop1">
@@ -32,7 +32,7 @@
   </header>
   <div id="chart-heatmap"></div>
 </article>
-<article class="header" style="grid-area: chart1;">
+<article class="header" style="grid-area: chart2;">
   <header>
     <h2>
       Anzahl jemals gefundene Kurzzeitmietobjekte pro Region
@@ -54,7 +54,7 @@
   </header>
   <div id="chart-props-per-region"></div>
 </article>
-<article class="header" style="grid-area: chart2;">
+<article class="header" style="grid-area: chart3;">
   <header>
     <h2>
       Entwicklung der Anzahl jemals gefunden Kurzzeitmietobjekte
diff --git a/dashboard/resources/views/property.blade.php b/dashboard/resources/views/property.blade.php
index 4ba1b42..fb94d30 100644
--- a/dashboard/resources/views/property.blade.php
+++ b/dashboard/resources/views/property.blade.php
@@ -27,7 +27,7 @@
 <article style="grid-area: timeline;">
     <div id="timeline"></div>
 </article>
-<article class="header" style="grid-area: chart1;">
+<article class="header" style="grid-area: chart2;">
     <header>
         <h2 id="belegung-title">
             Kalenderansicht der Verfügbarkeit am <span class="date">{{ $startDate }}</span>
@@ -57,7 +57,7 @@
     <div id="chart-capacity-monthly">
     </div>
 </article>
-<article class="header" style="grid-area: chart2;">
+<article class="header" style="grid-area: chart1;">
     <header>
         <h2>
             Entwicklung der Verfügbarkeit