pablo/crochet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added mobile support

Browse Source
This commit is contained in:
Pablo Moreno
2026-07-08 14:45:01 +02:00
parent a5b5783556
commit ebb1fc2906
3 changed files with 170 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+43 -34
View File
@@ -13,42 +13,51 @@
<body>
<main>
<div class="flex gap-4 p-4 items-start">
<header class="flex flex-wrap items-center justify-between gap-2 p-4 no-print">
<h1 class="text-xl font-semibold">Crochet</h1>
<div class="flex gap-2">
<button id="save-pattern" type="button" class="btn btn-sm btn-outline">Guardar</button>
<button id="load-pattern" type="button" class="btn btn-sm btn-outline">Cargar</button>
<button id="export-pdf" type="button" class="btn btn-sm">Exportar a PDF</button>
</div>
</header>
<section id="panel-top" class="w-1/2 border border-base-300 rounded-box p-4">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-semibold">Secciones</h2>
<div class="flex gap-2">
<button id="save-pattern" type="button" class="btn btn-sm btn-outline">Guardar</button>
<button id="load-pattern" type="button" class="btn btn-sm btn-outline">Cargar</button>
<div class="p-4 pt-0">
<div class="tabs tabs-boxed w-fit mb-4 md:hidden no-print">
<button id="tab-sections" type="button" class="tab tab-active">Secciones</button>
<button id="tab-output" type="button" class="tab">Vista previa</button>
</div>
<div class="flex flex-col md:flex-row gap-4">
<section id="panel-top" class="w-full md:w-1/2 border border-base-300 rounded-box p-4">
<h2 class="text-lg font-semibold mb-2">Secciones</h2>
<div class="flex flex-wrap gap-2 mb-4">
<button id="add-title-section" type="button" class="btn btn-sm"
data-type-label="Título" data-placeholder="Título...">+ Título</button>
<button id="add-subtitle-section" type="button" class="btn btn-sm"
data-type-label="Subtítulo" data-placeholder="Subtítulo...">+ Subtítulo</button>
<button id="add-text-section" type="button" class="btn btn-sm"
data-type-label="Texto" data-placeholder="Escribe aquí...">+ Texto</button>
<button id="add-image-section" type="button" class="btn btn-sm"
data-type-label="Imagen">+ Imagen</button>
<button id="add-dnd-section" type="button" class="btn btn-sm"
data-type-label="Patrón" data-elements-label="Elementos">+ Patrón</button>
</div>
</div>
<div class="flex gap-2 mb-4">
<button id="add-title-section" type="button" class="btn btn-sm"
data-type-label="Título" data-placeholder="Título...">+ Título</button>
<button id="add-subtitle-section" type="button" class="btn btn-sm"
data-type-label="Subtítulo" data-placeholder="Subtítulo...">+ Subtítulo</button>
<button id="add-text-section" type="button" class="btn btn-sm"
data-type-label="Texto" data-placeholder="Escribe aquí...">+ Texto</button>
<button id="add-image-section" type="button" class="btn btn-sm"
data-type-label="Imagen">+ Imagen</button>
<button id="add-dnd-section" type="button" class="btn btn-sm"
data-type-label="Patrón" data-elements-label="Elementos">+ Patrón</button>
</div>
<div id="panel-top-sections" class="flex flex-col gap-4"
data-drag-title="Arrastrar para reordenar"
data-collapse-title="Colapsar / expandir"
data-remove-title="Eliminar sección"></div>
</section>
<div id="panel-top-sections" class="flex flex-col gap-4"
data-drag-title="Arrastrar para reordenar"
data-collapse-title="Colapsar / expandir"
data-remove-title="Eliminar sección"></div>
</section>
<section id="panel-output" class="w-1/2 border border-base-300 rounded-box p-4">
<div class="flex items-center justify-between mb-2 no-print">
<h2 class="text-lg font-semibold">Vista previa</h2>
<button id="export-pdf" type="button" class="btn btn-sm">Exportar a PDF</button>
</div>
<div id="panel-output-text" class="text-sm"
data-empty-message="Añade una sección para ver aquí el resultado."></div>
</section>
<section id="panel-output" class="w-full md:w-1/2 border border-base-300 rounded-box p-4 panel-hidden-mobile">
<h2 class="text-lg font-semibold mb-2">Vista previa</h2>
<div id="panel-output-text" class="text-sm"
data-empty-message="Añade una sección para ver aquí el resultado."></div>
</section>
</div>
</div>
@@ -60,6 +69,6 @@
</ul>
</main>
</body>
<script src="js/main.js"></script>
<script src="js/dnd.js"></script>
</html>