Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 11:45:34 +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
+41 -38
View File
@@ -1,29 +1,28 @@
<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`" :alt="stock.type"
:alt="stock.type" :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;
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 { img {
max-height: 60px; max-height: 60px;
} }
} }
.sponsor {
color: salmon;
}
</style> </style>