From 29a02dd98fadded0b7ef6c8f938a3e7a77e161b8 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 27 Sep 2022 18:58:46 +0200
Subject: [PATCH] =?UTF-8?q?Poprawki=20responsywno=C5=9Bci;=20dodano=20wysz?=
 =?UTF-8?q?ukiwanie=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.scss                                  |  2 +-
 src/assets/icon-search.svg                    |  1 +
 src/components/Global/SelectBox.vue           |  1 +
 src/components/Global/TrainModal.vue          |  3 --
 src/components/SceneryView/SceneryHeader.vue  |  6 +--
 .../StationsView/StationFilterCard.vue        | 46 +++++++++++++++++--
 src/components/TrainsView/TrainInfo.vue       |  1 -
 src/components/TrainsView/TrainSchedule.vue   | 13 ++++--
 src/locales/en.json                           |  3 +-
 src/locales/pl.json                           |  3 +-
 src/mixins/keyMixin.ts                        |  1 +
 src/styles/JournalSection.scss                |  2 +-
 src/styles/filters_options.scss               |  7 ---
 src/styles/global.scss                        |  3 +-
 14 files changed, 63 insertions(+), 29 deletions(-)
 create mode 100644 src/assets/icon-search.svg

diff --git a/src/App.scss b/src/App.scss
index 8fac615..3670158 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -45,7 +45,7 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.4rem + 1.4vw);
+    font-size: calc(0.5rem + 1.3vw);
   }
 }
 
