Przywrócono wybór serwerów; poprawki wyglądu

src/App.scss

@@ -36,7 +36,7 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.3rem + 2vw);
+    font-size: calc(0.4rem + 1.4vw);
   }
 }
 
@@ -94,6 +94,10 @@
 }
 
 .header {
+  &_body {
+    max-width: 21em;
+  }
+  
   &_container {
     display: flex;
     justify-content: center;
@@ -106,18 +110,16 @@
 
   &_brand {
     img {
-      width: 22em;
+      width: 100%;
     }
   }
 
   &_info {
-    display: flex;
+    display: grid;
-    justify-content: space-between;
+    grid-template-columns: 1fr 1fr 1fr;
+    max-width: 100%;
 
-    font-size: 1.25em;
+    font-size: 1.2em;
-
-    margin: 0 0.3em;
-    padding: 0.2em;
   }
 
   &_links {
@@ -191,6 +193,7 @@
 // COUNTER
 .info_counter {
   display: flex;
+  justify-content: center;
   align-items: center;
 
   span {
@@ -200,10 +203,29 @@
   img {
     width: 1.35em;
   }
+}
 
-  .region {
+// REGION SELECTION
-    color: paleturquoise;
+.info_region {
+  color: white;
+  font-weight: bold;
+
+  display: flex;
+  justify-content: flex-end;
+
+  .select-box_content button {
+    background-color: transparent;
     font-weight: bold;
+    padding: 0.1em 0.5em;
+    color: paleturquoise;
+  }
+
+  .options {
+    font-size: 0.9em;
+  }
+
+  .arrow {
+    padding: 0;
   }
 }
 

src/App.vue

@@ -32,17 +32,20 @@
 
             <span class="header_info">
               <Clock />
+
               <div class="info_counter">
-                <span class="region" @click="changeRegion">
-                  {{ store.region.value }}
-                </span>
                 <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
                 <span class="text--primary">{{ onlineDispatchers.length }}</span>
-                <span class="text--grayed">|</span>
+                <span class="text--grayed"> / </span>
                 <span class="text--primary">{{ store.trainList.length }}</span>
                 <img src="@/assets/icon-train.svg" alt="icon train" />
               </div>
+
+              <span class="info_region">
+                <SelectBox :itemList="options.regions" :defaultItemIndex="0" @selected="changeRegion" />
+              </span>
             </span>
+
             <span class="header_links">
               <router-link class="route" active-class="route-active" to="/" exact
                 >{{ $t('app.sceneries') }}
@@ -74,25 +77,31 @@
         &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>
   </div>
 </template>
 
 <script lang="ts">
-import Clock from '@/components/App/Clock.vue';
+import { computed, defineComponent, provide, ref } from 'vue';
 
+import Clock from '@/components/App/Clock.vue';
 import StorageManager from '@/scripts/managers/storageManager';
-import { computed, ComputedRef, defineComponent, provide, ref } from 'vue';
 
 import packageInfo from '.././package.json';
-import StatusIndicator from './components/App/StatusIndicator.vue';
+import options from '@/data/options.json';
+
+import StatusIndicator from '@/components/App/StatusIndicator.vue';
+import SelectBox from '@/components/Global/SelectBox.vue';
 import { useStore } from './store/store';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
+    SelectBox,
   },
 
   setup() {
@@ -120,6 +129,7 @@ export default defineComponent({
     VERSION: packageInfo.version,
     updateModalVisible: false,
     hasReleaseNotes: false,
+    options,
 
     currentLang: 'pl',
 
@@ -156,8 +166,8 @@ export default defineComponent({
       StorageManager.setBooleanValue('version_notes_read', true);
     },
 
-    changeRegion() {
+    changeRegion(region: { id: string; value: string }) {
-      this.store.changeRegion({ id: 'cae', value: 'PL2' });
+      this.store.changeRegion(region);
     },
 
     changeLang(lang: string) {

src/components/App/Clock.vue

@@ -31,7 +31,6 @@ export default defineComponent({
 
 .clock {
   display: flex;
-  justify-content: center;
   align-items: center;
 }
 </style>

src/components/App/StatusIndicator.vue

@@ -288,7 +288,7 @@ export default defineComponent({
   position: absolute;
   left: 50%;
   bottom: 0;
-  transform: translateX(11.6em);
+  transform: translateX(12em);
   z-index: 100;
 }
 

src/components/Global/SelectBox.vue

@@ -5,15 +5,13 @@
         <span class="text--primary">{{ prefix }}</span> {{ computedSelectedItem.value }}
       </button>
 
-      <ul class="options" :ref="(el) => (listRef = el)">
+      <ul class="options" :ref="(el) => (listRef = el as Element)">
         <li class="option" v-for="(item, i) in itemList" :key="item.id">
           <transition
             name="unfold"
-            :style="
+            :style="`
-              `
             --delay-in: ${i * 55}ms; 
-            --delay-out: ${(itemList.length - 1 - i) * 55}ms`
+            --delay-out: ${(itemList.length - 1 - i) * 55}ms`"
-            "
           >
             <label :for="item.id" v-if="listOpen">
               <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
@@ -36,7 +34,7 @@
 import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
 
 interface Item {
-  id: string | number;
+  id: string;
   value: string;
 }
 
@@ -141,7 +139,8 @@ export default defineComponent({
 .arrow {
   position: absolute;
   top: 50%;
-  right: 0.5em;
+  right: 0;
+  padding: 0.5em;
 
   img {
     vertical-align: middle;
@@ -160,7 +159,7 @@ button.selected {
   font-size: 1em;
 
   padding: 0.35em 0.5em;
-  padding-right: 2em;
+  margin-right: 1.4em;
 
   width: 100%;
   cursor: pointer;
@@ -181,8 +180,6 @@ button.selected {
 
   height: 100%;
 
-  min-width: 12em;
-
   text-align: center;
 }
 

src/components/StationsView/StationFilterCard.vue

@@ -9,29 +9,9 @@
 
     <transition name="card-anim">
       <div class="card" v-if="isVisible">
-        <!-- <div class="card_exit" @click="closeCard"></div> -->
-
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
-          <!-- <section class="card_regions">
+
-            <div class="regions_content">
-              <span v-for="region in inputs.regions" :key="region.id" :class="`region-${region.id}`">
-                <label>
-                  <input
-                    type="radio"
-                    name="region"
-                    :id="region.id"
-                    :value="region"
-                    v-model="currentRegion"
-                    @change="handleChangeRegion"
-                  />
-                  <span :class="{ checked: currentRegion.id === region.id }">
-                    {{ region.value }}
-                  </span>
-                </label>
-              </span>
-            </div>
-          </section> -->
           <section class="card_options">
             <filter-option
               v-for="(option, i) in inputs.options"
@@ -282,9 +262,6 @@ export default defineComponent({
   }
 }
 
-.filter-card {
-  font-size: 1em;
-}
 .card {
   &_btn {
     button {
@@ -292,15 +269,15 @@ export default defineComponent({
       align-items: center;
 
       padding: 0.5em 1em;
-      border-radius: 1em 1em 0 0;
+      border-radius: 0.75em 0.75em 0 0;
 
-      /* border-radius: 0 0.9em 0.9em 0; */
+      font-size: 0.9em;
-      /* outline: 2px solid white; */
+      font-weight: bold;
     }
 
     img {
-      width: 1.5em;
+      width: 1.3em;
-      margin-right: 0.5em;
+      margin-right: 0.25em;
     }
   }
 

src/styles/global.scss

@@ -14,7 +14,6 @@
   --clr-warning: #c59429;
 }
 
-
 html {
   scroll-behavior: smooth;
   width: 100vw;
@@ -24,7 +23,7 @@ body {
   width: 100%;
   margin: 0;
   // font-family: "Open Sans", sans-serif;
-  font-family: "Quicksand", sans-serif;
+  font-family: 'Quicksand', sans-serif;
 
   overflow-x: hidden;
 }
@@ -52,7 +51,6 @@ body {
   }
 }
 
-
 .g-tooltip {
   position: relative;
 
@@ -75,14 +73,14 @@ body {
 
     background-color: gray;
     text-align: center;
-    
+
-    border-radius: .5em;
+    border-radius: 0.5em;
 
     transition: opacity 0.3s;
     padding: 0.25em;
 
     &::after {
-      content: "";
+      content: '';
       position: absolute;
       top: 100%;
       left: 50%;
@@ -112,15 +110,13 @@ body {
   }
 }
 
-
 button,
 input,
 select {
   // font-family: "Open Sans", sans-serif;
   border: none;
-  font-family: "Quicksand", sans-serif;
+  font-family: 'Quicksand', sans-serif;
   font-size: 1em;
-
 }
 
 input {
@@ -152,13 +148,12 @@ input {
   color: $accentCol;
   font-weight: 600;
 
-  padding: .35em 0;
+  padding: 0.35em 0;
-
 }
 
 a {
   display: inline-block;
-  
+
   color: white;
   text-decoration: none;
 
@@ -211,7 +206,8 @@ ul {
     color: white;
     transition: color 0.3s;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: $accentCol;
     }
 
@@ -249,23 +245,22 @@ ul {
 }
 
 .return-btn {
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
 
   position: fixed;
-  right: 2rem;
+  right: 2.5rem;
-  bottom: 2rem;
+  bottom: 4rem;
 
   z-index: 100;
-  
 
-  width: 1.5em;
+  width: 3.5rem;
-  height: 1.5em;
 
-  font-size: 2.3em;
+  font-size: 3rem;
 
-  background-color: #333;
+  background-color: #555;
+  outline: 3px solid #222;
   color: white;
 
   border-radius: 50%;
@@ -278,4 +273,15 @@ ul {
   img {
     width: 1.3em;
   }
-}
+
+  @include smallScreen() {
+    bottom: 1em;
+    right: 0;
+    left: 50%;
+
+    width: 1em;
+    height: 1em;
+
+    transform: translateX(-50%);
+  }
+}