chore: changed lang button layout

This commit is contained in:
2025-07-07 18:15:39 +02:00
parent 5b9b86248f
commit 37c2650841
4 changed files with 20 additions and 29 deletions
+1 -1
View File
@@ -2,4 +2,4 @@ VITE_APP_API_URL=https://stacjownik.spythere.eu/api
VITE_APP_SWDR_URL=https://api.td2.info.pl VITE_APP_SWDR_URL=https://api.td2.info.pl
VITE_APP_ORDER_VERSION=2 VITE_APP_ORDER_VERSION=2
VITE_UPDATE_TEST='test' #VITE_UPDATE_TEST='test'
+2 -2
View File
@@ -1,7 +1,7 @@
{ {
"locale": { "locale": {
"pl": "POLISH", "pl": "POL",
"en": "ENGLISH" "en": "ENG"
}, },
"navbar": { "navbar": {
"order-message": "ORDER MESSAGE", "order-message": "ORDER MESSAGE",
+3 -3
View File
@@ -1,7 +1,7 @@
{ {
"locale": { "locale": {
"pl": "POLSKI", "pl": "POL",
"en": "ANGIELSKI" "en": "ENG"
}, },
"update": { "update": {
"update-available-text": "Nowa wersja GeneraTORa dostępna!", "update-available-text": "Nowa wersja GeneraTORa dostępna!",
@@ -14,7 +14,7 @@
}, },
"navbar": { "navbar": {
"order-message": "TREŚĆ ROZKAZU", "order-message": "TREŚĆ ROZKAZU",
"order-list": "ZAPISANE ROZKAZY", "order-list": "ZAPISANE ROZ.",
"order-train-picker": "POCIĄGI" "order-train-picker": "POCIĄGI"
}, },
"order-message": { "order-message": {
+14 -23
View File
@@ -9,25 +9,21 @@
</div> </div>
<div class="message_container"> <div class="message_container">
<div class="message_actions"> <div class="message_nav">
<button class="g-button action icon" @click="switchLanguages"> <button class="g-button icon" @click="switchLanguages">
<LanguagesIcon :size="18" /> <LanguagesIcon :size="18" />
<span style="margin-left: 0.25em">{{ $t('locale.' + store.currentAppLocale) }}</span> <span style="margin-left: 0.25em">{{ $t('locale.' + store.currentAppLocale) }}</span>
</button> </button>
</div>
<div class="message_nav"> <button
<span v-for="(action, i) in navActions" :key="action.mode"> v-for="(action, i) in navActions"
<b v-if="i > 0">&bull;</b> :key="action.mode"
class="g-button option"
<button :data-active="store.orderMode == action.mode"
class="g-button option" @click="selectOrderMode(action.mode)"
:data-active="store.orderMode == action.mode" >
@click="selectOrderMode(action.mode)" {{ $t(`navbar.${action.value}`) }}
> </button>
{{ $t(`navbar.${action.value}`) }}
</button>
</span>
</div> </div>
<transition name="order-anim" mode="out-in"> <transition name="order-anim" mode="out-in">
@@ -50,7 +46,7 @@ import { useStore } from '../store/store';
import OrderHelper from '../components/OrderHelper.vue'; import OrderHelper from '../components/OrderHelper.vue';
import OrderTrainPicker from '../components/OrderTrainPicker.vue'; import OrderTrainPicker from '../components/OrderTrainPicker.vue';
import { LanguagesIcon } from 'lucide-vue-next'; import { LanguagesIcon } from 'lucide-vue-next';
import StorageManager from "../managers/storageManager"; import StorageManager from '../managers/storageManager';
export default defineComponent({ export default defineComponent({
components: { OrderVue, SideBar, OrderHelper, LanguagesIcon }, components: { OrderVue, SideBar, OrderHelper, LanguagesIcon },
@@ -162,19 +158,14 @@ export default defineComponent({
overflow: auto; overflow: auto;
} }
.message_actions {
display: flex;
justify-content: center;
}
.message_nav { .message_nav {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.25em;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0.5em 0; margin-bottom: 1.5em;
} }
} }
</style> </style>