fix(reader): sticky reader toolbar, compact settings grid, and viewport-aware Aa dropdown
This commit is contained in:
@@ -43,6 +43,7 @@
|
||||
--sar: env(safe-area-inset-right, 0px);
|
||||
--sab: env(safe-area-inset-bottom, 0px);
|
||||
--sal: env(safe-area-inset-left, 0px);
|
||||
--navbar-height: 60px;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
@@ -81,7 +82,7 @@
|
||||
}
|
||||
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
overflow-x: clip;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@@ -254,6 +255,8 @@ body {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
min-height: var(--navbar-height);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
@@ -2750,6 +2753,9 @@ body {
|
||||
|
||||
/* Reader Interface Toolbar */
|
||||
.reader-toolbar {
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
box-shadow: none !important;
|
||||
padding: 8px 10px;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
@@ -3080,14 +3086,15 @@ body {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reader-toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
top: var(--navbar-height, 60px);
|
||||
z-index: 1000;
|
||||
background-color: var(--bg-surface);
|
||||
border-top-left-radius: var(--radius-lg);
|
||||
border-top-right-radius: var(--radius-lg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 12px 18px;
|
||||
display: flex;
|
||||
@@ -3095,6 +3102,7 @@ body {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reader-toolbar-left {
|
||||
@@ -3317,8 +3325,11 @@ body {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
right: 28px;
|
||||
width: 320px;
|
||||
width: 330px;
|
||||
max-width: calc(100vw - 32px);
|
||||
max-height: calc(100vh - 80px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-focus);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -3332,6 +3343,7 @@ body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
@@ -3347,6 +3359,19 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-focus) transparent;
|
||||
}
|
||||
|
||||
.reader-settings-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.reader-settings-body::-webkit-scrollbar-thumb {
|
||||
background-color: var(--border-focus);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
@@ -3355,6 +3380,18 @@ body {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.setting-row-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.setting-row-grid .seg-btn {
|
||||
padding: 6px 4px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
|
||||
+14
-13
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Notes — Персональный тренажер и словарь английского языка</title>
|
||||
<meta name="description" content="Защищённый персональный тренажёр и словарь английского языка с интервальными повторениями SRS SM-2, контекстным поиском и озвучкой">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=3.6">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=3.7">
|
||||
|
||||
<!-- PWA meta and icons -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
@@ -993,9 +993,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Size -->
|
||||
<!-- Font Size & Text Alignment (Compact 2-col Grid) -->
|
||||
<div class="setting-row-grid">
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Размер шрифта</span>
|
||||
<span class="setting-label">Размер</span>
|
||||
<div class="setting-stepper">
|
||||
<button id="setting-font-dec-btn" class="step-btn">A−</button>
|
||||
<span id="setting-font-size-val" class="step-val">18 px</span>
|
||||
@@ -1003,6 +1004,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Выравнивание</span>
|
||||
<div class="setting-segmented-control" id="reader-align-group">
|
||||
<button class="seg-btn active" data-align="left" title="По левому краю">По краю</button>
|
||||
<button class="seg-btn" data-align="justify" title="По ширине (Justified)">По ширине</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Line Height -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Межстрочный интервал</span>
|
||||
@@ -1033,15 +1043,6 @@
|
||||
<button class="theme-chip theme-chip-oled" data-theme="oled" title="OLED (Абсолютный чёрный)">🖤 OLED</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Alignment -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Выравнивание текста</span>
|
||||
<div class="setting-segmented-control" id="reader-align-group">
|
||||
<button class="seg-btn active" data-align="left">По левому краю</button>
|
||||
<button class="seg-btn" data-align="justify">По ширине</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1074,7 +1075,7 @@
|
||||
<!-- Audio Element for native streaming -->
|
||||
<audio id="global-audio-player" preload="none"></audio>
|
||||
|
||||
<script src="/static/js/app.js?v=3.6"></script>
|
||||
<script src="/static/js/app.js?v=3.7"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
+14
-2
@@ -3653,11 +3653,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
readerSettingsPanel.style.top = '';
|
||||
readerSettingsPanel.style.left = '';
|
||||
readerSettingsPanel.style.right = '';
|
||||
readerSettingsPanel.style.maxHeight = '';
|
||||
return;
|
||||
}
|
||||
const rect = readerSettingsBtn.getBoundingClientRect();
|
||||
const panelWidth = 320;
|
||||
const panelWidth = 330;
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
let left = rect.right - panelWidth;
|
||||
if (left < 16) left = 16;
|
||||
@@ -3665,9 +3667,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
left = viewportWidth - panelWidth - 16;
|
||||
}
|
||||
|
||||
readerSettingsPanel.style.top = `${Math.round(rect.bottom + 8)}px`;
|
||||
const top = Math.round(rect.bottom + 8);
|
||||
const maxH = Math.max(260, viewportHeight - top - 16);
|
||||
|
||||
readerSettingsPanel.style.top = `${top}px`;
|
||||
readerSettingsPanel.style.left = `${Math.round(left)}px`;
|
||||
readerSettingsPanel.style.right = 'auto';
|
||||
readerSettingsPanel.style.maxHeight = `${maxH}px`;
|
||||
}
|
||||
|
||||
function initReaderSettingsPanel() {
|
||||
@@ -3816,6 +3822,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
positionSettingsPanel();
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (readerSettingsPanel && !readerSettingsPanel.classList.contains('hidden') && window.innerWidth > 768) {
|
||||
positionSettingsPanel();
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
initReaderSettingsPanel();
|
||||
|
||||
Reference in New Issue
Block a user