Poprawki responsywności; dodano wyszukiwanie scenerii

src/components/Global/SelectBox.vue

@@ -206,6 +206,7 @@ li.option {
     appearance: none;
     border: none;
     outline: none;
+    background: none;
 
     &:focus + span {
       color: $accentCol;

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;

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>
-

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;

src/components/TrainsView/TrainInfo.vue

@@ -248,7 +248,6 @@ export default defineComponent({
     gap: 1em 0;
     text-align: center;
 
-    font-size: 1.15em;
   }
 
   .train-stats {

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 {