Poprawki responsywności; dodano wyszukiwanie scenerii

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);
   }
 }
 

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>

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" >
+  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
-    <div class="card_btn">
+    <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 {

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!",

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!",

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();
     },
   },

src/styles/JournalSection.scss

@@ -69,7 +69,7 @@
 
 @include smallScreen() {
   .list_wrapper {
-    font-size: 1.25em;
+    font-size: 1.1em;
   }
 
   .journal_top-bar {

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;
 

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;