design

src/App.vue

@@ -86,6 +86,7 @@ export default defineComponent({
 
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 /* APP */
@@ -94,10 +95,7 @@ export default defineComponent({
 
   color: $textColor;
   font-size: 1em;
-  padding: 1em;
-
-  display: flex;
-  justify-content: center;
+  padding: 1em 0.5em;
 }
 
 /* HEADER SECTION */
@@ -145,14 +143,14 @@ main {
   display: grid;
   gap: 1em 3em;
 
-  width: 100vw;
+  width: 100%;
   max-width: 1300px;
   min-height: 75vh;
 
   grid-template-columns: 1fr 2fr;
   grid-template-rows: auto 360px minmax(400px, 1fr);
 
-  padding: 0 1em;
+  // padding: 0 1em;
   margin-bottom: 2em;
 }
 

src/components/InputsSection.vue

@@ -175,10 +175,9 @@ export default defineComponent({
     },
 
     addOrSwitchVehicle() {
-      if(!this.store.chosenVehicle) return;
+      if (!this.store.chosenVehicle) return;
 
-      if (this.store.chosenStockListIndex == -1)
-        this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
+      if (this.store.chosenStockListIndex == -1) this.addVehicle(this.store.chosenVehicle, this.store.chosenCargo);
       else this.switchVehicles();
     },
 
@@ -224,7 +223,7 @@ export default defineComponent({
 
 .inputs-section {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
 
   grid-row: 2;
   grid-column: 1;
@@ -264,11 +263,12 @@ button.btn--choice {
 }
 
 .input_actions {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5em;
 
-  button {
-    margin: 0.5em 0.5em 0 0;
+  button:nth-child(3) {
+    grid-column: 1 / 3;
   }
 }
 
@@ -285,10 +285,6 @@ button.btn--choice {
     text-align: center;
   }
 
-  .input_actions {
-    justify-content: center;
-  }
-
   .vehicle-types {
     justify-content: center;
   }

src/components/StockListTab.vue

@@ -1,23 +1,8 @@
 <template>
   <section class="stock-list">
     <div class="stock_actions">
-      <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
-      <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
       <button class="btn" @click="store.stockSectionMode = 'number-generator'">GENERUJ NUMER</button>
-    </div>
-
-    <div class="stock_actions">
-      <button
-        class="btn"
-        :data-disabled="store.stockList.length == 0"
-        :disabled="store.stockList.length == 0"
-        @click="copyToClipboard"
-      >
-        KOPIUJ DO SCHOWKA
-      </button>
-
-      <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
-      <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
+      <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
     </div>
 
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
@@ -26,30 +11,48 @@
       </b>
 
       <button
-        class="btn action-btn"
+        class="btn"
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveUpStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('higher')" alt="move up vehicle" />
-        Przenieś wyżej
+        PRZENIEŚ WYŻEJ
       </button>
 
       <button
-        class="btn action-btn"
+        class="btn"
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveDownStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('lower')" alt="move down vehicle" />
-        Przenieś niżej
+        PRZENIEŚ NIŻEJ
       </button>
 
       <button
-        class="btn action-btn"
+        class="btn"
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="removeStock(store.chosenStockListIndex)"
       >
         <img :src="getIconURL('remove')" alt="remove vehicle" />
-        Usuń
+        USUŃ
+      </button>
+    </div>
+
+    <div class="stock_actions">
+      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
+        POBIERZ POCIĄG
+      </button>
+
+      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
+        KOPIUJ DO SCHOWKA
+      </button>
+
+      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
+        ZRESETUJ LISTĘ
+      </button>
+
+      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
+        TASUJ WAGONY
       </button>
     </div>
 
@@ -99,7 +102,7 @@
 
     <!-- Stock list -->
     <ul ref="list">
-      <li v-if="store.stockList.length == 0" class="list-empty">
+      <li v-if="stockIsEmpty" class="list-empty">
         <div class="stock-info">Lista pojazdów jest pusta!</div>
       </li>
 
@@ -153,12 +156,13 @@ import imageMixin from '../mixins/imageMixin';
 import stockPreviewMixin from '../mixins/stockPreviewMixin';
 import { IStock } from '../types';
 import StockThumbnails from './StockThumbnails.vue';
+import stockMixin from '../mixins/stockMixin';
 
 export default defineComponent({
   name: 'stock-list',
   components: { TrainImage, StockThumbnails },
 
-  mixins: [warningsMixin, imageMixin, stockPreviewMixin],
+  mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
 
   setup() {
     const store = useStore();
@@ -188,6 +192,10 @@ export default defineComponent({
         .join(';');
     },
 
+    stockIsEmpty() {
+      return this.store.stockList.length == 0;
+    },
+
     chosenStockVehicle() {
       return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
     },
@@ -266,6 +274,8 @@ export default defineComponent({
       if (index == -1) return;
 
       this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
+
+      if (this.store.stockList.length < index + 1) this.store.chosenStockListIndex = -1;
     },
 
     moveUpStock(index: number) {
@@ -386,7 +396,6 @@ export default defineComponent({
   gap: 0.5em;
   flex-wrap: wrap;
 
-  margin: 1em 0;
   padding: 0.5em;
   background-color: #353a57;
 
@@ -410,20 +419,18 @@ export default defineComponent({
   }
 
   button {
-    padding: 0.25em 0.5em;
-
     img {
-      vertical-align: text-bottom;
       margin-right: 0.25em;
-
-      width: 1.1em;
-      height: 1.1em;
     }
   }
 }
 
-.stock_actions button {
-  width: 100%;
+.stock_actions {
+  display: grid;
+  gap: 0.5em;
+  margin: 1em 0;
+
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 }
 
 .real-stock-info {

src/components/StockSection.vue

@@ -65,16 +65,5 @@ export default defineComponent({
 
   overflow: hidden;
 }
-
-// Stock tabs styles
-.stock_actions {
-  display: flex;
-  gap: 0.5em;
-  margin: 0.5em 0;
-
-  @media only screen and (max-width: 450px) {
-    flex-wrap: wrap;
-  }
-}
 </style>
 

src/components/StockThumbnails.vue

@@ -98,6 +98,7 @@ const allowDrop = (e: DragEvent) => {
     display: flex;
     align-items: flex-end;
     cursor: pointer;
+    min-height: 100px;
 
     &[data-selected='true'] {
       background-color: rebeccapurple;

src/styles/global.scss

@@ -9,8 +9,8 @@ $secondaryColor: #222;
 $accentColor: #e4c428;
 
 ::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 7px;
+  height: 7px;
 
   &-track {
     background: #222;
@@ -31,7 +31,6 @@ html {
   font-family: 'Lato', sans-serif;
 
   background-color: $bgColor;
-  width: 100vw;
   overflow-x: hidden;
 }