diff --git a/src/assets/icon-search.svg b/src/assets/icon-search.svg
new file mode 100644
index 0000000..2b4ae24
--- /dev/null
+++ b/src/assets/icon-search.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14  s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0  C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_"  fill="white" /></svg>
diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue
index e794028..e88bb60 100644
--- a/src/components/Global/SelectBox.vue
+++ b/src/components/Global/SelectBox.vue
@@ -206,6 +206,7 @@ li.option {
     appearance: none;
     border: none;
     outline: none;
+    background: none;
 
     &:focus + span {
       color: $accentCol;
diff --git a/src/components/Global/TrainModal.vue b/src/components/Global/TrainModal.vue
index 366afcd..1c25bc2 100644
--- a/src/components/Global/TrainModal.vue
+++ b/src/components/Global/TrainModal.vue
@@ -144,9 +144,6 @@ export default defineComponent({
 }
 
 @include smallScreen {
-  .train-modal {
-    font-size: 1.05em;
-  }
 
   .modal_content {
     max-height: 85vh;
diff --git a/src/components/SceneryView/SceneryHeader.vue b/src/components/SceneryView/SceneryHeader.vue
index abf7b37..371ce04 100644
--- a/src/components/SceneryView/SceneryHeader.vue
+++ b/src/components/SceneryView/SceneryHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="info-header">
-    <div class="scenery-name">
+    <a class="scenery-name" :href="station.generalInfo?.url">
       {{ station.name }}
-    </div>
+    </a>
 
     <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
   </section>
@@ -12,7 +12,6 @@
 import { defineComponent } from 'vue';
 import Station from '../../scripts/interfaces/Station';
 
-
 export default defineComponent({
   props: {
     station: {
@@ -47,4 +46,3 @@ export default defineComponent({
   font-size: 1.2em;
 }
 </style>
-
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 1b4ae81..ac59cf7 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -1,14 +1,29 @@
 <template>
-  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard" >
-    <div class="card_btn">
+  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
+    <div class="card_controls">
       <button class="btn--image" @click="toggleCard">
         <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
         {{ $t('options.filters') }} [F]
       </button>
+
+      <label for="scenery-search">
+        <input
+          id="scenery-search"
+          list="sceneries"
+          :placeholder="$t('sceneries.scenery-search')"
+          @focus="preventKeyDown = true"
+          @blur="preventKeyDown = false"
+          v-model="chosenSearchScenery"
+        />
+
+        <datalist id="sceneries">
+          <option v-for="scenery in store.stationList" :value="scenery.name"></option>
+        </datalist>
+      </label>
     </div>
 
     <transition name="card-anim">
-      <div class="card" v-if="isVisible" >
+      <div class="card" v-if="isVisible">
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
 
@@ -97,6 +112,7 @@ import { defineComponent, inject } from 'vue';
 import inputData from '../../data/options.json';
 import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
+import routerMixin from '../../mixins/routerMixin';
 import StorageManager from '../../scripts/managers/storageManager';
 import { useStore } from '../../store/store';
 
@@ -106,7 +122,7 @@ import FilterOption from './FilterOption.vue';
 export default defineComponent({
   components: { ActionButton, FilterOption },
   emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
-  mixins: [imageMixin, keyMixin],
+  mixins: [imageMixin, keyMixin, routerMixin],
 
   data: () => ({
     inputs: { ...inputData },
@@ -119,6 +135,7 @@ export default defineComponent({
     currentRegion: { id: '', value: '' },
 
     delayInputTimer: -1,
+    chosenSearchScenery: '',
   }),
 
   setup() {
@@ -143,6 +160,17 @@ export default defineComponent({
     this.currentRegion = this.store.region;
   },
 
+  watch: {
+    chosenSearchScenery(value: string) {
+      const chosenStation = this.store.stationList.find(({ name }) => name == value);
+
+      if (chosenStation) {
+        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
+        this.chosenSearchScenery = '';
+      }
+    },
+  },
+
   methods: {
     // Override keyMixin function
     onKeyDownFunction() {
@@ -270,6 +298,16 @@ export default defineComponent({
 }
 
 .card {
+  &_controls {
+    display: flex;
+    gap: 0.5em;
+
+    input {
+      border-radius: 0.5em 0.5em 0 0;
+      height: 100%;
+    }
+  }
+
   &_content {
     display: grid;
     grid-template-rows: 70px 1fr 100px 50px auto;
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 4c8ae49..9d1c9f1 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -248,7 +248,6 @@ export default defineComponent({
     gap: 1em 0;
     text-align: center;
 
-    font-size: 1.15em;
   }
 
   .train-stats {
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 19d882e..e8fe839 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -60,7 +60,9 @@
               <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
             </div>
 
-            <span v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)">
+            <span
+              v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)"
+            >
               {{ stop.departureLine }}
             </span>
 
@@ -175,10 +177,6 @@ $stopNameClr: #22a8d1;
 
 .train-schedule {
   padding: 0 0.25em;
-
-  @include smallScreen() {
-    font-size: 1.1em;
-  }
 }
 
 .train-stock {
@@ -198,6 +196,11 @@ ul.stock-list {
     color: #aaa;
     font-size: 0.9em;
   }
+
+  img {
+    max-height: 60px;
+    max-width: 320px;
+  }
 }
 
 .schedule-wrapper {
diff --git a/src/locales/en.json b/src/locales/en.json
index 0247785..5b0cf03 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -176,7 +176,8 @@
     "users": "Drivers online",
     "spawns": "Spawns online",
     "timetables": "Active timetables",
-    "no-stations": "No stations to show here!"
+    "no-stations": "No stations to show here!",
+    "scenery-search": "Search for scenery..."
   },
   "trains": {
     "no-trains": "No trains to show here!",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 966eaa0..3429b4e 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -179,7 +179,8 @@
     "users": "Maszyniści online",
     "spawns": "Otwarte spawny",
     "timetables": "Aktywne rozkłady jazdy",
-    "no-stations": "Brak stacji do wyświetlenia!"
+    "no-stations": "Brak stacji do wyświetlenia!",
+    "scenery-search": "Wyszukaj scenerię"
   },
   "trains": {
     "no-trains": "Brak pociągów do wyświetlenia!",
diff --git a/src/mixins/keyMixin.ts b/src/mixins/keyMixin.ts
index 773c6a3..ce5922e 100644
--- a/src/mixins/keyMixin.ts
+++ b/src/mixins/keyMixin.ts
@@ -19,6 +19,7 @@ export default defineComponent({
     onKeyDownFunction() {},
 
     handleKeyDown(e: KeyboardEvent) {
+      if (!e.key) return;
       if (e.key.toLowerCase() == 'f' && !this.preventKeyDown && !e.ctrlKey && !e.altKey) this.onKeyDownFunction();
     },
   },
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 363b02b..8f4de7c 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -69,7 +69,7 @@
 
 @include smallScreen() {
   .list_wrapper {
-    font-size: 1.25em;
+    font-size: 1.1em;
   }
 
   .journal_top-bar {
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index 4bd31e5..ec48910 100644
--- a/src/styles/filters_options.scss
+++ b/src/styles/filters_options.scss
@@ -116,9 +116,6 @@ h1.option-title {
   }
 
   .search-box {
-    .search_input {
-    }
-
     .search-exit {
       position: absolute;
       transform: translateY(-50%);
@@ -129,10 +126,6 @@ h1.option-title {
 }
 
 @include smallScreen() {
-  .filters-options {
-    font-size: 1.2em;
-  }
-
   h1 {
     text-align: center;
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index db524c4..13aa41c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -114,7 +114,8 @@ input {
   color: white;
   font-size: 1em;
 
-  padding: 0.15em;
+  background-color: #333;
+  padding: 0.15em 0.5em;
 
   outline: none;