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

fix: train modal responsiveness & icons

Browse Source
This commit is contained in:
Spythere
2024-08-20 13:33:24 +02:00
parent 8a2b453dc6
commit 4969a433cc
2 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainInfo.vue
+28 -15
View File
@@ -2,7 +2,7 @@
<div class="train-info" :data-extended="extended"> <div class="train-info" :data-extended="extended">
<section class="train-general"> <section class="train-general">
<div class="general-top-bar"> <div class="general-top-bar">
<div> <div class="top-bar-header">
<b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b> <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
<span class="timetable-id" v-if="train.timetableData"> <span class="timetable-id" v-if="train.timetableData">
#{{ train.timetableData.timetableId }} #{{ train.timetableData.timetableId }}
@@ -26,14 +26,15 @@
</b> </b>
<b class="train-number">{{ train.trainNo }}</b> <b class="train-number">{{ train.trainNo }}</b>
<span>&bull;</span> <span>&bull;</span>
<b
class="level-badge driver"
:style="calculateExpStyle(train.driverLevel, train.isSupporter)"
>
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
</b>
<div class="train-driver"> <div class="train-driver">
<b
class="level-badge driver"
:style="calculateExpStyle(train.driverLevel, train.isSupporter)"
>
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
</b>
<b <b
v-if="apiStore.donatorsData.includes(train.driverName)" v-if="apiStore.donatorsData.includes(train.driverName)"
data-tooltip-type="DonatorTooltip" data-tooltip-type="DonatorTooltip"
@@ -47,7 +48,7 @@
</div> </div>
</div> </div>
<div v-if="extended"> <div class="top-bar-controls" v-if="extended">
<button class="btn-timetable btn--image btn--action" @click="navigateToJournal"> <button class="btn-timetable btn--image btn--action" @click="navigateToJournal">
<img src="/images/icon-train.svg" alt="train icon" /> <img src="/images/icon-train.svg" alt="train icon" />
<span> <span>
@@ -258,6 +259,12 @@ export default defineComponent({
gap: 0.5em; gap: 0.5em;
} }
.train-driver {
display: flex;
align-items: center;
gap: 0.25em;
}
.train-driver img { .train-driver img {
max-height: 20px; max-height: 20px;
vertical-align: text-bottom; vertical-align: text-bottom;
@@ -289,16 +296,22 @@ export default defineComponent({
.general-top-bar { .general-top-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em; gap: 0.5em;
}
& > div { .top-bar-header {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25em; gap: 0.25em;
} }
.top-bar-controls {
display: flex;
align-items: center;
gap: 0.25em;
} }
.btn-timetable { .btn-timetable {
src/components/TrainsView/TrainSchedule.vue
+12 -3
View File
@@ -60,7 +60,7 @@
v-else v-else
src="/images/icon-we4a.png" src="/images/icon-we4a.png"
:title="$t('trains.we4a-tooltip')" :title="$t('trains.we4a-tooltip')"
width="12" width="10"
/> />
</span> </span>
</div> </div>
@@ -84,7 +84,7 @@
v-else v-else
src="/images/icon-we4a.png" src="/images/icon-we4a.png"
:title="$t('trains.we4a-tooltip')" :title="$t('trains.we4a-tooltip')"
width="12" width="10"
/> />
</span> </span>
</div> </div>
@@ -523,8 +523,17 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
} }
.scenery-route { .scenery-route {
display: flex;
gap: 0.25em;
span:nth-child(2) {
display: flex;
gap: 0.25em;
align-items: center;
}
img { img {
vertical-align: middle; width: 1em;
} }
} }