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
resources/views/individual-page-images.phtml
+50
View File
@@ -0,0 +1,50 @@
<?php
declare(strict_types=1);
use Fisharebest\Webtrees\Fact;
use Fisharebest\Webtrees\Http\RequestHandlers\AddNewFact;
use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\Individual;
use Fisharebest\Webtrees\Media;
use Fisharebest\Webtrees\Module\ModuleSidebarInterface;
use Fisharebest\Webtrees\Module\ModuleTabInterface;
use Fisharebest\Webtrees\Tree;
use Illuminate\Support\Collection;
/**
* @var string $age
* @var bool $can_upload_media
* @var Collection<int,Media> $individual_media
* @var Collection<int,Fact> $name_records
* @var Individual $record
* @var Collection<int,Fact> $sex_records
* @var Collection<int,string> $shares
* @var Collection<int,ModuleSidebarInterface> $sidebars
* @var Collection<int,ModuleTabInterface> $tabs
* @var Tree $tree
* @var string $user_link
*/
?>
<?php if ($individual_media->isNotEmpty() || $tree->getPreference('USE_SILHOUETTE') === '1') : ?>
<div class="col-sm-3">
<?php if ($individual_media->isEmpty()) : ?>
<div class="img-thumbnail">
<i class="wt-individual-silhouette wt-individual-silhouette-<?= strtolower($record->sex()) ?> wt-icon-flip-rtl w-100"></i>
</div>
<?php elseif ($individual_media->count() === 1) : ?>
<?= $individual_media->first()->displayImage(400, 400, 'contain', ['class' => 'img-thumbnail img-fluid w-100']) ?>
<?php else : ?>
<div id="individual-images" class="carousel slide" data-bs-interval="false">
<div class="carousel-inner">
<?php foreach ($individual_media as $n => $media_file) : ?>
<div class="carousel-item <?= $n === 0 ? 'active' : '' ?>">
<?= $media_file->displayImage(400, 400, 'contain', ['class' => 'img-thumbnail img-fluid w-100']) ?>
</div>
<?php endforeach ?>
</div>
</div>
<?php endif ?>
</div>
<?php endif ?>