truetype/bookish-fork-dokerized
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reader: full viewport layout + width slider (40-100%) with localStorage persist

Browse Source 
- fixed position reader-page fills entire viewport (below navbar)
- reader-view-wrapper centers content area with flexbox
- width slider in toolbar controls --reader-width CSS variable
- epub.js rendition.resize() on slider change for proper reflow
- text-viewer max-width: min(800px, 100% - 6rem) for readability
- preference saved in localStorage
This commit is contained in:
truetype committed 2026-07-22 17:59:46 +02:00
1 parent abfb183e7b
commit 3a20b28bb9
3 files changed
+127 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

bookish/templates/reader.html
+36 -26
View File
@@ -14,6 +14,14 @@
<span class="page-info" id="pageInfo">-- / --</span>
</div>
<div class="toolbar-right">
<div class="toolbar-group" title="Larghezza area di lettura">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<line x1="12" y1="3" x2="12" y2="21"/>
</svg>
<input type="range" id="widthSlider" min="40" max="100" value="100" class="width-slider">
<span class="width-label" id="widthLabel">100%</span>
</div>
<button class="tool-btn" id="zoomOut" title="Zoom -">A−</button>
<button class="tool-btn" id="zoomIn" title="Zoom +">A+</button>
<button class="tool-btn" id="themeToggle" title="Tema">☀️</button>
@@ -22,37 +30,39 @@
</div>
</div>
<div class="reader-container">
<div class="reader-sidebar" id="sidebar">
<div class="sidebar-tabs">
<button class="sidebar-tab active" data-tab="toc">Indice</button>
<button class="sidebar-tab" data-tab="search">Cerca</button>
<button class="sidebar-tab" data-tab="bookmarks">Segnalibri</button>
</div>
<div class="sidebar-content">
<div class="tab-panel active" id="panel-toc">
<ul id="tocList"><li>Caricamento...</li></ul>
<div class="reader-container">
<div class="reader-sidebar" id="sidebar">
<div class="sidebar-tabs">
<button class="sidebar-tab active" data-tab="toc">Indice</button>
<button class="sidebar-tab" data-tab="search">Cerca</button>
<button class="sidebar-tab" data-tab="bookmarks">Segnalibri</button>
</div>
<div class="tab-panel" id="panel-search">
<input type="text" id="searchInput" placeholder="Cerca nel libro..." class="search-input">
<div id="searchResults"></div>
</div>
<div class="tab-panel" id="panel-bookmarks">
<ul id="bookmarksList"><li>Nessun segnalibro</li></ul>
<div class="sidebar-content">
<div class="tab-panel active" id="panel-toc">
<ul id="tocList"><li>Caricamento...</li></ul>
</div>
<div class="tab-panel" id="panel-search">
<input type="text" id="searchInput" placeholder="Cerca nel libro..." class="search-input">
<div id="searchResults"></div>
</div>
<div class="tab-panel" id="panel-bookmarks">
<ul id="bookmarksList"><li>Nessun segnalibro</li></ul>
</div>
</div>
</div>
</div>
<div class="reader-view" id="readerView">
{% if file_ext == 'epub' %}
<div id="epubViewer"></div>
{% elif file_ext == 'pdf' %}
<div id="pdfViewer"></div>
{% else %}
<div id="textViewer" class="text-viewer"></div>
{% endif %}
<div class="reader-view-wrapper">
<div class="reader-view" id="readerView">
{% if file_ext == 'epub' %}
<div id="epubViewer"></div>
{% elif file_ext == 'pdf' %}
<div id="pdfViewer"></div>
{% else %}
<div id="textViewer" class="text-viewer"></div>
{% endif %}
</div>
</div>
</div>
</div>
{% else %}
<div class="reader-empty">
<h2>Reader</h2>