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

@ -136,7 +136,7 @@ function getShiftLabel(shift: string) {
</div>
<div class="lang-toggle-side">
<div class="lang-pill" :class="{ 'lang-pill--active': onlyEnglish }" @click="onlyEnglish = !onlyEnglish">
<span class="material-icons">{{ onlyEnglish ? 'check_circle' : 'language' }}</span>
<span class="material-icons notranslate" translate="no">{{ onlyEnglish ? 'check_circle' : 'language' }}</span>
<span>English</span>
</div>
</div>
@ -148,10 +148,10 @@ function getShiftLabel(shift: string) {
</div>
<div v-else-if="taxiStore.error" class="state-container">
<span class="material-icons">error_outline</span>
<span class="material-icons notranslate" translate="no">error_outline</span>
<p>{{ taxiStore.error }}</p>
<button class="retry-btn" @click="taxiStore.loadTaxis()">
<span class="material-icons">refresh</span>
<span class="material-icons notranslate" translate="no">refresh</span>
{{ t('common.retry') || 'Reintentar' }}
</button>
</div>
@ -176,11 +176,11 @@ function getShiftLabel(shift: string) {
<div class="driver-info">
<div class="flex items-center gap-2 mb-0.5">
<h3 class="driver-name">{{ taxi.owner_name }}</h3>
<span v-if="taxi.is_accessible" class="material-icons text-blue-500 text-sm" title="Accesible para personas con discapacidad">accessible</span>
<span v-if="taxi.is_accessible" class="material-icons text-blue-500 text-sm notranslate" title="Accesible para personas con discapacidad" translate="no">accessible</span>
</div>
<div class="driver-meta">
<div class="rating-stars">
<span class="material-icons star-filled">star</span>
<span class="material-icons star-filled notranslate" translate="no">star</span>
<span class="rating-value">{{ (taxi.rating || 5).toFixed(1) }}</span>
</div>
<span class="meta-dot">·</span>
@ -199,22 +199,22 @@ function getShiftLabel(shift: string) {
<div class="card-details">
<div class="detail-item" v-if="taxi.corregimiento">
<span class="material-icons detail-icon">location_on</span>
<span class="material-icons detail-icon notranslate" translate="no">location_on</span>
<span class="detail-text">{{ taxi.corregimiento }}</span>
</div>
<div class="detail-item" v-if="taxi.vehicle_type">
<span class="material-icons detail-icon">local_taxi</span>
<span class="material-icons detail-icon notranslate" translate="no">local_taxi</span>
<span class="detail-text">{{ taxi.vehicle_type }}</span>
</div>
<div class="detail-item" v-if="taxi.english_speaking">
<span class="material-icons detail-icon">g_translate</span>
<span class="material-icons detail-icon notranslate" translate="no">g_translate</span>
<span class="detail-text">{{ t('taxi.englishLabel') }}</span>
</div>
</div>
<div class="card-actions">
<a :href="`tel:${taxi.phone_number}`" class="call-btn-premium" @click="handleCall(taxi)">
<span class="material-icons">phone_in_talk</span>
<span class="material-icons notranslate" translate="no">phone_in_talk</span>
<div class="btn-content">
<span class="btn-label">{{ t('taxi.callNow') }}</span>
<span class="btn-subtext">{{ taxi.phone_number }}</span>
@ -227,7 +227,7 @@ function getShiftLabel(shift: string) {
<div ref="observerTarget" class="h-10 w-full mt-4"></div>
<div v-if="filteredTaxis.length === 0" class="empty-state">
<span class="material-icons">no_accounts</span>
<span class="material-icons notranslate" translate="no">no_accounts</span>
<p>{{ t('taxi.noTaxisAvailable') }}</p>
</div>
</div>