Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Johan Samudio
2026-03-31 18:29:55 -05:00
parent a9b906099e
commit a60b079d94
43 changed files with 459 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/AppHeader.vue
View File

@ -25,7 +25,7 @@
<div class="sib-header-plain">
<div class="user-profile-optimized">
<div class="user-avatar-main">
<span class="material-icons user-icon-accent">person</span>
<span class="material-icons user-icon-accent notranslate" translate="no">person</span>
<div v-if="authStore.isAuthenticated" class="status-dot-active"></div>
</div>
<div class="user-info-text">
@ -39,11 +39,11 @@
<div v-if="authStore.isAdmin || authStore.isDriver || authStore.isPromoter" class="sidebar-group">
<div class="group-label">{{ t('menu.management') }}</div>
<div v-if="authStore.isAdmin" class="sidebar-link" @click="navigateTo('/admin')">
<span class="material-icons">shield_person</span>
<span class="material-icons notranslate" translate="no">shield_person</span>
<span class="link-text">{{ t('menu.adminPanel') }}</span>
</div>
<div v-if="authStore.isDriver && !authStore.isAdmin" class="sidebar-link" @click="navigateTo('/driver')">
<span class="material-icons">minor_crash</span>
<span class="material-icons notranslate" translate="no">minor_crash</span>
<span class="link-text">{{ t('menu.driverPanel') }}</span>
</div>
</div>
@ -51,24 +51,24 @@
<div v-if="!authStore.isAdmin" class="sidebar-group">
<div class="group-label">{{ t('menu.operations') }}</div>
<div class="sidebar-link" @click="navigateTo('/favorites')">
<span class="material-icons">favorite</span>
<span class="material-icons notranslate" translate="no">favorite</span>
<span class="link-text">{{ t('menu.favorites') }}</span>
</div>
<div class="sidebar-link" @click="toggleLanguage">
<span class="material-icons">translate</span>
<span class="material-icons notranslate" translate="no">translate</span>
<span class="link-text">{{ t('menu.translate') }}</span>
</div>
</div>
<div class="sidebar-link theme-toggle-row" @click="themeStore.toggleDarkMode">
<span class="material-icons">{{ themeStore.isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
<span class="material-icons notranslate" translate="no">{{ themeStore.isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
<span class="link-text">{{ themeStore.isDarkMode ? t('menu.lightMode') : t('menu.darkMode') }}</span>
</div>
<div v-if="!authStore.isAdmin" class="sidebar-group">
<div class="group-label">{{ t('menu.support') }}</div>
<div class="sidebar-link report-link-solid" @click="openReportModal">
<span class="material-icons">report_problem</span>
<span class="material-icons notranslate" translate="no">report_problem</span>
<span class="link-text">{{ t('menu.sendReport') }}</span>
</div>
</div>
@ -76,10 +76,10 @@
<div class="sidebar-footer-fixed">
<button v-if="!authStore.isAuthenticated" class="session-btn login-solid" @click="navigateTo('/login')">
<span class="material-icons">login</span> {{ t('menu.login') }}
<span class="material-icons notranslate" translate="no">login</span> {{ t('menu.login') }}
</button>
<button v-else class="session-btn logout-solid" @click="handleLogout">
<span class="material-icons">logout</span> {{ t('menu.logout') }}
<span class="material-icons notranslate" translate="no">logout</span> {{ t('menu.logout') }}
</button>
<div class="sib-tag-footer">SIB SYSTEM v1.2.0</div>
</div>

2
frontend/src/components/BottomNav.vue
View File

@ -78,7 +78,7 @@ onUnmounted(() => {
:class="{ active: isActive(item.path) }"
@click.stop="navigateTo(item.path)"
>
<span class="material-icons">{{ item.icon }}</span>
<span class="material-icons notranslate" translate="no">{{ item.icon }}</span>
<span class="nav-label">{{ t('navigation.' + item.name) }}</span>
</div>
</nav>

2
frontend/src/components/BusStopEditor.vue
View File

@ -35,7 +35,7 @@
Lat: {{ formData.latitude.toFixed(6) }}, Lon: {{ formData.longitude.toFixed(6) }}
</div>
<button @click="getCurrentLocation" class="gps-button" :disabled="isLoadingGps">
<span class="material-icons">my_location</span>
<span class="material-icons notranslate" translate="no">my_location</span>
{{ isLoadingGps ? 'Localizando...' : 'Usar GPS Preciso' }}
</button>
</div>

22
frontend/src/components/BusStopInfoModal.vue
View File

@ -90,27 +90,27 @@ watch(() => props.isOpen, async (isOpen) => {
/>
</div>
<p v-if="busStop.address" class="stop-address">
<span class="material-icons text-sm">location_on</span>
<span class="material-icons text-sm notranslate" translate="no">location_on</span>
{{ busStop.address }}
</p>
</div>
<button class="close-btn" @click="emit('close')">
<span class="material-icons">close</span>
<span class="material-icons notranslate" translate="no">close</span>
</button>
</div>
<!-- Amenities Chips -->
<div v-if="busStop" class="amenities-container">
<div v-if="busStop.has_shelter" class="amenity-chip" title="Shelter available">
<span class="material-icons md-16">roofing</span>
<span class="material-icons md-16 notranslate" translate="no">roofing</span>
<span>Cubierta</span>
</div>
<div v-if="busStop.has_seating" class="amenity-chip" title="Seating available">
<span class="material-icons md-16">event_seat</span>
<span class="material-icons md-16 notranslate" translate="no">event_seat</span>
<span>Asientos</span>
</div>
<div v-if="busStop.is_accessible" class="amenity-chip" title="Wheelchair accessible">
<span class="material-icons md-16">accessible</span>
<span class="material-icons md-16 notranslate" translate="no">accessible</span>
<span>Accesible</span>
</div>
</div>
@ -121,13 +121,13 @@ watch(() => props.isOpen, async (isOpen) => {
<div class="arrivals-header">
<h4 class="section-title">Próximos Buses</h4>
<div v-if="!isLoading" class="gps-badge" :class="hasGps ? 'gps-on' : 'gps-off'">
<span class="material-icons md-16">{{ hasGps ? 'gps_fixed' : 'gps_off' }}</span>
<span class="material-icons md-16 notranslate" translate="no">{{ hasGps ? 'gps_fixed' : 'gps_off' }}</span>
<span>{{ hasGps ? 'Tiempo real' : 'Horario' }}</span>
</div>
</div>
<div v-if="isLoading" class="loading-state">
<span class="material-icons spin">refresh</span>
<span class="material-icons spin notranslate" translate="no">refresh</span>
<p>Obteniendo horarios...</p>
</div>
@ -139,7 +139,7 @@ watch(() => props.isOpen, async (isOpen) => {
:style="{ animationDelay: `${index * 0.07}s` }"
>
<div class="route-info">
<span class="material-icons bus-icon">directions_bus</span>
<span class="material-icons bus-icon notranslate" translate="no">directions_bus</span>
<div class="route-texts">
<span class="route-name">{{ arrival.routeName }}</span>
<span class="departure-hint">Sale: {{ formatTo12Hour(arrival.departureTime) }}</span>
@ -162,7 +162,7 @@ watch(() => props.isOpen, async (isOpen) => {
</div>
<div v-else class="empty-state">
<span class="material-icons">schedule</span>
<span class="material-icons notranslate" translate="no">schedule</span>
<p>Sin servicio disponible en este momento</p>
<span class="empty-hint">Prueba más tarde o revisa el horario completo</span>
</div>
@ -171,11 +171,11 @@ watch(() => props.isOpen, async (isOpen) => {
<!-- Footer / Actions -->
<div class="modal-footer">
<button class="action-btn secondary" @click="startInternalNavigation">
<span class="material-icons md-18">navigation</span>
<span class="material-icons md-18 notranslate" translate="no">navigation</span>
Cómo llegar
</button>
<button class="action-btn primary" @click="loadArrivals">
<span class="material-icons md-18">refresh</span>
<span class="material-icons md-18 notranslate" translate="no">refresh</span>
Actualizar
</button>
</div>

2
frontend/src/components/FavoriteButton.vue
View File

@ -5,7 +5,7 @@
@click.stop="handleToggle"
:title="isFavorited ? 'Quitar de favoritos' : 'Agregar a favoritos'"
>
<span class="material-icons heart-icon">
<span class="material-icons heart-icon notranslate" translate="no">
{{ isFavorited ? 'favorite' : 'favorite_border' }}
</span>
</button>

4
frontend/src/components/ReportModal.vue
View File

@ -4,11 +4,11 @@
<div class="modal-container glass-effect">
<div class="modal-header">
<div class="title-with-icon">
<span class="material-icons report-icon">report_problem</span>
<span class="material-icons report-icon notranslate" translate="no">report_problem</span>
<h2>{{ t('report.title') }}</h2>
</div>
<button class="close-btn" @click="close">
<span class="material-icons">close</span>
<span class="material-icons notranslate" translate="no">close</span>
</button>
</div>

10
frontend/src/components/auth/LoginForm.vue
View File

@ -58,7 +58,7 @@ const handleLogin = async () => {
<div class="field-container">
<label>{{ t('auth.emailLabel') }}</label>
<div class="input-inner">
<span class="material-icons i-icon">mail_outline</span>
<span class="material-icons i-icon notranslate" translate="no">mail_outline</span>
<input
v-model="email"
type="email"
@ -73,7 +73,7 @@ const handleLogin = async () => {
<label>{{ t('auth.passLabel') }}</label>
</div>
<div class="input-inner">
<span class="material-icons i-icon">lock_outline</span>
<span class="material-icons i-icon notranslate" translate="no">lock_outline</span>
<input
v-model="password"
:type="showPassword ? 'text' : 'password'"
@ -81,7 +81,7 @@ const handleLogin = async () => {
required
/>
<button type="button" class="eye-btn" @click="showPassword = !showPassword">
<span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
<span class="material-icons notranslate" translate="no">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
</button>
</div>
</div>
@ -98,7 +98,7 @@ const handleLogin = async () => {
<!-- Error UI -->
<Transition name="shake">
<div v-if="errorMessage" class="error-toast">
<span class="material-icons">warning_amber</span>
<span class="material-icons notranslate" translate="no">warning_amber</span>
<span>{{ errorMessage }}</span>
</div>
</Transition>
@ -106,7 +106,7 @@ const handleLogin = async () => {
<button type="submit" class="submit-action" :disabled="isLoading">
<span v-if="isLoading" class="loader-white"></span>
<span v-else>{{ t('auth.loginTab') }}</span>
<span v-if="!isLoading" class="material-icons">arrow_forward</span>
<span v-if="!isLoading" class="material-icons notranslate" translate="no">arrow_forward</span>
</button>
<div class="switch-footer">

14
frontend/src/components/auth/RegisterForm.vue
View File

@ -58,7 +58,7 @@ const handleRegister = async () => {
<div class="register-form-content">
<div v-if="isSuccess" class="success-wrap">
<div class="glow-circle">
<span class="material-icons">check_circle</span>
<span class="material-icons notranslate" translate="no">check_circle</span>
</div>
<h2>¡Bienvenido!</h2>
<p>Tu cuenta ha sido creada exitosamente.</p>
@ -77,7 +77,7 @@ const handleRegister = async () => {
<div class="field-container">
<label>{{ t('auth.fullNameLabel') }}</label>
<div class="input-inner">
<span class="material-icons i-icon">badge</span>
<span class="material-icons i-icon notranslate" translate="no">badge</span>
<input
v-model="fullName"
type="text"
@ -90,7 +90,7 @@ const handleRegister = async () => {
<div class="field-container">
<label>{{ t('auth.emailLabel') }}</label>
<div class="input-inner">
<span class="material-icons i-icon">mail_outline</span>
<span class="material-icons i-icon notranslate" translate="no">mail_outline</span>
<input
v-model="email"
type="email"
@ -103,7 +103,7 @@ const handleRegister = async () => {
<div class="field-container">
<label>{{ t('auth.passLabel') }}</label>
<div class="input-inner">
<span class="material-icons i-icon">lock_outline</span>
<span class="material-icons i-icon notranslate" translate="no">lock_outline</span>
<input
v-model="password"
:type="showPassword ? 'text' : 'password'"
@ -112,7 +112,7 @@ const handleRegister = async () => {
minlength="8"
/>
<button type="button" class="eye-btn" @click="showPassword = !showPassword">
<span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
<span class="material-icons notranslate" translate="no">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
</button>
</div>
</div>
@ -129,7 +129,7 @@ const handleRegister = async () => {
<!-- Error UI -->
<Transition name="shake">
<div v-if="errorMessage" class="error-toast">
<span class="material-icons">warning_amber</span>
<span class="material-icons notranslate" translate="no">warning_amber</span>
<span>{{ errorMessage }}</span>
</div>
</Transition>
@ -137,7 +137,7 @@ const handleRegister = async () => {
<button type="submit" class="submit-action" :disabled="isLoading">
<span v-if="isLoading" class="loader-white"></span>
<span v-else>{{ t('auth.registerTab') }}</span>
<span v-if="!isLoading" class="material-icons">person_add_alt</span>
<span v-if="!isLoading" class="material-icons notranslate" translate="no">person_add_alt</span>
</button>
<div class="switch-footer">

4
frontend/src/components/common/AuthGuard.vue
View File

@ -48,7 +48,7 @@ function goToLogin() {
>
<div class="auth-card glass-effect">
<div class="auth-icon-circle">
<span class="material-icons">lock</span>
<span class="material-icons notranslate" translate="no">lock</span>
</div>
<h3 class="auth-title">{{ props.title }}</h3>
@ -56,7 +56,7 @@ function goToLogin() {
<div class="auth-actions">
<button class="primary-btn" @click="goToRegister">
<span class="material-icons">person_add</span>
<span class="material-icons notranslate" translate="no">person_add</span>
{{ props.actionLabel }}
</button>
<button class="secondary-btn" @click="goToLogin">

2
frontend/src/components/common/LoadingBranded.vue
View File

@ -17,7 +17,7 @@ defineProps({
<div class="loading-branded-container">
<div class="loading-pulse-ring">
<div class="loading-icon-wrap">
<span class="material-icons loading-icon">{{ icon }}</span>
<span class="material-icons loading-icon notranslate" translate="no">{{ icon }}</span>
</div>
</div>
<div class="loading-text-wrap">

2
frontend/src/components/common/OffersBadge.vue
View File

@ -8,7 +8,7 @@ defineProps<{
<div class="offers-container" :class="{ 'is-close': isClose }">
<div class="loader">
<div class="box">
<span class="material-icons offer-icon">{{ isClose ? 'close' : 'local_offer' }}</span>
<span class="material-icons offer-icon notranslate" translate="no">{{ isClose ? 'close' : 'local_offer' }}</span>
</div>
<!-- Anillos de energía flotantes -->
<div class="energy-ring"></div>

4
frontend/src/components/map/ArrivalBanner.vue
View File

@ -6,7 +6,7 @@
@click="$emit('click')"
>
<div class="banner-icon-bg">
<span class="material-icons text-white text-[16px]">directions_bus</span>
<span class="material-icons text-white text-[16px] notranslate" translate="no">directions_bus</span>
</div>
<div class="flex flex-col flex-1 truncate ml-2" style="min-width: 0;">
@ -32,7 +32,7 @@
@click.stop="$emit('close')"
class="ml-2 shrink-0 flex items-center gap-1 px-2.5 py-1 rounded-full bg-red-50 dark:bg-red-900/30 text-red-500 dark:text-red-400 text-[11px] font-bold hover:bg-red-100 dark:hover:bg-red-900/50 transition-colors"
>
<span class="material-icons" style="font-size:14px">close</span>
<span class="material-icons notranslate" style="font-size:14px" translate="no">close</span>
Cerrar ruta
</button>
</div>

14
frontend/src/components/map/ETACard.vue
View File

@ -33,7 +33,7 @@
@click="showTooltip = !showTooltip"
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
>
<span class="material-icons text-xl">info</span>
<span class="material-icons text-xl notranslate" translate="no">info</span>
</button>
<!-- Contenido del Tooltip -->
@ -43,7 +43,7 @@
class="absolute top-10 right-0 w-64 p-4 bg-gray-900/95 dark:bg-white/95 text-white dark:text-gray-900 rounded-2xl shadow-2xl backdrop-blur-sm text-[11px] leading-relaxed border border-white/20 dark:border-gray-200 pointer-events-auto"
>
<div class="flex items-start gap-2 mb-2">
<span class="material-icons text-yellow-400 text-sm">warning</span>
<span class="material-icons text-yellow-400 text-sm notranslate" translate="no">warning</span>
<span class="font-bold uppercase tracking-wider text-[10px]">Información de horarios</span>
</div>
<p class="opacity-90">
@ -61,7 +61,7 @@
<!-- Cabecera de la parada -->
<div v-if="stopName && !isLoading" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
<div class="bg-blue-100 dark:bg-blue-900/40 p-3 rounded-2xl flex-shrink-0">
<span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">place</span>
<span class="material-icons text-blue-600 dark:text-blue-400 text-3xl notranslate" translate="no">place</span>
</div>
<div class="flex-1">
<h3 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Tu parada asignada</h3>
@ -69,7 +69,7 @@
{{ stopName }}
</h2>
<div class="flex items-center gap-2 mt-2 text-sm text-gray-600 dark:text-gray-300 font-medium">
<span class="material-icons text-sm text-gray-400">directions_walk</span>
<span class="material-icons text-sm text-gray-400 notranslate" translate="no">directions_walk</span>
A {{ Math.round(walkDuration / 60) }} min caminando
<span class="text-gray-300 dark:text-gray-600">•</span>
{{ Math.round(walkDistance) }} metros
@ -89,7 +89,7 @@
<!-- Sin servicio -->
<div v-else-if="buses.length === 0" class="p-6 text-center">
<span class="material-icons text-4xl text-gray-300 mb-2">event_busy</span>
<span class="material-icons text-4xl text-gray-300 mb-2 notranslate" translate="no">event_busy</span>
<p class="text-gray-500 dark:text-gray-400 font-medium italic">
{{ t('schedules.noSchedules') }}
</p>
@ -116,7 +116,7 @@
'bg-gray-400 dark:bg-gray-600': bus.estado === 'pasó'
}"
>
<span class="material-icons text-[20px]">{{ bus.estado === 'pasó' ? 'history' : 'directions_bus' }}</span>
<span class="material-icons text-[20px] notranslate" translate="no">{{ bus.estado === 'pasó' ? 'history' : 'directions_bus' }}</span>
</div>
<div class="flex flex-col">
@ -125,7 +125,7 @@
</span>
<div class="flex flex-col gap-0">
<span class="text-[11px] font-semibold text-gray-500 dark:text-gray-400 flex items-center gap-1">
<span class="material-icons" style="font-size: 12px">schedule</span>
<span class="material-icons notranslate" style="font-size: 12px" translate="no">schedule</span>
{{ (bus.estado === 'en_camino' || bus.estado === 'pasó') ? 'Salió' : 'Sale' }} {{ bus.hora_salida }}
</span>
<span class="text-[10px] font-medium text-gray-500 dark:text-gray-400 pl-4">

6
frontend/src/components/map/PromoCarousel.vue
View File

@ -7,7 +7,7 @@
<span class="sheet-title">Actividades ⭐</span>
</div>
<button class="sheet-close" @click="$emit('close')">
<span class="material-icons">close</span>
<span class="material-icons notranslate" translate="no">close</span>
</button>
</div>
@ -18,7 +18,7 @@
>
<div class="sheet-card-area">
<button class="sheet-nav" @click="$emit('prev')" :disabled="coupons.length < 2">
<span class="material-icons">chevron_left</span>
<span class="material-icons notranslate" translate="no">chevron_left</span>
</button>
<Transition name="carousel-slide" mode="out-in">
@ -45,7 +45,7 @@
</Transition>
<button class="sheet-nav" @click="$emit('next')" :disabled="coupons.length < 2">
<span class="material-icons">chevron_right</span>
<span class="material-icons notranslate" translate="no">chevron_right</span>
</button>
</div>
</AuthGuard>

12
frontend/src/components/map/SearchOverlay.vue
View File

@ -9,7 +9,7 @@
@click="$emit('open')"
:title="t('map.search')"
>
<span class="material-icons">search</span>
<span class="material-icons notranslate" translate="no">search</span>
</div>
<!-- Normal Trigger -->
@ -18,7 +18,7 @@
class="uber-search-trigger-compact"
@click="$emit('open')"
>
<span class="material-icons search-icon">directions_bus</span>
<span class="material-icons search-icon notranslate" translate="no">directions_bus</span>
<span class="trigger-label">{{ t('map.viewRoutes') }}</span>
</div>
@ -31,13 +31,13 @@
<div v-if="showPanel" class="uber-search-panel">
<div class="uber-search-header">
<button class="back-btn" @click="$emit('close')">
<span class="material-icons">arrow_back</span>
<span class="material-icons notranslate" translate="no">arrow_back</span>
</button>
<div class="search-title">{{ t('map.availableRoutes') }}</div>
</div>
<!-- Search Input -->
<div class="search-input-wrapper">
<span class="material-icons search-field-icon">search</span>
<span class="material-icons search-field-icon notranslate" translate="no">search</span>
<input
v-model="searchQuery"
type="text"
@ -57,13 +57,13 @@
@click="$emit('select-route', route)"
>
<div class="result-icon">
<span class="material-icons">directions_bus</span>
<span class="material-icons notranslate" translate="no">directions_bus</span>
</div>
<div class="result-content">
<div class="result-name">{{ route.name }}</div>
<div class="result-address">{{ t('map.busRoute') }}</div>
</div>
<span class="material-icons check-icon">
<span class="material-icons check-icon notranslate" translate="no">
{{ route.id === selectedRouteId ? 'check_circle' : 'chevron_right' }}
</span>
</div>