Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

refactor(header): separate wood paneling from color themes

Browse Source 
- Remove max-w-7xl constraint, use full-width layout
- Replace wood theme buttons with wood paneling section
- Add visual previews for wood textures in dropdown
- Section labeled "Bookshelf Background" for clarity
- Include woodPaneling.js and themeDropdown.js scripts
This commit is contained in:
john-okeefe
2026-02-24 13:01:45 -05:00
parent b1dcb3889e
commit 0327d367f2
1 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/header.templ
+28 -8
View File
@@ -2,7 +2,7 @@ package templates
templ Header(user User, currentPath string) {
<nav class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="w-full px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Left: App Title & Navigation -->
<div class="flex items-center space-x-6">
@@ -83,17 +83,35 @@ templ Header(user User, currentPath string) {
Material Dark
</button>
<div class="border-t pt-2 mt-2" style="border-color: var(--border);">
<p class="text-xs mb-2" style="color: var(--text-secondary)">Background Options</p>
<button onclick="changeThemeTo('wood-light')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
<span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #deb887 0%, #d2a679 100%);"></span>
<p class="text-xs mb-2" style="color: var(--text-secondary)">Bookshelf Background</p>
<button onclick="changeWoodPaneling('none')"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="none">
None
</button>
<button onclick="changeWoodPaneling('wood-light')"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="wood-light">
<span class="inline-block w-4 h-4 rounded mr-2"
style="background: url('/static/textures/wood-light.png'); background-size: cover;"></span>
Wood Light
</button>
<button onclick="changeThemeTo('wood-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
<span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #8b7355 0%, #6b5344 100%);"></span>
<button onclick="changeWoodPaneling('wood-dark')"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="wood-dark">
<span class="inline-block w-4 h-4 rounded mr-2"
style="background: url('/static/textures/wood-dark.png'); background-size: cover;"></span>
Wood Dark
</button>
<button onclick="changeThemeTo('wood-mahogany')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
<span class="inline-block w-4 h-4 rounded mr-2" style="background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);"></span>
<button onclick="changeWoodPaneling('wood-mahogany')"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="wood-mahogany">
<span class="inline-block w-4 h-4 rounded mr-2"
style="background: url('/static/textures/wood-mahogany.png'); background-size: cover;"></span>
Wood Mahogany
</button>
</div>
@@ -164,5 +182,7 @@ templ Header(user User, currentPath string) {
</div>
</nav>
<script src="/static/theme.js"></script>
<script src="/static/woodPaneling.js"></script>
<script src="/static/themeDropdown.js"></script>
<script src="/static/header.js"></script>
}