Poprawki responsywności

src/App.vue

@@ -93,6 +93,7 @@ export default defineComponent({
   margin: 0 auto;
 
   color: $textColor;
+  font-size: 1em;
 
   display: flex;
   justify-content: center;
@@ -100,14 +101,6 @@ export default defineComponent({
 
 /* HEADER SECTION */
 
-header {
-  text-align: center;
-
-  img {
-    width: 35em;
-  }
-}
-
 h2 {
   margin: 0;
   margin-bottom: 0.5em;
@@ -167,6 +160,7 @@ main {
 footer {
   margin-top: auto;
   text-align: center;
+  padding: 0 1em;
 }
 
 /* MOBILE VIEWS */
@@ -178,28 +172,12 @@ footer {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
   }
-
-  #app {
-    font-size: calc(0.75vw + 0.7rem);
-  }
-
-  header {
-    font-size: 0.85em;
-
-    img {
-      width: 35em;
-    }
-  }
 }
 
-@media screen and (max-width: $breakpointSm) {
-  header {
-    font-size: 0.75em;
-
-    img {
-      width: 32em;
-    }
-  }
-}
+// @media screen and (max-width: $breakpointSm) {
+//   header {
+//     font-size: 0.75em;
+//   }
+// }
 </style>
 

src/components/LogoSection.vue

@@ -24,10 +24,8 @@ export default {
 }
 
 img {
-  width: 25em;
-  @media screen and (max-width: 400px) {
-    width: 20em;
-  }
+  max-width: 25em;
+  width: 100%;    
 }
 </style>
 

src/components/StockGeneratorTab.vue

@@ -72,8 +72,12 @@
       <hr />
 
       <div class="generator_actions">
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">WYGENERUJ</button>
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">WYGENERUJ PRÓŻNE WAGONY</button>
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+          WYGENERUJ
+        </button>
+        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
+          WYGENERUJ PRÓŻNE WAGONY
+        </button>
 
         <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
           ZRESETUJ ŁADUNKI
@@ -151,12 +155,12 @@ export default defineComponent({
             const [type, cargoType] = c.split(':');
             const carWagonObjs = this.store.carDataList.filter((cw) => cw.type.startsWith(type));
             const cargoObjs = [] as (ICargo | undefined)[];
-            
-            if(!cargoType || empty) cargoObjs.push(undefined);
-            else if(cargoType == 'all') cargoObjs.push(...carWagonObjs[0]?.cargoList);
+
+            if (!cargoType || empty) cargoObjs.push(undefined);
+            else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]?.cargoList);
             else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
 
-            // if (cargoType == 'all') 
+            // if (cargoType == 'all')
             // else if (cargoType)
             // else cargoObjs.push(undefined);
 
@@ -232,6 +236,7 @@ export default defineComponent({
     margin: 0;
     color: white;
     font-size: 1.35em;
+    text-align: center;
   }
 
   button {
@@ -263,8 +268,8 @@ h2 {
   }
 
   input {
+    max-width: 250px;
     margin-top: 0.5em;
-    max-width: 200px;
   }
 }
 
@@ -345,5 +350,23 @@ hr {
   font-weight: bold;
   color: black;
 }
+
+@media only screen and (max-width: 470px) {
+  .generator_cargo,
+  .generator_vehicles {
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  }
+
+  .generator_attributes {
+    label {
+      width: 100%;
+    }
+
+    input {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+}
 </style>
 

src/components/StockListTab.vue

@@ -3,8 +3,7 @@
     <div class="stock_actions">
       <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
       <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
-      <span class="spacer"></span>
-      <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
+      <button class="btn" style="margin-left: auto" @click="shuffleCars">TASUJ WAGONY</button>
       <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
     </div>
 
@@ -567,3 +566,4 @@ li > .stock-info {
   }
 }
 </style>
+

src/components/StockSection.vue

@@ -61,18 +61,16 @@ export default defineComponent({
 // Stock tabs styles
 .stock_actions {
   display: flex;
+  gap: 0.5em;
 
-  .spacer {
-    flex-grow: 2;
-  }
+  @media only screen and (max-width: 450px) {
+    flex-wrap: wrap;
 
-  button {
-    margin-right: 0.5em;
-
-    &:nth-child(5) {
-      margin-right: 0;
+    button {
+      width: 100%;
     }
   }
+ 
 }
 </style>
 

src/components/TrainImageSection.vue

@@ -129,9 +129,8 @@ export default defineComponent({
     position: relative;
     overflow: hidden;
 
-    width: 22em;
+    max-width: 22em;
     height: 13em;
-
     margin: 0 auto;
 
     &.supporter {

src/components/cards/RealStockCard.vue

@@ -96,7 +96,7 @@ export default defineComponent({
       this.store.chosenCargo = null;
       this.store.chosenLoco = null;
       this.store.chosenStockListIndex = -1;
-      
+
       this.store.swapVehicles = false;
 
       stockArray.forEach((type, i) => {
@@ -179,7 +179,8 @@ export default defineComponent({
 }
 
 input {
-  min-width: 250px;
+  width: 100%;
+  max-width: 250px;
 
   &::placeholder {
     font-size: 0.9em;
@@ -243,6 +244,10 @@ input {
       grid-template-columns: repeat(2, 1fr);
     }
 
+    @media screen and (max-width: 400px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
     margin-bottom: 1em;
   }