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

style(map): move 'Cerrar ruta' pill design to ArrivalBanner X button and remove from ETACard to avoid redundancy

Browse Source
This commit is contained in:
Johan Samudio
2026-03-04 13:42:45 -05:00
parent af8ddd34a6
commit 0a6a0e8f7e
3 changed files with 10 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,8 +28,12 @@
</template>
</div>
<button @click.stop="$emit('close')" class="ml-2 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<span class="material-icons text-[18px] text-gray-400 hover:text-red-500">close</span>
<button
@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>
Cerrar ruta
</button>
</div>
</Transition>

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

@ -22,20 +22,10 @@
@touchstart="onTouchStart"
></div>
<!-- Barra superior: hint de drag + botón cerrar ruta -->
<div class="flex items-center justify-between mt-1 mb-0">
<p class="text-[10px] text-gray-400 pointer-events-none">
Desliza hacia abajo para minimizar
</p>
<button
@click="$emit('close-route')"
class="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"
title="Cerrar ruta"
>
<span class="material-icons" style="font-size:14px">close</span>
Cerrar ruta
</button>
</div>
<!-- Indicador visual de que se puede arrastrar -->
<p class="text-center text-[10px] text-gray-400 mt-1 mb-0 pointer-events-none">
Desliza hacia abajo para minimizar
</p>
<!-- Cabecera de la parada -->
<div v-if="stopName" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
@ -167,7 +157,6 @@ defineProps<{
const emit = defineEmits<{
(e: 'close'): void; // drag hacia abajo → pasar a fase navigating (minimizar)
(e: 'close-route'): void; // botón X → cerrar ruta completamente
(e: 'refresh'): void;
}>();