Feat: Hacer accordions más compactos - reducir padding y gaps
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m7s

This commit is contained in:
2025-10-18 14:26:12 -06:00
parent af6664c931
commit 2737a9c39b
2 changed files with 10 additions and 11 deletions

View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="resumen-muestra flex items-center gap-3 w-full"> <div class="resumen-muestra flex items-center gap-2 w-full">
<!-- Número de muestra --> <!-- Número de muestra -->
<div class="muestra-numero cata-text font-bold text-lg flex-shrink-0"> <div class="muestra-numero cata-text font-bold flex-shrink-0">
#{{ muestra.muestraId }} #{{ muestra.muestraId }}
</div> </div>
<!-- Nombre de muestra --> <!-- Nombre de muestra -->
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="muestra-nombre cata-text font-semibold truncate"> <div class="muestra-nombre cata-text font-semibold truncate text-sm">
{{ muestra.nombre }} {{ muestra.nombre }}
</div> </div>
</div> </div>
@@ -27,17 +27,16 @@ defineProps<ResumenMuestraProps>()
<style scoped> <style scoped>
.resumen-muestra { .resumen-muestra {
min-height: 60px; min-height: 36px;
padding: 0.5rem 0;
} }
.muestra-numero { .muestra-numero {
font-size: 1.25rem; font-size: 1rem;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.muestra-numero { .muestra-numero {
font-size: 1rem; font-size: 0.875rem;
} }
} }
</style> </style>

View File

@@ -128,14 +128,14 @@
</div> </div>
<!-- Accordions de Muestras --> <!-- Accordions de Muestras -->
<div class="muestras-container container mx-auto px-4 py-6"> <div class="muestras-container container mx-auto px-4 py-4">
<UAccordion <UAccordion
v-model="accordionAbierto" v-model="accordionAbierto"
type="multiple" type="multiple"
:items="accordionItems" :items="accordionItems"
:ui="{ :ui="{
item: 'mb-4 last:mb-0 cata-outline-box rounded-lg overflow-hidden', item: 'mb-2 last:mb-0 cata-outline-box rounded-lg overflow-hidden',
trigger: 'accordion-trigger w-full px-4 py-3 transition-colors', trigger: 'accordion-trigger w-full px-3 py-2 transition-colors',
content: 'border-t border-default', content: 'border-t border-default',
}" }"
> >
@@ -148,7 +148,7 @@
<!-- Content con FormularioMuestra --> <!-- Content con FormularioMuestra -->
<template #content="{ item }"> <template #content="{ item }">
<div class="p-4"> <div class="p-3">
<CataFormularioMuestra <CataFormularioMuestra
v-if="sesionActiva && obtenerMuestraPorValue(item.value)" v-if="sesionActiva && obtenerMuestraPorValue(item.value)"
:muestra="obtenerMuestraPorValue(item.value)!" :muestra="obtenerMuestraPorValue(item.value)!"