From ae02ec3c1a50c63e0e1971226dfde99ad3277b27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Thu, 10 Apr 2025 19:42:06 -0300 Subject: [PATCH] Update and adapt language switcher to header --- src/i18n/translations.js | 4 +-- src/lib/FileViewer.svelte | 50 +---------------------------- src/lib/Header.svelte | 61 ++++++++++++++++++++++++++++++++--- src/lib/LanguageIcon.svelte | 63 ------------------------------------- 4 files changed, 60 insertions(+), 118 deletions(-) delete mode 100644 src/lib/LanguageIcon.svelte diff --git a/src/i18n/translations.js b/src/i18n/translations.js index 3cce9b3..ced34be 100644 --- a/src/i18n/translations.js +++ b/src/i18n/translations.js @@ -9,7 +9,7 @@ export default { "nav.donate": "Donate", "nav.about": "About", "main.title": "Upload files", - "main.languageSwitch": "Mudar para Português", + "main.languageSwitch": "🇧🇷", "main.fileSize": "Max file size is {{fileSize}}kb.", "main.supportedFormats": "Accepted formats: {{supportedFormats}}.", "main.render": "Render files", @@ -32,7 +32,7 @@ export default { "nav.donate": "Doe", "nav.about": "Sobre", "main.title": "Carregar arquivos", - "main.languageSwitch": "Switch to English", + "main.languageSwitch": "🇺🇸", "main.fileSize": "O tamanho máximo do arquivo é {{fileSize}}kb.", "main.supportedFormats": "Formatos aceitos: {{supportedFormats}}.", "main.render": "Renderizar arquivos", diff --git a/src/lib/FileViewer.svelte b/src/lib/FileViewer.svelte index 70cde48..a085fa3 100644 --- a/src/lib/FileViewer.svelte +++ b/src/lib/FileViewer.svelte @@ -2,11 +2,10 @@ import CardList from "./CardList.svelte"; import Dropzone from "./Dropzone.svelte"; import FileList from "./FileList.svelte"; - import LanguageIcon from './LanguageIcon.svelte'; import { filterFiles } from "../utils/filterFiles"; import { supportedFormats } from "../format-readers"; - import { t, locale, locales } from "../i18n" + import { t } from "../i18n" let acceptedFiles; let rejectedFiles; @@ -47,11 +46,6 @@ } }; - const onSwitchToOppositeLang = () => { - const oppositeLang = locales.find(item => item[0] !== $locale); - locale.set(oppositeLang[0]); - } -

{$t("main.title")}

- -
-
- -
- {$t("main.languageSwitch")} -
-

{@html $t("main.fileSize", { fileSize: fileRequirements.maxSize / 1000 })} @@ -101,40 +87,6 @@ align-items: center; } - .language-icon { - width: 30px; - height: 24px; - } - - .common-switch { - width: fit-content; - } - - .portuguese-switch { - color: #0C8F27; - border-bottom: 3px solid #0C8F27; - fill: #0C8F27 !important; - } - - .portuguese-switch:hover { - background: #0C8F27; - color: #ffffff; - fill: #ffffff !important; - } - - .english-switch{ - color: #BE0A2F; - border-bottom: 3px solid #BE0A2F; - width: fit-content; - fill: #BE0A2F !important; - } - - .english-switch:hover { - background: #BE0A2F; - color: #ffffff; - fill: #ffffff !important; - } - @media only screen and (max-device-width: 812px) { #form { width: 100%; diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte index a559270..2873279 100644 --- a/src/lib/Header.svelte +++ b/src/lib/Header.svelte @@ -15,10 +15,15 @@ { name: () => $t("nav.about"), href: '/about' }, ]; + const onSwitchToOppositeLang = () => { + const oppositeLang = locales.find(item => item[0] !== $locale); + locale.set(oppositeLang[0]); + } + let isMenuOpen = false; -

+
+ +
{#if matches} @@ -37,7 +44,6 @@ {/if} - -
+ + +
+ {$t("main.languageSwitch")} +
+ + +