fix: twr/skr badges sizing

This commit is contained in:
2024-08-17 15:51:36 +02:00
parent cd71c78eb4
commit 58d6a97762
3 changed files with 9 additions and 30 deletions
@@ -3,10 +3,8 @@
<span class="general-train"> <span class="general-train">
<span class="text--grayed">#{{ timetable.id }}</span> <span class="text--grayed">#{{ timetable.id }}</span>
<span class="badges" v-if="timetable.skr || timetable.twr"> <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
<span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span> <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
<span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
</span>
<span> <span>
<strong <strong
@@ -94,7 +92,7 @@ export default defineComponent({
type: Object as PropType<API.TimetableHistory.Data>, type: Object as PropType<API.TimetableHistory.Data>,
required: true required: true
} }
}, }
}); });
</script> </script>
@@ -120,7 +118,6 @@ export default defineComponent({
gap: 0.25em; gap: 0.25em;
cursor: pointer; cursor: pointer;
line-height: 2;
} }
.general-time { .general-time {
+6 -18
View File
@@ -8,24 +8,12 @@
#{{ train.timetableData.timetableId }} #{{ train.timetableData.timetableId }}
</span> </span>
<span <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
class="timetable-warnings" TWR
v-if="train.timetableData?.TWR || train.timetableData?.SKR" </span>
>
<span <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
class="train-badge twr" SKR
v-if="train.timetableData?.TWR"
:title="$t('general.TWR')"
>
TWR
</span>
<span
class="train-badge skr"
v-if="train.timetableData?.SKR"
:title="$t('general.SKR')"
>
SKR
</span>
</span> </span>
<b <b
-6
View File
@@ -76,16 +76,10 @@
} }
.train-badge { .train-badge {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
border-radius: 0.2em; border-radius: 0.2em;
font-weight: bold; font-weight: bold;
font-size: 0.9em;
&.twr { &.twr {
background-color: var(--clr-twr); background-color: var(--clr-twr);
box-shadow: 0 0 5px 1px var(--clr-twr); box-shadow: 0 0 5px 1px var(--clr-twr);