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

Feat: Compactar checkboxes de SelectorFamilia y optimizar layout
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s
Details

Browse Source 
- Hacer TODOS los checkboxes mucho más compactos:
  * Categorías: min-height 36px → 32px móvil, padding reducido
  * Subcategorías: min-height 32px → 28px móvil, padding reducido
  * Iconos: 1.25rem → 1rem → 0.875rem móvil
  * Texto: 0.875rem → 0.75rem → 0.6875rem móvil
  * Gaps y espaciados reducidos en toda la UI

- Cambiar layout de categorías (padres):
  * Móvil (<= 640px): flex wrap (como subcategorías)
  * Desktop (>= 768px): grid 3 columnas
  * Permite mejor uso del espacio horizontal

- Mantener subcategorías con flex wrap (ya estaba así)
- Ajustar touch-friendly para mantener usabilidad táctil
This commit is contained in:
josedario87
2025-10-18 16:39:33 -06:00
parent 0cdae3d4f5
commit d64083e831
1 changed files with 48 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
nuxt4/app/components/cata/SelectorFamilia.vue
View File

@@ -279,9 +279,9 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
/* Grid de categorías */ /* Grid de categorías */
.categorias-grid { .categorias-grid {
display: grid; display: flex;
grid-template-columns: repeat(2, minmax(0, 1fr)); flex-wrap: wrap;
gap: 0.5rem; gap: 0.375rem;
} }
.categoria-item { .categoria-item {
@@ -289,8 +289,8 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
min-height: 50px; min-height: 36px;
padding: 0.75rem; padding: 0.5rem 0.625rem;
} }
.categoria-item:focus { .categoria-item:focus {
@@ -305,13 +305,13 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
.categoria-content { .categoria-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
flex: 1 1 0%; flex: 1 1 0%;
} }
.categoria-icon { .categoria-icon {
width: 1.25rem; width: 1rem;
height: 1.25rem; height: 1rem;
flex-shrink: 0; flex-shrink: 0;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
@@ -323,36 +323,33 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
} }
.categoria-text { .categoria-text {
font-size: 0.875rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
text-align: left; text-align: left;
} }
.categoria-check { .categoria-check {
width: 1.25rem; width: 1rem;
height: 1.25rem; height: 1rem;
color: var(--cata-primary); color: var(--cata-primary);
flex-shrink: 0; flex-shrink: 0;
margin-left: 0.5rem; margin-left: 0.375rem;
} }
/* Grid de subcategorías */ /* Grid de subcategorías */
.subcategorias-grid { .subcategorias-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.375rem;
} }
.subcategoria-item { .subcategoria-item {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
padding-left: 0.75rem; padding: 0.375rem 0.5rem;
padding-right: 0.75rem; min-height: 32px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
min-height: 44px;
} }
.subcategoria-item:focus { .subcategoria-item:focus {
@@ -365,12 +362,12 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
} }
.subcategoria-text { .subcategoria-text {
font-size: 0.875rem; font-size: 0.75rem;
} }
.subcategoria-check { .subcategoria-check {
width: 1rem; width: 0.875rem;
height: 1rem; height: 0.875rem;
color: var(--cata-primary); color: var(--cata-primary);
} }
@@ -392,57 +389,65 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
/* Responsive */ /* Responsive */
@media (max-width: 640px) { @media (max-width: 640px) {
.categorias-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0.375rem;
}
.categoria-item { .categoria-item {
min-height: 48px; min-height: 32px;
padding: 0.625rem; padding: 0.375rem 0.5rem;
} }
.categoria-content { .categoria-content {
gap: 0.375rem; gap: 0.25rem;
} }
.categoria-icon { .categoria-icon {
width: 1rem; width: 0.875rem;
height: 1rem; height: 0.875rem;
} }
.categoria-text { .categoria-text {
font-size: 0.75rem; font-size: 0.6875rem;
}
.categoria-check {
width: 0.875rem;
height: 0.875rem;
margin-left: 0.25rem;
} }
.subcategoria-item { .subcategoria-item {
min-height: 42px; min-height: 28px;
padding-left: 0.625rem; padding: 0.25rem 0.375rem;
padding-right: 0.625rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
} }
.subcategoria-text { .subcategoria-text {
font-size: 0.75rem; font-size: 0.6875rem;
}
.subcategoria-check {
width: 0.75rem;
height: 0.75rem;
} }
} }
@media (min-width: 641px) { @media (min-width: 768px) {
.categorias-grid { .categorias-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
} }
.categoria-item { .categoria-item {
min-height: 55px; min-height: 40px;
} }
} }
/* Touch-friendly */ /* Touch-friendly */
@media (hover: none) and (pointer: coarse) { @media (hover: none) and (pointer: coarse) {
.categoria-item, .categoria-item {
min-height: 40px;
}
.subcategoria-item { .subcategoria-item {
min-height: 50px; min-height: 36px;
} }
} }
</style> </style>