From aaec23d210533be2144bd4be7c26aab7a3512f54 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 13 Jul 2022 16:34:38 +0200
Subject: [PATCH] =?UTF-8?q?Poprawiono=20wygl=C4=85d=20modalu=20RJ?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.scss                                |   7 +-
 src/App.vue                                 | 141 ++++++++++----------
 src/components/Global/TrainModal.vue        | 123 ++++++++++-------
 src/components/TrainsView/TrainSchedule.vue |   1 -
 4 files changed, 145 insertions(+), 127 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 89e94db..324d57f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -27,7 +27,7 @@
 }
 
 // APP
-.app {
+#app {
   color: white;
   font-size: 1rem;
 
@@ -40,8 +40,8 @@
 .app_container {
   display: flex;
   flex-flow: column;
-  height: 100vh;
-  min-height: 800px;
+
+  min-height: 100vh;
 
   header {
     flex: 0 0 auto;
@@ -213,7 +213,6 @@
     font-weight: bold;
     padding: 0.1em 0.5em;
     color: paleturquoise;
-
   }
 
   .options {
diff --git a/src/App.vue b/src/App.vue
index 3b8ee71..119bae9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,83 +1,81 @@
 <template>
-  <div class="app">
-    <div class="app_container">
-      <!-- <div class="wip-alert">
+  <div class="app_container">
+    <!-- <div class="wip-alert">
         <img class="icon-error" :src="iconError" alt="error" />
         <h2>Stacjownik tymczasowo nieaktywny!</h2>
         <p>Absolutny zakaz wjazdu!</p>
       </div> -->
-      <header class="app_header">
-        <div class="header_container">
-          <div class="header_icons">
-            <span class="icons-top">
-              <img :src="icons.pl" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
-              <img :src="icons.en" alt="icon-en" @click="changeLang('pl')" v-else />
-            </span>
-            <span class="icons-bottom">
-              <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-                <img :src="icons.dollar" alt="icon paypal" />
-              </a>
+    <header class="app_header">
+      <div class="header_container">
+        <div class="header_icons">
+          <span class="icons-top">
+            <img :src="icons.pl" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
+            <img :src="icons.en" alt="icon-en" @click="changeLang('pl')" v-else />
+          </span>
+          <span class="icons-bottom">
+            <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
+              <img :src="icons.dollar" alt="icon paypal" />
+            </a>
 
-              <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-                <img :src="icons.discord" alt="icon discord" />
-              </a>
-            </span>
-          </div>
-
-          <div class="header_body">
-            <status-indicator />
-            <span class="header_brand">
-              <img :src="brand_logo" alt="Stacjownik" />
-            </span>
-
-            <span class="header_info">
-              <Clock />
-
-              <div class="info_counter">
-                <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
-                <span class="text--primary">{{ onlineDispatchers.length }}</span>
-                <span class="text--grayed"> / </span>
-                <span class="text--primary">{{ trainList.length }}</span>
-                <img src="@/assets/icon-train.svg" alt="icon train" />
-              </div>
-
-              <span class="info_region">
-                <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
-              </span>
-            </span>
-
-            <span class="header_links">
-              <router-link class="route" active-class="route-active" to="/" exact>
-                {{ $t('app.sceneries') }}
-              </router-link>
-              /
-              <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
-              /
-              <router-link class="route" active-class="route-active" to="/journal">
-                {{ $t('app.journal') }}
-              </router-link>
-            </span>
-          </div>
+            <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+              <img :src="icons.discord" alt="icon discord" />
+            </a>
+          </span>
         </div>
-      </header>
 
-      <main class="app_main">
-        <router-view v-slot="{ Component }">
-          <!-- <transition name="view-anim" mode="out-in"> -->
-          <keep-alive>
-            <component :is="Component" :key="$route.path" />
-          </keep-alive>
-        </router-view>
-      </main>
+        <div class="header_body">
+          <status-indicator />
+          <span class="header_brand">
+            <img :src="brand_logo" alt="Stacjownik" />
+          </span>
 
-      <footer class="app_footer">
-        &copy;
-        <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-        {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
+          <span class="header_info">
+            <Clock />
 
-        <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
-      </footer>
-    </div>
+            <div class="info_counter">
+              <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
+              <span class="text--primary">{{ onlineDispatchers.length }}</span>
+              <span class="text--grayed"> / </span>
+              <span class="text--primary">{{ trainList.length }}</span>
+              <img src="@/assets/icon-train.svg" alt="icon train" />
+            </div>
+
+            <span class="info_region">
+              <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
+            </span>
+          </span>
+
+          <span class="header_links">
+            <router-link class="route" active-class="route-active" to="/" exact>
+              {{ $t('app.sceneries') }}
+            </router-link>
+            /
+            <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
+            /
+            <router-link class="route" active-class="route-active" to="/journal">
+              {{ $t('app.journal') }}
+            </router-link>
+          </span>
+        </div>
+      </div>
+    </header>
+
+    <main class="app_main">
+      <router-view v-slot="{ Component }">
+        <!-- <transition name="view-anim" mode="out-in"> -->
+        <keep-alive>
+          <component :is="Component" :key="$route.path" />
+        </keep-alive>
+      </router-view>
+    </main>
+
+    <footer class="app_footer">
+      &copy;
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
+
+      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
+    </footer>
   </div>
 </template>
 
@@ -129,7 +127,8 @@ export default defineComponent({
       return this.options.regions.map((region) => {
         const regionStationCount =
           this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
-        const regionTrainCount = this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
+        const regionTrainCount =
+          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
 
         return {
           id: region.id,
diff --git a/src/components/Global/TrainModal.vue b/src/components/Global/TrainModal.vue
index b22230c..056870c 100644
--- a/src/components/Global/TrainModal.vue
+++ b/src/components/Global/TrainModal.vue
@@ -1,28 +1,28 @@
 <template>
-  <div class="card-dimmer"></div>
-  <div class="train-modal" v-click-outside="closeModal" @keydown.esc="closeModal">
-    <transition name="top-info-bar-anim">
-      <div class="top-info-bar" v-if="isTopBarVisible">
-        <span v-if="chosenTrain.timetableData">
-          <b class="text--primary">{{ chosenTrain.timetableData.category }} {{ chosenTrain.trainNo }}</b>
-          {{ chosenTrain.driverName }} &bull;
-          <b>{{ chosenTrain.timetableData.route.replace('|', ' > ') }}</b>
-          &bull;
-          {{ currentDistance(chosenTrain.timetableData.followingStops) }} km /
-          <span class="text--primary">{{ chosenTrain.timetableData.routeDistance }} km</span>
-          &bull;
-          <span class="text--grayed">{{ displayTrainPosition(chosenTrain) }}</span>
-          &bull;
-          {{ chosenTrain.speed }}km/h
-        </span>
-      </div>
-    </transition>
+  <div class="train-modal" @keydown.esc="closeModal">
+    <div class="modal_background" @click="closeModal"></div>
+    <div class="modal_content" ref="content" tabindex="0">
+      <!-- <transition name="top-info-bar-anim">
+        <div class="top-info-bar" v-if="isTopBarVisible">
+          <span v-if="chosenTrain.timetableData">
+            <b class="text--primary">{{ chosenTrain.timetableData.category }} {{ chosenTrain.trainNo }}</b>
+            {{ chosenTrain.driverName }} &bull;
+            <b>{{ chosenTrain.timetableData.route.replace('|', ' > ') }}</b>
+            &bull;
+            {{ currentDistance(chosenTrain.timetableData.followingStops) }} km /
+            <span class="text--primary">{{ chosenTrain.timetableData.routeDistance }} km</span>
+            &bull;
+            <span class="text--grayed">{{ displayTrainPosition(chosenTrain) }}</span>
+            &bull;
+            {{ chosenTrain.speed }}km/h
+          </span>
+        </div>
+      </transition> -->
 
-    <button class="btn exit" @click="closeModal">
-      <img :src="icons.exit" alt="close card" />
-    </button>
+      <button class="btn exit" @click="closeModal">
+        <img :src="icons.exit" alt="close card" />
+      </button>
 
-    <div class="content" tabindex="0" ref="content">
       <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
       <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
@@ -66,13 +66,17 @@ export default defineComponent({
       contentEl.focus();
     });
 
+    document.body.style.overflowY = 'hidden';
+    // document.body.blur();
 
-    contentEl.addEventListener('scroll', this.handleContentScroll);
+    // contentEl.addEventListener('scroll', this.handleContentScroll);
   },
 
   deactivated() {
-    (this.$refs['content'] as HTMLElement).removeEventListener('scroll', this.handleContentScroll);
-    this.isTopBarVisible = false;
+    document.body.style.overflowY = 'scroll';
+
+    // (this.$refs['content'] as HTMLElement).removeEventListener('scroll', this.handleContentScroll);
+    // this.isTopBarVisible = false;
   },
 
   methods: {
@@ -112,12 +116,9 @@ export default defineComponent({
   top: 0;
   right: 0;
 
-  margin: 1em 2em;
+  margin: 0.5em 1em;
 
-  background-color: #000000;
-  outline: 2px solid white;
   padding: 0.25em;
-  border-radius: 50%;
 
   z-index: 101;
 
@@ -129,22 +130,44 @@ export default defineComponent({
 
 .train-modal {
   position: fixed;
-  top: 1em;
-  left: 50%;
+  top: 0;
+  left: 0;
 
-  text-align: left;
-
-  transform: translateX(-50%);
-  background-color: #202020;
+  width: 100%;
+  height: 100%;
 
+  color: white;
   z-index: 100;
 
-  width: 95vw;
+  display: flex;
+  justify-content: center;
 
-  border: 1px solid gray;
-  overflow: hidden;
+  text-align: left;
 }
 
+.modal_background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.modal_content {
+  position: relative;
+  overflow-y: scroll;
+
+  margin-top: 1em;
+
+  width: 95vw;
+  height: 95vh;
+
+  background-color: #1a1a1a;
+}
 .top-info-bar {
   position: absolute;
   top: 0;
@@ -163,29 +186,27 @@ export default defineComponent({
   background-color: #000000dd;
 }
 
-.content {
-  overflow: auto;
-  max-height: 95vh;
-}
-
 @include midScreen {
   .exit {
-    top: auto;
-    bottom: 0;
-
-    margin: 1em;
+    margin: 0.5em;
 
     img {
       width: 1.75rem;
     }
   }
 
-  .content {
-    padding-bottom: 3em;
-  }
-
   .top-info-bar {
     padding: 0.5em 1em;
   }
 }
+
+@include smallScreen {
+  .train-modal {
+    font-size: 1.05em;
+  }
+
+  .modal_content {
+    max-height: 75vh;
+  }
+}
 </style>
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 139163a..96db4c4 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -179,7 +179,6 @@ $stopNameClr: #22a8d1;
 }
 
 .train-schedule {
-  background-color: #202020;
   padding: 0 0.25em;
 
   @include smallScreen() {