reader: full viewport layout + width slider (40-100%) with localStorage persist
- 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
1 parent
abfb183e7b
commit
3a20b28bb9
3 files changed
+127
-37
No files matched your search
@@ -325,8 +325,15 @@ body {
|
||||
|
||||
/* === Reader Page === */
|
||||
.reader-page {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.reader-empty {
|
||||
@@ -425,10 +432,44 @@ body {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Toolbar group (width slider) */
|
||||
.toolbar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
|
||||
.toolbar-group svg {
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.width-slider {
|
||||
width: 72px;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
accent-color: #007aff;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.width-slider:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.width-label {
|
||||
font-size: 0.7rem;
|
||||
color: #999;
|
||||
min-width: 30px;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Reader Layout */
|
||||
.reader-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.reader-sidebar {
|
||||
@@ -440,6 +481,22 @@ body {
|
||||
transition: margin-left 0.3s;
|
||||
}
|
||||
|
||||
.reader-view-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.reader-view {
|
||||
width: 100%;
|
||||
max-width: var(--reader-width, 100%);
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.reader-sidebar.collapsed {
|
||||
margin-left: -280px;
|
||||
}
|
||||
@@ -533,12 +590,7 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reader-view {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
#epubViewer {
|
||||
width: 100%;
|
||||
@@ -560,8 +612,8 @@ body {
|
||||
}
|
||||
|
||||
.text-viewer {
|
||||
padding: 2rem 3rem;
|
||||
max-width: 700px;
|
||||
padding: 2rem 4rem;
|
||||
max-width: min(800px, 100% - 6rem);
|
||||
margin: 0 auto;
|
||||
line-height: 1.8;
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -219,6 +219,34 @@
|
||||
const searchInput = document.getElementById("searchInput");
|
||||
const searchResults = document.getElementById("searchResults");
|
||||
const fullscreenToggle = document.getElementById("fullscreenToggle");
|
||||
const widthSlider = document.getElementById("widthSlider");
|
||||
const widthLabel = document.getElementById("widthLabel");
|
||||
|
||||
// Reader width slider
|
||||
if (widthSlider && widthLabel) {
|
||||
const saved = localStorage.getItem("bookish_reader_width") || "100";
|
||||
widthSlider.value = saved;
|
||||
widthLabel.textContent = saved + "%";
|
||||
document.documentElement.style.setProperty("--reader-width", saved + "%");
|
||||
|
||||
widthSlider.addEventListener("input", () => {
|
||||
const val = widthSlider.value;
|
||||
widthLabel.textContent = val + "%";
|
||||
document.documentElement.style.setProperty("--reader-width", val + "%");
|
||||
localStorage.setItem("bookish_reader_width", val);
|
||||
|
||||
// Resize epub.js rendition to match new container width
|
||||
if (window._rendition) {
|
||||
const viewer = document.getElementById("epubViewer");
|
||||
if (viewer) {
|
||||
const rect = viewer.getBoundingClientRect();
|
||||
if (rect.width > 0 && rect.height > 0) {
|
||||
window._rendition.resize(rect.width, rect.height);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Sidebar toggle
|
||||
if (sidebarToggle && sidebar) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user