refactor(reader): remove test font, move settings panel to right sidebar
- Remove Playwrite NZ Guides test font and all references (FONT_MAP, FONT_FILES, reader-fonts.css, dropdown option, font files) - Move settings panel from left sidebar to right sidebar (left sidebar now only contains TOC) - Move Restore Defaults button from top bar icon to a styled button inside the settings panel, side by side with Done button
This commit is contained in:
+19
-24
@@ -23,17 +23,17 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
|
|||||||
@ReaderChrome(user, metadata, progress)
|
@ReaderChrome(user, metadata, progress)
|
||||||
<!-- Dockable Panels Container -->
|
<!-- Dockable Panels Container -->
|
||||||
<div id="reader-panels" class="fixed inset-0 pointer-events-none z-30">
|
<div id="reader-panels" class="fixed inset-0 pointer-events-none z-30">
|
||||||
<!-- Left Sidebar (TOC, Settings) -->
|
<!-- Left Sidebar (TOC) -->
|
||||||
<div id="left-sidebar" class="absolute left-0 top-0 bottom-0 pointer-events-auto flex flex-col">
|
<div id="left-sidebar" class="absolute left-0 top-0 bottom-0 pointer-events-auto flex flex-col">
|
||||||
<div id="toc-panel" x-show="tocOpen" x-transition class="panel-container pointer-events-auto" data-panel="toc">
|
<div id="toc-panel" x-show="tocOpen" x-transition class="panel-container pointer-events-auto" data-panel="toc">
|
||||||
@ReaderTOCPanel(metadata)
|
@ReaderTOCPanel(metadata)
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Right Sidebar (Settings, Navigator, Bookmarks) -->
|
||||||
|
<div id="right-sidebar" class="absolute right-0 top-0 bottom-0 pointer-events-auto flex flex-col">
|
||||||
<div id="settings-panel" x-show="settingsOpen" x-transition class="panel-container pointer-events-auto" data-panel="settings">
|
<div id="settings-panel" x-show="settingsOpen" x-transition class="panel-container pointer-events-auto" data-panel="settings">
|
||||||
@ReaderSettingsPanel()
|
@ReaderSettingsPanel()
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- Right Sidebar (Navigator, Bookmarks) -->
|
|
||||||
<div id="right-sidebar" class="absolute right-0 top-0 bottom-0 pointer-events-auto flex flex-col">
|
|
||||||
<div id="navigator-panel" x-show="navigatorOpen" x-transition class="panel-container pointer-events-auto" data-panel="navigator">
|
<div id="navigator-panel" x-show="navigatorOpen" x-transition class="panel-container pointer-events-auto" data-panel="navigator">
|
||||||
@ReaderNavigatorPanel()
|
@ReaderNavigatorPanel()
|
||||||
</div>
|
</div>
|
||||||
@@ -59,22 +59,13 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
|
|||||||
← Back
|
← Back
|
||||||
</a>
|
</a>
|
||||||
<h1 class="text-lg font-semibold">{ metadata.Title }</h1>
|
<h1 class="text-lg font-semibold">{ metadata.Title }</h1>
|
||||||
<div class="flex flex-col items-center gap-0.5">
|
<button
|
||||||
<button
|
@click="toggleSettings()"
|
||||||
@click="toggleSettings()"
|
class="p-2 rounded-lg hover:bg-gray-700"
|
||||||
class="p-2 rounded-lg hover:bg-gray-700"
|
title="Settings"
|
||||||
title="Settings"
|
>
|
||||||
>
|
⚙️
|
||||||
⚙️
|
</button>
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
@click="restoreDefaults()"
|
|
||||||
class="p-1 rounded-lg hover:bg-gray-700 text-xs"
|
|
||||||
title="Restore Defaults"
|
|
||||||
>
|
|
||||||
↩️
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- Bottom bar -->
|
</div> <!-- Bottom bar -->
|
||||||
<div class="fixed bottom-0 left-0 right-0 bg-opacity-95 backdrop-blur border-t z-40" style="background-color: var(--bg-primary);">
|
<div class="fixed bottom-0 left-0 right-0 bg-opacity-95 backdrop-blur border-t z-40" style="background-color: var(--bg-primary);">
|
||||||
@@ -258,7 +249,6 @@ templ ReaderSettingsPanel() {
|
|||||||
<option value="noto-serif">Noto Serif</option>
|
<option value="noto-serif">Noto Serif</option>
|
||||||
<option value="charis-sil">Charis SIL</option>
|
<option value="charis-sil">Charis SIL</option>
|
||||||
<option value="ibm-plex">IBM Plex Serif</option>
|
<option value="ibm-plex">IBM Plex Serif</option>
|
||||||
<option value="playwrite">Playwrite NZ Guides (Test)</option>
|
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label class="block mb-2">
|
<label class="block mb-2">
|
||||||
@@ -280,9 +270,14 @@ templ ReaderSettingsPanel() {
|
|||||||
Double Page Spread
|
Double Page Spread
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button @click="toggleSettings()" class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
<div class="flex gap-2 mt-6">
|
||||||
Done
|
<button @click="restoreDefaults()" class="flex-1 py-2 border rounded hover:opacity-80" style="border-color: var(--border);">
|
||||||
</button>
|
Restore Defaults
|
||||||
|
</button>
|
||||||
|
<button @click="toggleSettings()" class="flex-1 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
||||||
|
Done
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -12,7 +12,6 @@ const FONT_MAP: Record<string, string> = {
|
|||||||
"noto-serif": '"Noto Serif"',
|
"noto-serif": '"Noto Serif"',
|
||||||
"charis-sil": '"Charis SIL"',
|
"charis-sil": '"Charis SIL"',
|
||||||
"ibm-plex": '"IBM Plex Serif"',
|
"ibm-plex": '"IBM Plex Serif"',
|
||||||
"playwrite": '"Playwrite NZ Guides"',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
interface FontFile {
|
interface FontFile {
|
||||||
@@ -45,7 +44,6 @@ const FONT_FILES: FontFile[] = [
|
|||||||
{ family: '"IBM Plex Serif"', url: "/static/fonts/ibm-plex/IBMPlexSerif-Bold.woff2", weight: "700", style: "normal" },
|
{ family: '"IBM Plex Serif"', url: "/static/fonts/ibm-plex/IBMPlexSerif-Bold.woff2", weight: "700", style: "normal" },
|
||||||
{ family: '"IBM Plex Serif"', url: "/static/fonts/ibm-plex/IBMPlexSerif-Italic.woff2", weight: "400", style: "italic" },
|
{ family: '"IBM Plex Serif"', url: "/static/fonts/ibm-plex/IBMPlexSerif-Italic.woff2", weight: "400", style: "italic" },
|
||||||
{ family: '"IBM Plex Serif"', url: "/static/fonts/ibm-plex/IBMPlexSerif-BoldItalic.woff2", weight: "700", style: "italic" },
|
{ family: '"IBM Plex Serif"', url: "/static/fonts/ibm-plex/IBMPlexSerif-BoldItalic.woff2", weight: "700", style: "italic" },
|
||||||
{ family: '"Playwrite NZ Guides"', url: "/static/fonts/Playwrite_NZ_Guides/PlaywriteNZGuides-Regular.woff2", weight: "400", style: "normal" },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
let fontBlobUrls: Record<string, string> = {};
|
let fontBlobUrls: Record<string, string> = {};
|
||||||
|
|||||||
@@ -227,11 +227,3 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Playwrite NZ Guides";
|
|
||||||
src: url("/static/fonts/Playwrite_NZ_Guides/PlaywriteNZGuides-Regular.woff2")
|
|
||||||
format("woff2");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user