nucleo000/cataRio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Mejorar badges y chips de la interfaz
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m5s
Details

Browse Source 
- Reemplazar texto "Target:" por icono de diana (i-lucide-target)
  - Mostrar icono con color primario + puntaje deseado
  - Más visual e intuitivo

- Igualar opacidad de badges descriptivo y afectivo
  - Cambiar todos los badges descriptivos de opacity: 0.4 a 0.7
  - Ahora ambos badges tienen la misma tonalidad/visibilidad
  - Aplica en todas las categorías (Fragancia, Aroma, Sabor, etc.)

- Hacer badges de filtro rectangulares
  - Cambiar border-radius de subcategoria-chip de 9999px a 0.375rem
  - Consistencia visual con el resto de badges y botones rectangulares
  - Aplica a filtros de subcategorías debajo de tabs
This commit is contained in:
josedario87
2025-10-19 01:31:35 -06:00
parent fd0de74c2e
commit 7ba16e99bf
3 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
nuxt4/app/components/cata/FormularioMuestra.vue
View File

@@ -91,7 +91,7 @@
Fragancia Fragancia
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
@@ -125,7 +125,7 @@
Aroma Aroma
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
@@ -159,7 +159,7 @@
Sabor Sabor
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
@@ -193,7 +193,7 @@
Sabor Residual Sabor Residual
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
@@ -227,7 +227,7 @@
Acidez Acidez
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
@@ -261,7 +261,7 @@
Dulzor Dulzor
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
@@ -295,7 +295,7 @@
Sensación en la Boca Sensación en la Boca
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
@@ -329,7 +329,7 @@
Impresión Global Impresión Global
</h5> </h5>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
@@ -488,7 +488,7 @@
Fragancia Fragancia
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
@@ -520,7 +520,7 @@
Aroma Aroma
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
@@ -552,7 +552,7 @@
Sabor Sabor
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
@@ -584,7 +584,7 @@
Sabor Residual Sabor Residual
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
@@ -616,7 +616,7 @@
Acidez Acidez
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
@@ -648,7 +648,7 @@
Dulzor Dulzor
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
@@ -680,7 +680,7 @@
Sensación en la Boca Sensación en la Boca
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
@@ -712,7 +712,7 @@
Impresión Global Impresión Global
</h6> </h6>
<div class="flex gap-2"> <div class="flex gap-2">
<UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }} 📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
</UBadge> </UBadge>
<UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs"> <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">

5
nuxt4/app/components/cata/ModalAsignacionRapida.vue
View File

@@ -79,8 +79,9 @@
<template #footer> <template #footer>
<div class="flex items-center justify-between w-full"> <div class="flex items-center justify-between w-full">
<!-- Puntaje target a la izquierda --> <!-- Puntaje target a la izquierda -->
<div v-if="paso === 2" class="cata-text font-semibold"> <div v-if="paso === 2" class="flex items-center gap-2 cata-text font-semibold">
Target: {{ puntajeDeseado }} <UIcon name="i-lucide-target" class="w-5 h-5" :style="{ color: 'var(--cata-primary)' }" />
<span>{{ puntajeDeseado }}</span>
</div> </div>
<div v-else></div> <div v-else></div>

2
nuxt4/app/pages/cata/sesion.vue
View File

@@ -491,7 +491,7 @@ onMounted(() => {
.subcategoria-chip { .subcategoria-chip {
font-size: 0.75rem; font-size: 0.75rem;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 9999px; border-radius: 0.375rem;
white-space: nowrap; white-space: nowrap;
transition: all 0.2s; transition: all 0.2s;
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent); background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);