Merge pull request #17 - Wersja 1.7.2

Wersja 1.7.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -35,5 +35,13 @@ export default defineComponent({
   color: $textColor;
   font-size: 1em;
   padding: 1em 0.5em;
+
+  @media screen and (max-width: $breakpointMd) {
+    font-size: calc(0.7rem + 0.75vw);
+  }
+
+  @media screen and (orientation: landscape) and (max-width: $breakpointMd) {
+    font-size: calc(0.75rem + 0.4vw);
+  }
 }
 </style>

src/components/tabs/StockGeneratorTab.vue

@@ -37,13 +37,13 @@
 
       <div class="generator_cargo">
         <button
-          v-for="(cargoArray, cargoName) in store.stockData?.generator.cargo"
+          v-for="cargo in computedCargoData"
-          :key="cargoName"
+          :key="cargo.name"
           class="btn"
-          :data-chosen="chosenCargoTypes.includes(cargoName.toString())"
+          :data-chosen="chosenCargoTypes.includes(cargo.name)"
-          @click="toggleCargoChosen(cargoName.toString(), cargoArray)"
+          @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
         >
-          {{ $t(`cargo.${cargoName}`) }}
+          {{ $t(`cargo.${cargo.name}`) }}
         </button>
       </div>
 
@@ -129,6 +129,19 @@ export default defineComponent({
     computedChosenCarTypes() {
       return new Set<string>(this.chosenCarTypes.slice().sort((c1, c2) => (c1 > c2 ? 1 : -1)));
     },
+
+    computedCargoData() {
+      if (!this.store.stockData?.generator.cargo) return [];
+
+      const cargoGeneratorData = this.store.stockData.generator.cargo;
+
+      return Object.keys(cargoGeneratorData)
+        .sort((v1, v2) => this.$t(`cargo.${v1}`).localeCompare(this.$t(`cargo.${v2}`)))
+        .map((v) => ({
+          name: v,
+          cargoList: cargoGeneratorData[v],
+        }));
+    },
   },
 
   methods: {

src/components/utils/StockThumbnails.vue

@@ -1,29 +1,28 @@
 <template>
-  <div class="stock_thumbnails" ref="thumbnailsRef">
+  <div class="stock-thumbnails" ref="thumbnailsRef">
     <div
+      class="thumbnail-item"
       v-for="(stock, stockIndex) in store.stockList"
       :key="stockIndex"
       :data-selected="store.chosenStockListIndex == stockIndex"
+      :data-sponsor="stock.isSponsorsOnly"
       draggable="true"
       @dragstart="onDragStart(stockIndex)"
       @drop="onDrop($event, stockIndex)"
       @dragover="allowDrop"
+      @click="onListItemClick(stockIndex)"
     >
-      <span @click="onListItemClick(stockIndex)" :key="stock.id">
+      <b>
-        <b :class="{ sponsor: stock.isSponsorsOnly }">
+        {{ stock.type }}
-          {{ stock.type }}
+      </b>
-        </b>
 
-        <span>
+      <img
-          <img
+        draggable="false"
-            draggable="false"
+        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
+        :alt="stock.type"
-            :alt="stock.type"
+        :title="stock.type"
-            :title="stock.type"
+        @error="stockImageError($event, stock)"
-            @error="stockImageError($event, stock)"
+      />
-          />
-        </span>
-      </span>
     </div>
   </div>
 </template>
@@ -87,41 +86,45 @@ const allowDrop = (e: DragEvent) => {
 </script>
 
 <style lang="scss" scoped>
-.stock_thumbnails {
+.stock-thumbnails {
   display: flex;
   overflow: auto;
   background-color: #353a57;
+}
 
-  > div {
+.thumbnail-item {
-    display: flex;
+  display: flex;
-    align-items: flex-end;
+  align-items: center;
-    cursor: pointer;
+  justify-content: space-between;
-    min-height: 100px;
 
-    &[data-selected='true'] {
+  flex-direction: column;
-      background-color: rebeccapurple;
+  gap: 0.5em;
-    }
 
-    > span {
+  padding-top: 0.5em;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5em;
-      padding: 0.5em 0;
 
-      text-align: center;
+  cursor: pointer;
+  min-height: 100px;
+  font-size: 0.85em;
 
-      font-size: 0.85em;
+  user-select: none;
-      user-select: none;
+  -moz-user-select: none;
-      -moz-user-select: none;
+  -webkit-user-select: none;
-    }
+
+  &[data-selected='true'] {
+    background-color: rebeccapurple;
+  }
+
+  b {
+    color: #ccc;
+    margin: 0 1em;
+  }
+
+  &[data-sponsor='true'] > b {
+    color: salmon;
   }
 
   img {
     max-height: 60px;
   }
 }
-
-.sponsor {
-  color: salmon;
-}
 </style>