fix: Replace emoji flags with CDN flag images
- Use flagcdn.com for reliable flag display - Fix double text issue on devices without emoji support - Flags now render consistently across all devices
This commit is contained in:
@@ -36,7 +36,12 @@ if (typeof window !== 'undefined') {
|
|||||||
@click.stop="isOpen = !isOpen"
|
@click.stop="isOpen = !isOpen"
|
||||||
:title="$t('settings.language')"
|
:title="$t('settings.language')"
|
||||||
>
|
>
|
||||||
<span class="text-lg">{{ currentLocale.flag }}</span>
|
<img
|
||||||
|
:src="`https://flagcdn.com/w20/${currentLocale.flag.toLowerCase()}.png`"
|
||||||
|
:srcset="`https://flagcdn.com/w40/${currentLocale.flag.toLowerCase()}.png 2x`"
|
||||||
|
:alt="currentLocale.name"
|
||||||
|
class="w-5 h-auto rounded-sm"
|
||||||
|
>
|
||||||
<span class="text-xs font-medium text-gray-600 dark:text-gray-300 uppercase">
|
<span class="text-xs font-medium text-gray-600 dark:text-gray-300 uppercase">
|
||||||
{{ currentLocale.code }}
|
{{ currentLocale.code }}
|
||||||
</span>
|
</span>
|
||||||
@@ -74,7 +79,12 @@ if (typeof window !== 'undefined') {
|
|||||||
}"
|
}"
|
||||||
@click="selectLocale(loc.code)"
|
@click="selectLocale(loc.code)"
|
||||||
>
|
>
|
||||||
<span class="text-lg">{{ loc.flag }}</span>
|
<img
|
||||||
|
:src="`https://flagcdn.com/w20/${loc.flag.toLowerCase()}.png`"
|
||||||
|
:srcset="`https://flagcdn.com/w40/${loc.flag.toLowerCase()}.png 2x`"
|
||||||
|
:alt="loc.name"
|
||||||
|
class="w-5 h-auto rounded-sm"
|
||||||
|
>
|
||||||
<span class="flex-1 text-left">{{ loc.name }}</span>
|
<span class="flex-1 text-left">{{ loc.name }}</span>
|
||||||
<svg
|
<svg
|
||||||
v-if="loc.code === locale"
|
v-if="loc.code === locale"
|
||||||
|
|||||||
14
src/i18n.ts
14
src/i18n.ts
@@ -8,13 +8,13 @@ import ru from './locales/ru'
|
|||||||
import pl from './locales/pl'
|
import pl from './locales/pl'
|
||||||
|
|
||||||
export const SUPPORTED_LOCALES = [
|
export const SUPPORTED_LOCALES = [
|
||||||
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
|
{ code: 'de', name: 'Deutsch', flag: 'DE' },
|
||||||
{ code: 'es', name: 'Español', flag: '🇪🇸' },
|
{ code: 'es', name: 'Español', flag: 'ES' },
|
||||||
{ code: 'en', name: 'English', flag: '🇬🇧' },
|
{ code: 'en', name: 'English', flag: 'GB' },
|
||||||
{ code: 'ar', name: 'العربية', flag: '🇸🇦', rtl: true },
|
{ code: 'ar', name: 'العربية', flag: 'SA', rtl: true },
|
||||||
{ code: 'ru', name: 'Русский', flag: '🇷🇺' },
|
{ code: 'ru', name: 'Русский', flag: 'RU' },
|
||||||
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
|
{ code: 'fr', name: 'Français', flag: 'FR' },
|
||||||
{ code: 'pl', name: 'Polski', flag: '🇵🇱' },
|
{ code: 'pl', name: 'Polski', flag: 'PL' },
|
||||||
] as const
|
] as const
|
||||||
|
|
||||||
export type LocaleCode = typeof SUPPORTED_LOCALES[number]['code']
|
export type LocaleCode = typeof SUPPORTED_LOCALES[number]['code']
|
||||||
|
|||||||
Reference in New Issue
Block a user