chore(app): responsiveness adjustments

This commit is contained in:
2026-03-28 17:56:32 +01:00
parent 53d53738f4
commit 52eacbf827
2 changed files with 42 additions and 44 deletions
+5 -8
View File
@@ -6,7 +6,6 @@
</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">
@@ -51,7 +50,6 @@
</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 {
+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;