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

fix: mejorar visualización responsive en móvil para metabase-debug
All checks were successful
build-and-deploy / build (push) Successful in 42s
Details
build-and-deploy / deploy (push) Successful in 3s
Details

Browse Source 
Ajustes realizados:

Components:
- MetabaseCardDisplay: grid responsive, queries con wrap, botones apilables
- MetabaseCardsTable: filtros verticales en móvil, acciones con wrap

Page:
- Header responsive con elementos apilados
- Stats en grid 2x2 para móvil, 4 columnas en desktop
- Tamaños de fuente adaptados con breakpoints

Todas las queries SQL y JSON ahora usan whitespace-pre-wrap y break-words
para aprovechar el espacio vertical en lugar de scroll horizontal.
This commit is contained in:
josedario87
2025-10-14 02:21:51 -06:00
parent 214d9a17d5
commit 585d31a374
3 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nuxt4-app/app/pages/metabase-debug.vue
View File

@@ -2,10 +2,10 @@
<div class="container mx-auto px-4 py-8">
<div class="space-y-6">
<!-- Header -->
<div class="flex justify-between items-start">
<div>
<h1 class="text-3xl font-bold">Metabase Debug</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
<div class="flex-1">
<h1 class="text-2xl sm:text-3xl font-bold">Metabase Debug</h1>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">
Herramienta de debugging para queries de Metabase
</p>
</div>
@@ -16,38 +16,39 @@
icon="i-heroicons-arrow-path"
color="primary"
variant="soft"
class="w-full sm:w-auto"
>
Actualizar
</UButton>
</div>
<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
<UCard>
<div class="text-center">
<div class="text-3xl font-bold text-primary">{{ cards.length }}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Total Cards</div>
<div class="text-2xl sm:text-3xl font-bold text-primary">{{ cards.length }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Cards</div>
</div>
</UCard>
<UCard>
<div class="text-center">
<div class="text-3xl font-bold text-primary">{{ nativeQueries }}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
<div class="text-2xl sm:text-3xl font-bold text-primary">{{ nativeQueries }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
</div>
</UCard>
<UCard>
<div class="text-center">
<div class="text-3xl font-bold text-green-600">{{ queryBuilderQueries }}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Query Builder</div>
<div class="text-2xl sm:text-3xl font-bold text-green-600">{{ queryBuilderQueries }}</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Query Builder</div>
</div>
</UCard>
<UCard>
<div class="text-center">
<div class="text-3xl font-bold text-gray-600">{{ panoramaQueries.length }}/9</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
<div class="text-2xl sm:text-3xl font-bold text-gray-600">{{ panoramaQueries.length }}/9</div>
<div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
</div>
</UCard>
</div>