feat: improved printing settings

2026-07-14 10:16:47 +02:00
parent 8d9d95ddf5
commit c1afd5a6d4
5 changed files with 71 additions and 25 deletions
@@ -28,6 +28,15 @@ export function renderPageMeta() {
  panelOutput.style.fontFamily = pageFontSelect.value;
  pageSizeStyle.textContent = `@page { size: ${pageSizeSelect.value} ${pageOrientationSelect.value}; }`;
  document.title = pageTitleInput.value.trim() || 'Crochet';
+
+  // El color de fondo también se guarda en una variable CSS en :root, para
+  // que css/main.css pueda pintar con él toda la hoja al imprimir (no solo
+  // la caja de #panel-output, que puede quedarse más corta que la página).
+  // Se hace así, en vez de aplicar el color directamente a <body>, para no
+  // cambiar también el fondo de toda la pantalla de edición: la variable no
+  // pinta nada por sí sola en pantalla, solo la consume la regla @media
+  // print de más abajo.
+  document.documentElement.style.setProperty('--print-page-bg-color', pageBgColorInput.value);
 }

 export function serializePageSettings() {
@@ -250,7 +250,7 @@ const SECTION_TYPES = [
      if (!img.src || img.classList.contains('hidden')) return;
      const clone = document.createElement('img');
      clone.src = img.src;
-      clone.className = 'max-w-full max-h-48 object-contain rounded-box my-2';
+      clone.className = 'max-w-full max-h-96 object-contain rounded-box my-2';
      target.appendChild(clone);
    },
  },
@@ -357,8 +357,13 @@ export function buildSectionsFrom(sectionsData, container = sectionsContainer) {
 // mismo mecanismo que restaura un patrón guardado.
 const DEFAULT_SECTIONS = [
  { type: 'image', dataUrl: '' },
-  { type: 'title', text: {} },
-  { type: 'materials', materials: [] },
+  { 
+    type: 'group', 
+    children: [
+      { type: 'title', text: {} },
+      { type: 'materials', materials: [] },
+    ]
+  },
  {
    type: 'group',
    children: [
@@ -97,7 +97,11 @@ export function createSectionShell(typeLabel) {
  // un nombre derivado del contenido ("Título: Bufanda de lana") sin perder
  // de vista cuál es la etiqueta de tipo original.
  const badge = document.createElement('span');
-  badge.className = 'section-badge badge badge-sm badge-outline select-none';
+  // 'min-w-0 truncate': por defecto un elemento flex no encoge por debajo
+  // del tamaño de su contenido, así que un nombre largo (p.ej. una lista de
+  // materiales) desbordaba la cabecera en pantallas estrechas en vez de
+  // recortarse con "…".
+  badge.className = 'section-badge badge badge-sm badge-outline select-none min-w-0 truncate';
  badge.textContent = typeLabel;
  badge.dataset.typeLabel = typeLabel;

@@ -318,7 +322,7 @@ export function addImageSection(data, dataUrl = '', container = sectionsContaine
  fileInput.className = 'file-input file-input-bordered w-full mb-2';

  const img = document.createElement('img');
-  img.className = 'max-w-full max-h-48 object-contain rounded-box hidden';
+  img.className = 'max-w-full max-h-96 object-contain rounded-box hidden';

  if (dataUrl) {
    img.src = dataUrl;