Feat: Hacer chips ultra-compactos en ResumenMuestra
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s
- Reducir font-size de chips de 0.75rem a 0.625rem (0.5625rem en mobile) - Reducir padding de chips de 0.25/0.5rem a 0.15/0.35rem - Reducir gaps: entre chips de 1rem a 0.5rem, en línea de 2rem a 1.5rem - Reducir tamaño de puntaje final y nombre de muestra - Abreviar todas las etiquetas de chips: * F/A (Fragancia/Aroma), Sab (Sabor), Gus (Gustos), Sen (Sensación) * Fra, Aro, Sb, S.R (Sabor Residual), Aci, Dul, Sn, Imp * NoUnif (No Uniformes), Defec (Defectuosas) - Eliminar espacios en arrays join (coma sin espacio) - Optimizar responsive para mobile aún más compacto
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="resumen-muestra w-full">
|
||||
<!-- Primera línea: Número, nombre y puntaje -->
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="flex items-center gap-1.5 mb-1">
|
||||
<!-- Número de muestra -->
|
||||
<div class="muestra-numero cata-text font-bold flex-shrink-0">
|
||||
#{{ muestra.muestraId }}
|
||||
@@ -9,102 +9,102 @@
|
||||
|
||||
<!-- Nombre de muestra -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="muestra-nombre cata-text font-semibold truncate text-sm">
|
||||
<div class="muestra-nombre cata-text font-semibold truncate">
|
||||
{{ muestra.nombre }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Puntaje final -->
|
||||
<div class="puntaje-final flex-shrink-0 px-2 py-1 rounded-md" :class="puntajeClass">
|
||||
<span class="text-xs font-bold">{{ muestra.puntajeFinal }}</span>
|
||||
<div class="puntaje-final flex-shrink-0 px-1.5 py-0.5 rounded" :class="puntajeClass">
|
||||
<span class="font-bold">{{ muestra.puntajeFinal }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Segunda línea: Chips informativos -->
|
||||
<div class="chips-container flex flex-wrap gap-1">
|
||||
<div class="chips-container flex flex-wrap gap-0.5">
|
||||
<!-- Fragancia/Aroma -->
|
||||
<div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="chip">
|
||||
<span class="chip-label">Frag/Aro:</span>
|
||||
<span class="chip-label">F/A:</span>
|
||||
<span class="chip-value">{{ categoriasFragancia }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Sabor -->
|
||||
<div v-if="muestra.saborNotas.categorias.length > 0" class="chip">
|
||||
<span class="chip-label">Sabor:</span>
|
||||
<span class="chip-label">Sab:</span>
|
||||
<span class="chip-value">{{ categoriasSabor }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Gustos predominantes -->
|
||||
<div v-if="muestra.gustosPredominantes.length > 0" class="chip">
|
||||
<span class="chip-label">Gustos:</span>
|
||||
<span class="chip-label">Gus:</span>
|
||||
<span class="chip-value">{{ muestra.gustosPredominantes.join(', ') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Sensación en boca -->
|
||||
<div v-if="muestra.sensacionEnBoca.length > 0" class="chip">
|
||||
<span class="chip-label">Sensación:</span>
|
||||
<span class="chip-label">Sen:</span>
|
||||
<span class="chip-value">{{ muestra.sensacionEnBoca.join(', ') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Valores Descriptivo/Afectivo -->
|
||||
<div v-if="muestra.intensidades.fragancia.afectiva !== null || muestra.intensidades.fragancia.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">Fragancia:</span>
|
||||
<span class="chip-label">Fra:</span>
|
||||
<span v-if="muestra.intensidades.fragancia.afectiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<div v-if="muestra.intensidades.aroma.afectiva !== null || muestra.intensidades.aroma.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">Aroma:</span>
|
||||
<span class="chip-label">Aro:</span>
|
||||
<span v-if="muestra.intensidades.aroma.afectiva !== null" class="chip-value">{{ muestra.intensidades.aroma.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<div v-if="muestra.intensidades.sabor.afectiva !== null || muestra.intensidades.sabor.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">Sabor:</span>
|
||||
<span class="chip-label">Sb:</span>
|
||||
<span v-if="muestra.intensidades.sabor.afectiva !== null" class="chip-value">{{ muestra.intensidades.sabor.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<div v-if="muestra.intensidades.saborResidual.afectiva !== null || muestra.intensidades.saborResidual.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">S.Residual:</span>
|
||||
<span class="chip-label">S.R:</span>
|
||||
<span v-if="muestra.intensidades.saborResidual.afectiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<div v-if="muestra.intensidades.acidez.afectiva !== null || muestra.intensidades.acidez.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">Acidez:</span>
|
||||
<span class="chip-label">Aci:</span>
|
||||
<span v-if="muestra.intensidades.acidez.afectiva !== null" class="chip-value">{{ muestra.intensidades.acidez.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<div v-if="muestra.intensidades.dulzor.afectiva !== null || muestra.intensidades.dulzor.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">Dulzor:</span>
|
||||
<span class="chip-label">Dul:</span>
|
||||
<span v-if="muestra.intensidades.dulzor.afectiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<div v-if="muestra.intensidades.sensacionBoca.afectiva !== null || muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">Sensación:</span>
|
||||
<span class="chip-label">Sn:</span>
|
||||
<span v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<div v-if="muestra.intensidades.impresionGlobal.afectiva !== null || muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip">
|
||||
<span class="chip-label">Impresión:</span>
|
||||
<span class="chip-label">Imp:</span>
|
||||
<span v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.afectiva }}❤️</span>
|
||||
<span v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}📊</span>
|
||||
</div>
|
||||
|
||||
<!-- Tazas no uniformes -->
|
||||
<div v-if="muestra.tazasNoUniformes.length > 0" class="chip chip-warning">
|
||||
<span class="chip-label">No Uniformes:</span>
|
||||
<span class="chip-value">{{ muestra.tazasNoUniformes.join(', ') }}</span>
|
||||
<span class="chip-label">NoUnif:</span>
|
||||
<span class="chip-value">{{ muestra.tazasNoUniformes.join(',') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Tazas defectuosas -->
|
||||
<div v-if="muestra.tazasDefectuosas.length > 0" class="chip chip-error">
|
||||
<span class="chip-label">Defectuosas:</span>
|
||||
<span class="chip-value">{{ muestra.tazasDefectuosas.join(', ') }}</span>
|
||||
<span class="chip-label">Defec:</span>
|
||||
<span class="chip-value">{{ muestra.tazasDefectuosas.join(',') }}</span>
|
||||
<span v-if="muestra.defecto" class="chip-value">({{ muestra.defecto }})</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,14 +148,19 @@ const puntajeClass = computed(() => {
|
||||
}
|
||||
|
||||
.muestra-numero {
|
||||
font-size: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.muestra-nombre {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
/* Puntaje final */
|
||||
.puntaje-final {
|
||||
border: 1px solid;
|
||||
min-width: 2.5rem;
|
||||
min-width: 2rem;
|
||||
text-align: center;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.puntaje-excelente {
|
||||
@@ -190,16 +195,16 @@ const puntajeClass = computed(() => {
|
||||
|
||||
/* Chips */
|
||||
.chips-container {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
font-size: 0.625rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
gap: 0.15rem;
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 0.2rem;
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
||||
}
|
||||
@@ -271,15 +276,25 @@ const puntajeClass = computed(() => {
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.muestra-numero {
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.muestra-nombre {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.puntaje-final {
|
||||
font-size: 0.625rem;
|
||||
min-width: 1.75rem;
|
||||
}
|
||||
|
||||
.chips-container {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.5625rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 0.2rem 0.4rem;
|
||||
padding: 0.125rem 0.3rem;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user