fix: prevent Google Translate from breaking Material Icons and fix lang attribute

This commit is contained in:
2026-03-31 18:29:55 -05:00
parent a9b906099e
commit a60b079d94
43 changed files with 459 additions and 320 deletions

View File

@ -83,7 +83,7 @@ const correlimientos = computed(() => {
<!-- Header -->
<div class="px-6 pt-12 pb-4 flex items-center justify-between sticky top-0 z-50 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md">
<button @click="router.back()" class="size-10 flex items-center justify-center rounded-full bg-slate-100 dark:bg-card-dark text-slate-600 dark:text-gray-300 active:scale-95 transition-transform">
<span class="material-icons text-[20px]">arrow_back</span>
<span class="material-icons text-[20px] notranslate" translate="no">arrow_back</span>
</button>
<h1 class="text-xl font-extrabold tracking-tight text-primary uppercase italic">SIB</h1>
<div class="size-10"></div>
@ -97,7 +97,7 @@ const correlimientos = computed(() => {
class="flex-1 py-3 px-4 rounded-[2rem] flex items-center justify-center gap-2 text-sm font-bold transition-all"
:class="activeTab === 'routes' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
>
<span class="material-icons text-lg">directions_bus</span>
<span class="material-icons text-lg notranslate" translate="no">directions_bus</span>
{{ t('routesView.busTab') }}
</button>
<button
@ -105,7 +105,7 @@ const correlimientos = computed(() => {
class="flex-1 py-3 px-4 rounded-[2rem] flex items-center justify-center gap-2 text-sm font-bold transition-all"
:class="activeTab === 'taxis' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
>
<span class="material-icons text-lg">local_taxi</span>
<span class="material-icons text-lg notranslate" translate="no">local_taxi</span>
{{ t('routesView.taxiTab') }}
</button>
</div>
@ -115,7 +115,7 @@ const correlimientos = computed(() => {
<div v-if="activeTab === 'routes'" class="space-y-4">
<div class="relative group">
<div class="flex items-center gap-3 px-4 h-14 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-input-dark">
<span class="material-icons text-primary font-bold">location_on</span>
<span class="material-icons text-primary font-bold notranslate" translate="no">location_on</span>
<input
v-model="originSearch"
@keyup.enter="handleBusSearch"
@ -126,7 +126,7 @@ const correlimientos = computed(() => {
</div>
<div class="relative group">
<div class="flex items-center gap-3 px-4 h-14 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-input-dark">
<span class="material-icons text-primary font-bold">flag</span>
<span class="material-icons text-primary font-bold notranslate" translate="no">flag</span>
<input
v-model="destinationSearch"
@keyup.enter="handleBusSearch"
@ -144,7 +144,7 @@ const correlimientos = computed(() => {
<div class="flex-1 space-y-4">
<div class="relative">
<div class="flex items-center gap-3 px-4 h-14 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-input-dark">
<span class="material-icons text-primary font-bold">near_me</span>
<span class="material-icons text-primary font-bold notranslate" translate="no">near_me</span>
<select
v-model="selectedCorregimiento"
@change="handleTaxiFilter"
@ -153,7 +153,7 @@ const correlimientos = computed(() => {
<option value="">{{ t('routesView.allCorregimientos') }}</option>
<option v-for="c in correlimientos" :key="c" :value="c">{{ c }}</option>
</select>
<span class="material-icons ml-auto text-gray-500 text-sm">unfold_more</span>
<span class="material-icons ml-auto text-gray-500 text-sm notranslate" translate="no">unfold_more</span>
</div>
</div>
</div>
@ -164,7 +164,7 @@ const correlimientos = computed(() => {
class="size-10 rounded-lg border-2 border-primary flex items-center justify-center bg-transparent cursor-pointer transition-colors"
:class="englishOnly ? 'bg-primary' : ''"
>
<span class="material-icons text-slate-900" v-if="englishOnly">check</span>
<span class="material-icons text-slate-900 notranslate" v-if="englishOnly" translate="no">check</span>
</div>
</div>
</div>
@ -197,7 +197,7 @@ const correlimientos = computed(() => {
<div class="flex justify-between items-center">
<div class="flex items-center gap-4">
<div class="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary">
<span class="material-icons text-[32px]">directions_bus</span>
<span class="material-icons text-[32px] notranslate" translate="no">directions_bus</span>
</div>
<div>
<div class="flex items-center gap-2">
@ -243,7 +243,7 @@ const correlimientos = computed(() => {
<div class="flex items-center gap-4">
<div class="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary overflow-hidden">
<img v-if="taxi.image_url" :src="taxi.image_url" loading="lazy" decoding="async" class="w-full h-full object-cover">
<span v-else class="material-icons text-[32px]">local_taxi</span>
<span v-else class="material-icons text-[32px] notranslate" translate="no">local_taxi</span>
</div>
<div>
<div class="flex items-center gap-2">