Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-04 12:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

stock thumbnail labels fix

Browse Source
This commit is contained in:
Spythere
2023-11-06 20:20:00 +01:00
parent b53201a7ff
commit 956ff8afd7
1 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/utils/StockThumbnails.vue
+27 -24
View File
@@ -1,20 +1,21 @@
<template> <template>
<div class="stock_thumbnails" ref="thumbnailsRef"> <div class="stock-thumbnails" ref="thumbnailsRef">
<div <div
class="thumbnail-item"
v-for="(stock, stockIndex) in store.stockList" v-for="(stock, stockIndex) in store.stockList"
:key="stockIndex" :key="stockIndex"
:data-selected="store.chosenStockListIndex == stockIndex" :data-selected="store.chosenStockListIndex == stockIndex"
:data-sponsor="stock.isSponsorsOnly"
draggable="true" draggable="true"
@dragstart="onDragStart(stockIndex)" @dragstart="onDragStart(stockIndex)"
@drop="onDrop($event, stockIndex)" @drop="onDrop($event, stockIndex)"
@dragover="allowDrop" @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`"
@@ -22,8 +23,6 @@
:title="stock.type" :title="stock.type"
@error="stockImageError($event, stock)" @error="stockImageError($event, stock)"
/> />
</span>
</span>
</div> </div>
</div> </div>
</template> </template>
@@ -87,41 +86,45 @@ const allowDrop = (e: DragEvent) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.stock_thumbnails { .stock-thumbnails {
display: flex; display: flex;
overflow: auto; overflow: auto;
background-color: #353a57; background-color: #353a57;
}
> div { .thumbnail-item {
display: flex; display: flex;
align-items: flex-end; align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 0.5em;
padding-top: 0.5em;
cursor: pointer; cursor: pointer;
min-height: 100px; min-height: 100px;
font-size: 0.85em;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
&[data-selected='true'] { &[data-selected='true'] {
background-color: rebeccapurple; background-color: rebeccapurple;
} }
> span { b {
display: flex; color: #ccc;
flex-direction: column; margin: 0 1em;
gap: 0.5em;
padding: 0.5em 0;
text-align: center;
font-size: 0.85em;
user-select: none;
-moz-user-select: none;
} }
&[data-sponsor='true'] > b {
color: salmon;
} }
img { img {
max-height: 60px; max-height: 60px;
} }
} }
.sponsor {
color: salmon;
}
</style> </style>