version con las correcciones de texto y preferencias por defecto. Se ha dotado de un diseño responsive a la aplicación

v2_responsive
dev 12 months ago
parent 8dc5d2c722
commit 3ca606f3f5

@ -8,7 +8,7 @@
const DEFAULT_IMAGE = "https://placehold.co/80x40/cccccc/333333?text=N/A";
let { opcion, estancia, filtro, seleccionada, onclick } = $props<{
let { opcion, filtro, seleccionada, onclick } = $props<{
opcion : Opcion,
filtro? : Filtro,
estancia: string,

@ -7,7 +7,7 @@ import { popupImagen } from "../stores/popups.svelte";
imagen?: string;
}>();
function handleOnclick (e: Event) {
function handleOnclick () {
if (imagen) popupImagen.open(imagen ,titulo);
}
@ -18,8 +18,8 @@ import { popupImagen } from "../stores/popups.svelte";
<div role="button"
tabindex="0"
class="w-full group flex items-center text-left justify-between p-2 rounded-lg bg-gray-200 hover:bg-slate-400 cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-cyan-500 text-gray-900 hover:text-white"
onclick={(e) => handleOnclick(e) }
onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'Space') handleOnclick(e); }}
onclick={handleOnclick}
onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'Space') handleOnclick(); }}
>
<span class="text-xs font-medium">{nombre ?? 'Sin Nombre'}</span>
</div>

@ -1,6 +1,5 @@
<script lang="ts">
import {appState, imageSrc, setEstanciaSeleccionada} from "../stores/configurador.svelte.js";
import ImagenEstancia from "./ImagenEstancia.svelte";
import {imageSrc, setEstanciaSeleccionada} from "../stores/configurador.svelte.js";
import type {Estancia} from "../../data/data_types";
import EstanciaOpciones from "./EstanciaOpciones.svelte";
import {navegationState} from "../stores/navegation.svelte.js";

@ -12,7 +12,7 @@
function goToConfigurador() {
appState.estanciaSeleccionada = key;
navegationState.activeSection = 'configurador';
navegationState.activePage = 'cfg';
}
</script>

@ -18,11 +18,14 @@
}
// Nueva función para cerrar menú al hacer click fuera (opcional)
/*
function handleBackdropClick(event: MouseEvent) {
if ((event.target as HTMLElement).classList.contains('mobile-menu-backdrop')) {
mobileMenuOpen = false;
}
}
*/
</script>
<nav class="bg-white shadow-md border-b border-gray-200 sticky top-0 z-50">
@ -86,7 +89,7 @@
<button
type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400
hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2
hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 z-400
focus:ring-inset focus:ring-blue-500 transition-colors duration-200
{mobileMenuOpen ? 'bg-gray-100 text-gray-600' : ''}"
onclick={toggleMobileMenu}
@ -112,20 +115,20 @@
<!-- Menú móvil con slide funcionando -->
{#if mobileMenuOpen}
<div
class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
class="fixed inset-0 bg-white bg-opacity-90 z-40 md:hidden"
transition:fade={{ duration: 150 }}
onclick={() => mobileMenuOpen = false}>
onclick={() => mobileMenuOpen = false} >
<!-- Menú que desliza desde arriba -->
<div
class="absolute top-16 left-0 right-0 bg-white shadow-xl border-t border-gray-200
max-h-[calc(100vh-4rem)] overflow-y-auto"
<div class="absolute top-16 left-0 right-0 bg-white shadow-xl border-t border-gray-200 z-200
max-h-[calc(100vh-4rem)] overflow-y-auto"
transition:slide={{
duration: 300,
axis: 'Y',
axis: 'y',
easing: 'cubic-out'
}}>
<div class="px-2 pt-2 pb-4 space-y-1 sm:px-3">
<div class="px-2 pt-2 pb-4 space-y-1 sm:px-3" >
{#each navegationState.sectionsInfo as section}
{#if section.menu }
<button
@ -148,9 +151,11 @@
</button>
{/if}
{/each}
<div class="px-4 py-3 border-t border-gray-200 mt-2">
<PdfBoton />
</div>
</div>
</div>
</div>

@ -1,5 +1,5 @@
export type PageId = 'ini' | 'cfg' | 'sel' | 'at';
export type PageId = 'ini' | 'cfg' | 'sel' ;
interface PageInfo {
id : PageId,
@ -30,7 +30,6 @@ export const navegationState = {
{ id: 'ini', label: 'Inicio', menu: false },
{ id: 'cfg', label: 'Personalizar', mome: 'Personalizar Estancias', menu: true },
{ id: 'sel', label: 'Mi Selección', mome: 'Acabados y opciones seleccionadas', menu: true },
{ id: 'at' , label: 'Active Thing', menu: false },
] as PageInfo[],
}

@ -2,9 +2,6 @@
import {
selections,
getAvailableGroups,
imageSrc,
appState,
totalEstanciaOptions, totalOptions, getIncidencias, setEstanciaSeleccionada
} from "../stores/configurador.svelte.js";
import { proyecto } from "../../data/data_proyecto";
@ -12,7 +9,6 @@
import GalletaMensaje from "../components/GalletaMensaje.svelte";
import EstanciaFicha from "../components/EstanciaFicha.svelte";
import {formatearPrecio} from "../utils/formaters";
import Incidencias from "../components/Incidencias.svelte";
import {navegationState} from "../stores/navegation.svelte";
import PdfBoton from "../components/PdfBoton.svelte";

Loading…
Cancel
Save

Powered by TurnKey Linux.