mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 11:50:42 +00:00
Move language button to bottom left (#2796)
## Description: Move the language button to the bottom left so it takes up less space. <img width="615" height="567" alt="Screenshot 2026-01-05 at 5 54 23 PM" src="https://github.com/user-attachments/assets/f29d5bcb-8627-493a-8c0f-1966cb9c9be6" /> ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: evan
This commit is contained in:
+3
-5
@@ -311,9 +311,6 @@
|
||||
block
|
||||
secondary
|
||||
></o-button>
|
||||
<div class="container__row">
|
||||
<lang-selector class="w-full"></lang-selector>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -322,12 +319,12 @@
|
||||
id="settings-button"
|
||||
title="Settings"
|
||||
class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center"
|
||||
style="width: 80px; height: 80px; background-color: #0075ff"
|
||||
style="width: 60px; height: 60px; background-color: #0075ff"
|
||||
>
|
||||
<img
|
||||
src="/images/SettingIconWhite.svg"
|
||||
alt="Settings"
|
||||
style="width: 72px; height: 72px"
|
||||
style="width: 52px; height: 52px"
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -455,6 +452,7 @@
|
||||
<help-modal></help-modal>
|
||||
<game-info-modal></game-info-modal>
|
||||
<dark-mode-button></dark-mode-button>
|
||||
<lang-selector></lang-selector>
|
||||
<stats-button></stats-button>
|
||||
<alert-frame></alert-frame>
|
||||
<chat-modal></chat-modal>
|
||||
|
||||
+13
-15
@@ -264,21 +264,19 @@ export class LangSelector extends LitElement {
|
||||
});
|
||||
|
||||
return html`
|
||||
<div class="container__row">
|
||||
<button
|
||||
id="lang-selector"
|
||||
@click=${this.openModal}
|
||||
class="text-center appearance-none w-full bg-blue-100 dark:bg-gray-700 hover:bg-blue-200 dark:hover:bg-gray-600 text-blue-900 dark:text-gray-100 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300 flex items-center gap-2 justify-center"
|
||||
>
|
||||
<img
|
||||
id="lang-flag"
|
||||
class="w-6 h-4"
|
||||
src="/flags/${currentLang.svg}.svg"
|
||||
alt="flag"
|
||||
/>
|
||||
<span id="lang-name">${currentLang.native} (${currentLang.en})</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
id="lang-selector"
|
||||
title="Change Language"
|
||||
@click=${this.openModal}
|
||||
class="fixed bottom-4 left-4 z-50 border-none bg-none cursor-pointer"
|
||||
>
|
||||
<img
|
||||
id="lang-flag"
|
||||
class="w-20 h-14"
|
||||
src="/flags/${currentLang.svg}.svg"
|
||||
alt="flag"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<language-modal
|
||||
.visible=${this.showModal}
|
||||
|
||||
Reference in New Issue
Block a user