Alexander/WebtreesBockenTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle individual page: FAB edit button, uncropped profile pics, silhouette placeholders, dark mode tabs

Browse Source 
- Override individual-page-images template to request 400x400 contain (no server-side crop)
- Move circle crop to CSS on a.gallery wrapper, fixing single-image profiles
- Add gender-colored circular silhouette placeholders matching family navigator
- Replace edit button with fixed FAB (bottom-right) using homepage pencil SVG
- Add page cloak to prevent FOUC from JS DOM manipulations
- Dark mode: white profile shadow, black active tab with light blue accent
- Remove carousel arrows and "add media" link at template level
This commit is contained in:
Alexander Bocken
2026-03-15 21:15:30 +01:00
parent 02599e5876
commit 1531c075c4
3 changed files with 221 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
BockenTheme.php
+11 -4
View File
@@ -70,12 +70,17 @@ class BockenTheme extends AbstractModule implements ModuleCustomInterface, Modul
return <<<HTML
<link rel="icon" href="{$faviconUrl}" type="image/svg+xml">
<style>
.bocken-cloak .wt-main-wrapper { opacity: 0; }
.bocken-ready .wt-main-wrapper { transition: opacity 0.05s ease; opacity: 1; }
</style>
<script>
(function() {
var saved = localStorage.getItem('bocken-theme');
if (saved === 'dark' || saved === 'light') {
document.documentElement.setAttribute('data-theme', saved);
}
document.documentElement.classList.add('bocken-cloak');
})();
</script>
HTML;
@@ -358,11 +363,8 @@ class BockenTheme extends AbstractModule implements ModuleCustomInterface, Modul
var iconSpan = editBtn.querySelector('.wt-icon-menu');
if (iconSpan) {
editBtn.innerHTML = '';
iconSpan.innerHTML = '<i data-lucide="pencil"></i>';
iconSpan.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg>';
editBtn.appendChild(iconSpan);
if (typeof lucide !== 'undefined') {
lucide.createIcons({ nodes: [editBtn] });
}
}
}
}
@@ -400,6 +402,10 @@ class BockenTheme extends AbstractModule implements ModuleCustomInterface, Modul
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
// Reveal page after DOM manipulations are done
document.documentElement.classList.remove('bocken-cloak');
document.documentElement.classList.add('bocken-ready');
}
if (document.readyState === 'loading') {
@@ -426,6 +432,7 @@ class BockenTheme extends AbstractModule implements ModuleCustomInterface, Modul
View::registerCustomView('::modules/place-hierarchy/list', $this->name() . '::modules/place-hierarchy/list');
View::registerCustomView('::lists/individuals-table', $this->name() . '::lists/individuals-table');
View::registerCustomView('::lists/families-table', $this->name() . '::lists/families-table');
View::registerCustomView('::individual-page-images', $this->name() . '::individual-page-images');
View::registerCustomView('::individual-page-menu', $this->name() . '::individual-page-menu');
View::registerCustomView('::modules/family_nav/sidebar-family', $this->name() . '::modules/family_nav/sidebar-family');
}