Poprawki responsywności

dev-dist/sw.js

@@ -1 +1 @@
-if(!self.define){let e,t={};const i=(i,n)=>(i=new URL(i+".js",n).href,t[i]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=t,document.head.appendChild(e)}else e=i,importScripts(i),t()})).then((()=>{let e=t[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e})));self.define=(n,s)=>{const r=e||("document"in self?document.currentScript.src:"")||location.href;if(t[r])return;let o={};const l=e=>i(e,r),c={module:{uri:r},exports:o,require:l};t[r]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),o)))}}define(["./workbox-b8fc7838"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"3ca0b8505b4bec776b69afdba2768812"},{revision:null,url:"index.html"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"),{allowlist:[/^\/$/]})),e.registerRoute(/^https:\/\/wiki.td2.info.pl\/images\/thumb\/.*/,new e.NetworkFirst({cacheName:"sceneries-cache",plugins:[new e.ExpirationPlugin({maxEntries:400,maxAgeSeconds:31536e3}),new e.CacheableResponsePlugin({statuses:[0,200]})]}),"GET")}));
+if(!self.define){let e,t={};const s=(s,i)=>(s=new URL(s+".js",i).href,t[s]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=s,e.onload=t,document.head.appendChild(e)}else e=s,importScripts(s),t()})).then((()=>{let e=t[s];if(!e)throw new Error(`Module ${s} didn’t register its module`);return e})));self.define=(i,n)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(t[o])return;let r={};const c=e=>s(e,o),l={module:{uri:o},exports:r,require:c};t[o]=Promise.all(i.map((e=>l[e]||c(e)))).then((e=>(n(...e),r)))}}define(["./workbox-b8fc7838"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"3ca0b8505b4bec776b69afdba2768812"},{revision:null,url:"index.html"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"),{allowlist:[/^\/$/]})),e.registerRoute(/^https:\/\/wiki.td2.info.pl\/images\/thumb\/.*/,new e.NetworkFirst({cacheName:"td2-images-cache",plugins:[new e.ExpirationPlugin({maxEntries:400,maxAgeSeconds:1209600}),new e.CacheableResponsePlugin({statuses:[0,200]})]}),"GET"),e.registerRoute(/^https:\/\/spythere.github.io\/api\/readyStock.json/,new e.NetworkFirst({cacheName:"github-api-cache",plugins:[new e.ExpirationPlugin({maxEntries:400,maxAgeSeconds:2592e3}),new e.CacheableResponsePlugin({statuses:[0,200]})]}),"GET")}));

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