chore(flags): adjusted flags styles

This commit is contained in:
2026-01-14 21:21:09 +01:00
parent 08422caa96
commit a6f284270e
5 changed files with 40 additions and 21 deletions
+6
View File
@@ -31,6 +31,12 @@ const languageFlagSrc = computed(
</script> </script>
<style scoped> <style scoped>
.flag-icon {
display: flex;
justify-content: center;
align-items: center;
}
.flag-icon img { .flag-icon img {
vertical-align: middle; vertical-align: middle;
} }
@@ -1,24 +1,22 @@
<template> <template>
<li class="dispatcher-history-entry"> <li class="dispatcher-history-entry">
<div class="entry-info"> <div class="entry-info">
<span> <span class="entry-info-left">
<span> <div class="station-info">
<router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`"> <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
<b>{{ entry.stationName }}</b> <b>{{ entry.stationName }}</b>
</router-link> </router-link>
<b class="text--grayed"> #{{ entry.stationHash }}</b> <b class="text--grayed"> #{{ entry.stationHash }}</b>
</span> &bull;
&bull; <b
<b v-if="entry.dispatcherLevel !== null"
v-if="entry.dispatcherLevel !== null" class="level-badge dispatcher"
class="level-badge dispatcher" :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
:style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)" >
> {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
{{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }} </b>
</b>
<b style="margin-left: 5px">
<span <span
v-if="apiStore.donatorsData.includes(entry.dispatcherName)" v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
data-tooltip-type="DonatorTooltip" data-tooltip-type="DonatorTooltip"
@@ -38,11 +36,11 @@
> >
{{ entry.dispatcherName }} {{ entry.dispatcherName }}
</router-link> </router-link>
</b>
<span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null"> <span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null">
<FlagIcon :language-id="entry.dispatcherLanguageId" width="1.5em" /> <FlagIcon :language-id="entry.dispatcherLanguageId" width="1.75em" />
</span> </span>
</div>
<div> <div>
<span v-if="entry.timestampTo"> <span v-if="entry.timestampTo">
@@ -172,7 +170,7 @@ export default defineComponent({
.dispatcher-language { .dispatcher-language {
display: inline-block; display: inline-block;
margin: 0 0.25em; vertical-align: middle;
} }
.entry-info { .entry-info {
@@ -196,6 +194,14 @@ export default defineComponent({
margin-top: 1em; margin-top: 1em;
} }
.station-info {
display: flex;
flex-wrap: wrap;
text-align: center;
align-items: center;
gap: 0.25em;
}
.status-list { .status-list {
display: flex; display: flex;
overflow: auto; overflow: auto;
@@ -215,5 +221,9 @@ export default defineComponent({
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.station-info {
justify-content: center;
}
} }
</style> </style>
@@ -73,7 +73,7 @@
</router-link> </router-link>
<div v-if="timetable.driverLanguageId != null"> <div v-if="timetable.driverLanguageId != null">
<FlagIcon :language-id="timetable.driverLanguageId" width="1.5em" /> <FlagIcon :language-id="timetable.driverLanguageId" width="1.75em" />
</div> </div>
</span> </span>
@@ -21,6 +21,8 @@
</span> </span>
<span v-else>{{ onlineScenery.dispatcherName }}</span> <span v-else>{{ onlineScenery.dispatcherName }}</span>
</router-link> </router-link>
<FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
</div> </div>
<div class="info-bottom"> <div class="info-bottom">
@@ -51,9 +53,11 @@ import styleMixin from '../../../mixins/styleMixin';
import StationStatusBadge from '../../Global/StationStatusBadge.vue'; import StationStatusBadge from '../../Global/StationStatusBadge.vue';
import { ActiveScenery } from '../../../typings/common'; import { ActiveScenery } from '../../../typings/common';
import { useApiStore } from '../../../store/apiStore'; import { useApiStore } from '../../../store/apiStore';
import FlagIcon from '../../Global/FlagIcon.vue';
export default defineComponent({ export default defineComponent({
mixins: [styleMixin, dateMixin, routerMixin], mixins: [styleMixin, dateMixin, routerMixin],
components: { StationStatusBadge, FlagIcon },
data() { data() {
return { return {
@@ -66,8 +70,7 @@ export default defineComponent({
type: Object as PropType<ActiveScenery>, type: Object as PropType<ActiveScenery>,
required: false required: false
} }
}, }
components: { StationStatusBadge }
}); });
</script> </script>
+1 -1
View File
@@ -68,7 +68,7 @@
</div> </div>
<div class="train-language-flag"> <div class="train-language-flag">
<FlagIcon :language-id="train.driverLanguageId" width="1.5em" /> <FlagIcon :language-id="train.driverLanguageId" width="1.75em" />
</div> </div>
</div> </div>
</div> </div>