From f17f720f585697be3d7b365a20a4cda1fb40466a Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Mon, 22 Aug 2022 12:25:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Change=20scrollbar=20behaviour?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      |  6 ++++--
 src/assets/base.css              | 15 +++++++++++++++
 src/components/date-selector.vue |  2 +-
 src/views/HistoryView.vue        |  2 +-
 src/views/SubstitutionView.vue   |  2 +-
 src/views/TimetableView.vue      |  2 +-
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d614a57..537d1d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,9 +25,9 @@ function swipeHandler(direction) {
 
 <template>
   <TitleBar />
+  <DateSelector v-show="isDataView" />
   <div class="center" v-touch:swipe="swipeHandler">
     <main>
-      <DateSelector v-show="isDataView" />
       <LoadingElement :active="loading" v-show="isDataView" />
       <RouterView />
     </main>
@@ -55,7 +55,9 @@ body {
 .center {
   display: flex;
   justify-content: center;
-  min-height: 100vh;
+  height: calc(100vh - 99px);
+  overflow-y: auto;
+  overflow: overlay;
 }
 
 main {
diff --git a/src/assets/base.css b/src/assets/base.css
index e9c447f..5c0e01e 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -43,3 +43,18 @@
   font-weight: 200;
   src: url(/fonts/SourceSansPro-ExtraLight.ttf) format("truetype");
 }
+
+body {
+  overflow: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: #00000000;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #616060;
+}
diff --git a/src/components/date-selector.vue b/src/components/date-selector.vue
index a57e4bf..8b399b5 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 0px 10px;
+  padding: 65px 10px 10px 10px;
   display: grid;
   grid-template-columns: 35px 1fr 35px;
   align-items: center;
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 24cfb91..679372e 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -76,7 +76,7 @@ function getColor(type) {
   display: grid;
   min-height: 35px;
   border-radius: 11px;
-  margin: 10px 0px;
+  margin-bottom: 10px;
   padding: 10px 10px;
   grid-template-columns: min-content auto;
   gap: 5px;
diff --git a/src/views/SubstitutionView.vue b/src/views/SubstitutionView.vue
index 8ad328b..57716eb 100644
--- a/src/views/SubstitutionView.vue
+++ b/src/views/SubstitutionView.vue
@@ -41,7 +41,7 @@ const substitutions = computed(() => {
   background-color: var(--substitution-background-unchanged);
   min-height: 50px;
   border-radius: 11px;
-  margin: 10px 0px;
+  margin-bottom: 10px;
   padding: 10px 15px;
   grid-template-columns: max-content auto;
   gap: 15px;
diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue
index e146405..859d4ab 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-top: 10px;
+  margin-bottom: 10px;
   width: max-content;
 }