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

fix: preserve wood paneling on dashboard refresh and improve colors

Browse Source 
- Fix View All link flashing by preserving data-wood attribute when dashboard re-renders
- Update wood-dark text color to match wood-mahogany (#f5f5f5) for better consistency
- Add smart link colors for wood paneling (#0066cc for light wood, #66ccff for dark woods)
- Fix carousel arrow gradients to be less harsh on wood backgrounds (0.6 for light, 0.3 for dark)
- Remove accent color preservation rule that was conflicting with wood-specific link colors
This commit is contained in:
john-okeefe
2026-02-24 17:00:11 -05:00
parent 4571a19159
commit 875e4abb46
3 changed files with 72 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/dashboard.ts
+7
View File
@@ -128,6 +128,9 @@ async function switchLibrary(libraryId: string): Promise<void> {
function renderCollections(sections: SectionData[]): void {
const container = document.getElementById('collections-container') as HTMLElement;
if (!container) return;
// Preserve wood paneling attribute
const currentWood = container.getAttribute('data-wood');
container.innerHTML = sections.map(section => `
<div class="dashboard-collection mb-8" data-collection-id="${section.id}">
@@ -178,6 +181,10 @@ function renderCollections(sections: SectionData[]): void {
</div>
</div>
`).join('');
if(currentWood) {
container.setAttribute('data-wood', currentWood)
}
}
function renderBookCard(book: BookInfo): string {
web/static/input.css
+29 -7
View File
@@ -215,11 +215,11 @@
--wood-border: #2a2a2a;
}
/* Wood Dark - needs medium text */
/* Wood Dark - needs light text */
#collections-container[data-wood="wood-dark"] {
--wood-text-primary: #d0d0d0;
--wood-text-secondary: #a0a0a0;
--wood-border: #5a4a3a;
--wood-text-primary: #f5f5f5;
--wood-text-secondary: #c0c0c0;
--wood-border: #5c3317;
}
/* Wood Mahogany - needs light text (darkest background) */
@@ -246,9 +246,31 @@
color: var(--wood-text-secondary) !important;
}
/* Preserve accent color for links */
#collections-container[data-wood] a[style*="accent"] {
color: var(--accent) !important;
/* Links on wood-light need darker color for visibility */
#collections-container[data-wood="wood-light"] a {
color: #0066cc !important;
}
/* Links on dark woods use lighter color */
#collections-container[data-wood="wood-dark"] a,
#collections-container[data-wood="wood-mahogany"] a {
color: #66ccff !important;
}
/* Wood Light - use darker gradient */
#collections-container[data-wood="wood-light"] .carousel-nav-left {
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
}
#collections-container[data-wood="wood-light"] .carousel-nav-right {
background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
}
/* Wood Dark/Mahogany - use subtle white/transparent gradient */
#collections-container[data-wood="wood-dark"] .carousel-nav-left,
#collections-container[data-wood="wood-mahogany"] .carousel-nav-left {
background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
}
#collections-container[data-wood="wood-dark"] .carousel-nav-right,
#collections-container[data-wood="wood-mahogany"] .carousel-nav-right {
background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
}
/* Add subtle borders to book cards on wood backgrounds */
web/static/style.css
+36 -7
View File
@@ -1563,12 +1563,12 @@ body:not(.page-docs) .header-nav {
--wood-border: #2a2a2a;
}
/* Wood Dark - needs medium text */
/* Wood Dark - needs light text */
#collections-container[data-wood="wood-dark"] {
--wood-text-primary: #d0d0d0;
--wood-text-secondary: #a0a0a0;
--wood-border: #5a4a3a;
--wood-text-primary: #f5f5f5;
--wood-text-secondary: #c0c0c0;
--wood-border: #5c3317;
}
/* Wood Mahogany - needs light text (darkest background) */
@@ -1597,10 +1597,39 @@ body:not(.page-docs) .header-nav {
color: var(--wood-text-secondary) !important;
}
/* Preserve accent color for links */
/* Links on wood-light need darker color for visibility */
#collections-container[data-wood] a[style*="accent"] {
color: var(--accent) !important;
#collections-container[data-wood="wood-light"] a {
color: #0066cc !important;
}
/* Links on dark woods use lighter color */
#collections-container[data-wood="wood-dark"] a,
#collections-container[data-wood="wood-mahogany"] a {
color: #66ccff !important;
}
/* Wood Light - use darker gradient */
#collections-container[data-wood="wood-light"] .carousel-nav-left {
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
}
#collections-container[data-wood="wood-light"] .carousel-nav-right {
background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
}
/* Wood Dark/Mahogany - use subtle white/transparent gradient */
#collections-container[data-wood="wood-dark"] .carousel-nav-left,
#collections-container[data-wood="wood-mahogany"] .carousel-nav-left {
background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
}
#collections-container[data-wood="wood-dark"] .carousel-nav-right,
#collections-container[data-wood="wood-mahogany"] .carousel-nav-right {
background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
}
/* Add subtle borders to book cards on wood backgrounds */