From e1a429162a88362a6583e6b7bb33df3976002bc8 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Mon, 22 Aug 2022 22:29:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20height=20of=20"center"=20e?=
 =?UTF-8?q?lement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         | 25 ++++++++++++++++---------
 src/components/date-selector.vue    |  2 +-
 src/components/titlebar-element.vue |  1 -
 src/views/SettingsView.vue          |  2 +-
 src/views/TimetableView.vue         |  2 +-
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 537d1d7..95ee76a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,15 +24,17 @@ function swipeHandler(direction) {
 </script>
 
 <template>
-  <TitleBar />
-  <DateSelector v-show="isDataView" />
-  <div class="center" v-touch:swipe="swipeHandler">
-    <main>
-      <LoadingElement :active="loading" v-show="isDataView" />
-      <RouterView />
-    </main>
+  <div class="app">
+    <TitleBar />
+    <DateSelector v-show="isDataView" />
+    <div class="center" v-touch:swipe="swipeHandler">
+      <main>
+        <LoadingElement :active="loading" v-show="isDataView" />
+        <RouterView />
+      </main>
+    </div>
+    <BottomNavbar v-show="$route.name != 'title.login'" />
   </div>
-  <BottomNavbar v-show="$route.name != 'title.login'" />
 </template>
 
 <style>
@@ -52,10 +54,15 @@ body {
   font-family: var(--font-family);
 }
 
+.app {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  height: 100vh;
+}
+
 .center {
   display: flex;
   justify-content: center;
-  height: calc(100vh - 99px);
   overflow-y: auto;
   overflow: overlay;
 }
diff --git a/src/components/date-selector.vue b/src/components/date-selector.vue
index 8b399b5..a55a53a 100644
--- a/src/components/date-selector.vue
+++ b/src/components/date-selector.vue
@@ -28,7 +28,7 @@ const dayNames = [
 
 <style scoped>
 .selector {
-  padding: 65px 10px 10px 10px;
+  padding: 15px 10px 10px 10px;
   display: grid;
   grid-template-columns: 35px 1fr 35px;
   align-items: center;
diff --git a/src/components/titlebar-element.vue b/src/components/titlebar-element.vue
index 4613105..98d6998 100644
--- a/src/components/titlebar-element.vue
+++ b/src/components/titlebar-element.vue
@@ -31,7 +31,6 @@ function goBack() {
 
 <style scoped>
 .titlebar {
-  position: fixed;
   width: 100%;
   height: 55px;
   background-color: var(--titlebar-color);
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 6068a3f..a62455e 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -64,7 +64,7 @@ const gitHash = GITVERSION;
 
 <style scoped>
 .settings {
-  padding: 65px 10px 80px 10px;
+  padding: 15px 10px 80px 10px;
 }
 
 h2 {
diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue
index 859d4ab..c906ef9 100644
--- a/src/views/TimetableView.vue
+++ b/src/views/TimetableView.vue
@@ -118,7 +118,7 @@ function isCancelled(substitution) {
   background-color: var(--timetable-trust-warning-background);
   border-radius: 4px;
   padding: 3px 10px;
-  margin-bottom: 10px;
+  margin: 5px 0px;
   width: max-content;
 }