diff --git a/app/public/app.js b/app/public/app.js index 212be55..94263f1 100644 --- a/app/public/app.js +++ b/app/public/app.js @@ -684,11 +684,10 @@ async function viewManga(id, langOverride) { const READ_MODES = { paged: 'Una página', double: 'Doble página', vertical: 'Vertical' } // Ajustes por defecto según el tipo de obra (se usan hasta que el usuario cambie algo en ese manga). function defaultPrefs(manga) { - // gap: separación entre páginas en vertical (los webtoon son una tira continua; los mangas, páginas sueltas). - if (['Manhwa', 'Manhua', 'Webtoon'].includes(manga.type)) return { mode: 'vertical', fit: 'width', dir: 'ltr', gap: false } - if (manga.type === 'Manga') return { mode: 'paged', fit: 'height', dir: 'rtl', gap: true } + if (['Manhwa', 'Manhua', 'Webtoon'].includes(manga.type)) return { mode: 'vertical', fit: 'width', dir: 'ltr' } + if (manga.type === 'Manga') return { mode: 'paged', fit: 'height', dir: 'rtl' } const legacy = store.get('readerSettings', {}) - return { mode: READ_MODES[legacy.mode] ? legacy.mode : 'paged', fit: legacy.fit === 'width' ? 'width' : 'height', dir: legacy.dir === 'rtl' ? 'rtl' : 'ltr', gap: true } + return { mode: READ_MODES[legacy.mode] ? legacy.mode : 'paged', fit: legacy.fit === 'width' ? 'width' : 'height', dir: legacy.dir === 'rtl' ? 'rtl' : 'ltr' } } async function viewReader(mangaId, chapterId, startPage) { @@ -744,13 +743,12 @@ async function viewReader(mangaId, chapterId, startPage) { - ${manga.source === 'lc' || chap.local ? '' : ''} ${chap.hdAvailable ? '' : chap.local && info.upscale?.available ? `` : ''} -

Modo, ajuste, dirección y separación se recuerdan para este manga. ${icon('scroll')} en la barra de arriba cambia entre páginas y vertical. Zoom: pellizca o toca dos veces en el centro (Ctrl+rueda o + / − en PC).

+

Modo, ajuste y dirección se recuerdan para este manga. ${icon('scroll')} en la barra de arriba cambia entre páginas y vertical. Zoom: pellizca o toca dos veces en el centro (Ctrl+rueda o + / − en PC).

@@ -767,7 +765,6 @@ async function viewReader(mangaId, chapterId, startPage) { $('#mode').value = settings.mode $('#fit').value = settings.fit $('#dir').value = settings.dir - $('#gap').checked = !!settings.gap // Botón rápido páginas ⇄ vertical (vuelve al último modo por páginas usado). let lastPaged = settings.mode === 'double' ? 'double' : 'paged' function renderModeQuick() { @@ -877,13 +874,12 @@ async function viewReader(mangaId, chapterId, startPage) { observer?.disconnect() const keep = lastShown() resetZoom() - box.className = isPaged() ? `paged ${settings.fit === 'width' ? 'fit-width' : ''} ${isDouble() ? 'double' : ''}` : `vertical fit-${settings.fit} ${settings.gap ? 'gap' : ''}` + box.className = isPaged() ? `paged ${settings.fit === 'width' ? 'fit-width' : ''} ${isDouble() ? 'double' : ''}` : `vertical fit-${settings.fit}` renderModeQuick() box.dataset.dir = settings.dir // En der → izq la barra de progreso también avanza de derecha a izquierda (en vertical no aplica). slider.dir = isPaged() && settings.dir === 'rtl' ? 'rtl' : 'ltr' $('#dir').hidden = !isPaged() - $('#gapwrap').hidden = isPaged() if (isPaged()) { box.innerHTML = '' atEnd = false @@ -1028,7 +1024,7 @@ async function viewReader(mangaId, chapterId, startPage) { const saveGlobal = () => store.set('readerSettings', { saver: settings.saver, filter: settings.filter, brightness: settings.brightness, hd: settings.hd !== false }) const savePrefs = () => { - api(`/api/prefs/${mangaId}`, { method: 'POST', body: { mode: settings.mode, fit: settings.fit, dir: settings.dir, gap: !!settings.gap } }) + api(`/api/prefs/${mangaId}`, { method: 'POST', body: { mode: settings.mode, fit: settings.fit, dir: settings.dir } }) .then(() => toast('Guardado para este manga')).catch(err => toast(err.message)) } $('#mode').addEventListener('change', e => { settings.mode = e.target.value; if (isPaged()) lastPaged = settings.mode; savePrefs(); render() }) @@ -1037,7 +1033,6 @@ async function viewReader(mangaId, chapterId, startPage) { savePrefs() render() }) - $('#gap').addEventListener('change', e => { settings.gap = e.target.checked; savePrefs(); render() }) $('#fit').addEventListener('change', e => { settings.fit = e.target.value; savePrefs(); render() }) $('#dir').addEventListener('change', e => { settings.dir = e.target.value; box.dataset.dir = settings.dir; slider.dir = settings.dir; savePrefs() }) $('#filter').addEventListener('change', e => { settings.filter = e.target.value; saveGlobal(); applyFilter() }) diff --git a/app/public/style.css b/app/public/style.css index c506a6e..532ea53 100644 --- a/app/public/style.css +++ b/app/public/style.css @@ -108,10 +108,9 @@ input:focus, select:focus { border-color: var(--accent); } .vertical { display: flex; flex-direction: column; align-items: center; } .vertical img { width: 100%; max-width: 900px; min-height: 300px; background: #111; } .vertical img[data-loaded] { min-height: 0; } -/* Vertical para mangas: cada página entera en pantalla y separadas */ +/* Vertical para mangas: cada página entera en pantalla, pegadas */ .vertical.fit-height img { width: auto; max-width: 100%; max-height: 100vh; max-height: 100dvh; } .vertical.fit-height img:not([data-loaded]) { width: min(100%, 640px); } -.vertical.gap { gap: 14px; } .chapter-end { padding: 40px 16px 120px; text-align: center; display: grid; gap: 12px; justify-items: center; } #toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--surface-2);