chore(numgen): changed select responsiveness

src/components/tabs/NumberGeneratorTab.vue

@@ -6,26 +6,26 @@
     </div>
 
     <div class="tab_content">
-      <div class="category-select">
+      <div class="inputs">
-        <label for="category"> {{ $t('numgen.train-category') }}</label>
+        <label>
-        <select id="category" v-model="chosenCategory" @change="randomizeTrainNumber()">
+          <span>{{ $t('numgen.train-category') }}</span>
-          <option :value="null" disabled>
+          <select v-model="chosenCategory" @change="randomizeTrainNumber()">
-            {{ $t('numgen.train-category') }}
+            <option :value="null" disabled>
-          </option>
+              {{ $t('numgen.train-category') }}
-          <option
+            </option>
-            v-for="(_, category) in genData.categoriesRules"
+            <option
-            :key="category"
+              v-for="(_, category) in genData.categoriesRules"
-            :value="category"
+              :key="category"
-          >
+              :value="category"
-            {{ $t(`numgen.categories.${category}`) }}
+            >
-          </option>
+              {{ $t(`numgen.categories.${category}`) }}
-        </select>
+            </option>
-      </div>
+          </select>
+        </label>
 
-      <div class="regions-select">
+        <label>
-        <div>
+          <span>{{ $t('numgen.start-region') }}</span>
-          <label for="begin-region"> {{ $t('numgen.start-region') }}</label>
+          <select v-model="beginRegionName" @change="randomizeTrainNumber()">
-          <select id="begin-region" v-model="beginRegionName" @change="randomizeTrainNumber()">
             <option :value="null" disabled>
               {{ $t('numgen.start-region') }}
             </option>
@@ -33,11 +33,11 @@
               {{ name }}
             </option>
           </select>
-        </div>
+        </label>
 
-        <div>
+        <label>
-          <label for="end-region"> {{ $t('numgen.end-region') }}</label>
+          <span> {{ $t('numgen.end-region') }}</span>
-          <select id="end-region" v-model="endRegionName" @change="randomizeTrainNumber()">
+          <select v-model="endRegionName" @change="randomizeTrainNumber()">
             <option :value="null" disabled>
               {{ $t('numgen.end-region') }}
             </option>
@@ -45,7 +45,7 @@
               {{ name }}
             </option>
           </select>
-        </div>
+        </label>
       </div>
 
       <div class="generated-number" @click="copyNumber">
@@ -227,12 +227,6 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 @import '../../styles/tab.scss';
 @import '../../styles/global.scss';
 
-label {
-  display: block;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-}
-
 .category-select {
   select {
     width: auto;
@@ -242,23 +236,22 @@ label {
   margin-bottom: 1em;
 }
 
-.regions-select {
+.inputs {
-  display: flex;
+  display: grid;
-  align-items: center;
+  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
-  justify-content: center;
+
+  flex-wrap: wrap;
   gap: 0.5em;
+}
 
-  div {
+.inputs > label {
-    width: 100%;
+  display: flex;
-  }
+  flex-direction: column;
+  gap: 0.25em;
 
-  select {
+  span {
-    width: 100%;
+    color: #ccc;
-  }
+    font-weight: bold;
-
-  label {
-    display: block;
-    margin-bottom: 0.5em;
   }
 }
 

src/locales/en.json

@@ -148,7 +148,7 @@
       "TD": "TD - domestic freight (intermodal)",
       "TM": "TM - domestic freight (cargo)",
       "TN": "TN - domestic freight (no cargo)",
-      "TK": "TK - freight (stations & sidings service)",
+      "TK": "TK - freight (stations & sidings)",
       "TS": "TS - empty freight test drive",
 
       "LT": "LT - locomotive only",

src/locales/pl.json

@@ -98,8 +98,8 @@
     "title": "GENERATOR NUMERU POCIĄGU",
     "subtitle": "Generuje realny numer pociągu na podstawie instrukcji Ir-11",
     "alert": "Numer został skopiowany do twojego schowka!",
-    "start-region": "Początkowy obszar konstrukcyjny",
+    "start-region": "Obszar początkowy",
-    "end-region": "Końcowy obszar konstrukcyjny",
+    "end-region": "Obszar końcowy",
     "train-category": "Kategoria pociągu",
     "number-info": "Wygenerowany numer pociągu:",
     "warning": "Wybierz kategorię oraz (opcjonalnie) obszary konstrukcyjne",
@@ -129,17 +129,17 @@
       "EC": "EC - ekspres międzynarodowy",
       "EN": "EN - ekspres krajowy nocny",
 
-      "MP": "MP - międzywojewódzki pośpieszny",
+      "MP": "MP - międzywoj. pośpieszny",
       "RP": "RP - wojewódzki pośpieszny",
-      "MO": "MO - międzywojewódzki osobowy",
+      "MO": "MO - międzywoj. osobowy",
       "RO": "RO - wojewódzki osobowy",
 
-      "MM": "MM - międzynarodowy pośpieszny",
+      "MM": "MM - międzynar. pośpieszny",
-      "MH": "MH - międzywoj. pośpieszny nocny / hotelowy",
+      "MH": "MH - międzywoj. pośpieszny hotelowy",
-      "RM": "RM - wojewódzki osobowy międzynarodowy",
+      "RM": "RM - woj. osobowy międzynarodowy",
-      "RA": "RA - wojewódzki osobowy algomeracyjny",
+      "RA": "RA - woj. osobowy algomeracyjny",
 
-      "PW": "PW - pasażerski próżny (\"służbowy\")",
+      "PW": "PW - pasażerski próżny - służbowy",
       "PX": "PX - pasażerski próżny próbny",
 
       "TC": "TC - towarowy międzynarodowy intermodalny",
@@ -148,7 +148,7 @@
       "TD": "TD - towarowy krajowy intermodalny",
       "TM": "TM - towarowy krajowy masowy",
       "TN": "TN - towarowy krajowy niemasowy",
-      "TK": "TK - towarowy do obsługi stacji i bocznic",
+      "TK": "TK - towarowy (stacje i bocznice)",
       "TS": "TS - towarowy próżny próbny",
 
       "LT": "LT - lokomotywa luzem",