Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 19:48:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(app): responsiveness adjustments

Browse Source
This commit is contained in:
Spythere
2026-03-28 17:56:32 +01:00
parent 53d53738f4
commit 52eacbf827
2 changed files with 42 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tabs/StorageTab.vue
+40 -43
View File
@@ -6,51 +6,49 @@
</div> </div>
<div class="tab_content"> <div class="tab_content">
<div class="storage-list-wrapper"> <transition-group name="storage-list-anim" tag="ul" class="storage-list">
<transition-group name="storage-list-anim" tag="ul" class="storage-list"> <li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
<li v-for="storageEntry in storageStockDataList" :key="storageEntry.id"> <div class="storage-item-top">
<div class="storage-item-top"> <h3>
<h3> {{ storageEntry.id }}
{{ storageEntry.id }} </h3>
</h3>
<div class="storage-item-top-actions"> <div class="storage-item-top-actions">
<button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)"> <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
<LogIn /> <LogIn />
</button> </button>
<button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)"> <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
<ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" /> <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
<ChevronUp v-else /> <ChevronUp v-else />
</button> </button>
<button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)"> <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
<Trash2 /> <Trash2 />
</button> </button>
</div>
</div> </div>
</div>
<div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)"> <div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
<i> <i>
{{ $t('storage.created-at') }} {{ $t('storage.created-at') }}
{{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
> >
<i v-if="storageEntry.updatedAt"> <i v-if="storageEntry.updatedAt">
&bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i &bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
> >
<div style="margin-top: 0.5em"> <div style="margin-top: 0.5em">
<i>{{ $t('storage.stock-title') }} </i> <i>{{ $t('storage.stock-title') }} </i>
{{ shortenStockString(storageEntry.stockString) }} {{ shortenStockString(storageEntry.stockString) }}
</div>
</div> </div>
</li> </div>
</li>
<li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries"> <li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
{{ $t('storage.no-entires') }} {{ $t('storage.no-entires') }}
</li> </li>
</transition-group> </transition-group>
</div>
</div> </div>
</section> </section>
</template> </template>
@@ -157,9 +155,7 @@ export default defineComponent({
.tab_content { .tab_content {
overflow: auto; overflow: auto;
} margin-top: 1em;
.storage-list-wrapper {
position: relative; position: relative;
} }
@@ -167,7 +163,6 @@ ul.storage-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
margin-top: 0.5em;
} }
ul.storage-list > li { ul.storage-list > li {
@@ -181,12 +176,14 @@ ul.storage-list > li {
.storage-item-top { .storage-item-top {
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
} }
.storage-item-top > h3 { .storage-item-top > h3 {
width: 100%; min-width: 350px;
text-align: left; text-align: left;
margin: 0; margin: 0;
} }
@@ -215,7 +212,7 @@ ul.storage-list > li {
&-move, &-move,
&-enter-active, &-enter-active,
&-leave-active { &-leave-active {
transition: all 120ms ease-in-out; transition: all 100ms ease-in-out;
} }
&-enter-from { &-enter-from {
src/components/tabs/stock-list/StockList.vue
+2 -1
View File
@@ -11,6 +11,7 @@
<li <li
v-for="(stock, i) in store.stockList" v-for="(stock, i) in store.stockList"
:key="stock.id" :key="stock.id"
class="stock-item"
:class="{ loco: isTractionUnit(stock.vehicleRef) }" :class="{ loco: isTractionUnit(stock.vehicleRef) }"
tabindex="0" tabindex="0"
@click="onListItemClick(i)" @click="onListItemClick(i)"
@@ -150,6 +151,7 @@ export default defineComponent({
border-radius: 0.5em; border-radius: 0.5em;
padding: 0.75em; padding: 0.75em;
font-weight: bold; font-weight: bold;
width: 100%;
} }
ul { ul {
@@ -160,7 +162,6 @@ ul > li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
min-width: 500px;
white-space: nowrap; white-space: nowrap;
margin: 0.25em 0; margin: 0.25em 0;