Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 05:18:10 +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 class="tab_content">
<div class="storage-list-wrapper">
<transition-group name="storage-list-anim" tag="ul" class="storage-list">
<li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
<div class="storage-item-top">
<h3>
{{ storageEntry.id }}
</h3>
<transition-group name="storage-list-anim" tag="ul" class="storage-list">
<li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
<div class="storage-item-top">
<h3>
{{ storageEntry.id }}
</h3>
<div class="storage-item-top-actions">
<button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
<LogIn />
</button>
<div class="storage-item-top-actions">
<button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
<LogIn />
</button>
<button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
<ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
<ChevronUp v-else />
</button>
<button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
<ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
<ChevronUp v-else />
</button>
<button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
<Trash2 />
</button>
</div>
<button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
<Trash2 />
</button>
</div>
</div>
<div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
<i>
{{ $t('storage.created-at') }}
{{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
>
<i v-if="storageEntry.updatedAt">
&bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
>
<div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
<i>
{{ $t('storage.created-at') }}
{{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
>
<i v-if="storageEntry.updatedAt">
&bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
>
<div style="margin-top: 0.5em">
<i>{{ $t('storage.stock-title') }} </i>
{{ shortenStockString(storageEntry.stockString) }}
</div>
<div style="margin-top: 0.5em">
<i>{{ $t('storage.stock-title') }} </i>
{{ shortenStockString(storageEntry.stockString) }}
</div>
</li>
</div>
</li>
<li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
{{ $t('storage.no-entires') }}
</li>
</transition-group>
</div>
<li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
{{ $t('storage.no-entires') }}
</li>
</transition-group>
</div>
</section>
</template>
@@ -157,9 +155,7 @@ export default defineComponent({
.tab_content {
overflow: auto;
}
.storage-list-wrapper {
margin-top: 1em;
position: relative;
}
@@ -167,7 +163,6 @@ ul.storage-list {
display: flex;
flex-direction: column;
gap: 0.5em;
margin-top: 0.5em;
}
ul.storage-list > li {
@@ -181,12 +176,14 @@ ul.storage-list > li {
.storage-item-top {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
.storage-item-top > h3 {
width: 100%;
min-width: 350px;
text-align: left;
margin: 0;
}
@@ -215,7 +212,7 @@ ul.storage-list > li {
&-move,
&-enter-active,
&-leave-active {
transition: all 120ms ease-in-out;
transition: all 100ms ease-in-out;
}
&-enter-from {
src/components/tabs/stock-list/StockList.vue
+2 -1
View File
@@ -11,6 +11,7 @@
<li
v-for="(stock, i) in store.stockList"
:key="stock.id"
class="stock-item"
:class="{ loco: isTractionUnit(stock.vehicleRef) }"
tabindex="0"
@click="onListItemClick(i)"
@@ -150,6 +151,7 @@ export default defineComponent({
border-radius: 0.5em;
padding: 0.75em;
font-weight: bold;
width: 100%;
}
ul {
@@ -160,7 +162,6 @@ ul > li {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 500px;
white-space: nowrap;
margin: 0.25em 0;