Modernize individual page, add dark mode fixes, and restyle gallery
- Redesign individual page header: photo beside name/year/age/username, pencil icon edit button, stacked vertical fact cards, iOS toggle, underline tabs, and responsive mobile layout - Add global dark mode fixes for modals, forms, dropdowns (both data-theme=dark and prefers-color-scheme auto mode) - Restyle colorbox gallery: blurred backdrop, centered image, no zoom animation, clean controls with drop-shadow - Override family navigator with thumbnails linking to individual pages instead of raw images, matching full diagram gender colors - Add high-contrast link colors and silhouette placeholder sizing
This commit is contained in:
@@ -0,0 +1,166 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use Fisharebest\Webtrees\Family;
|
||||
use Fisharebest\Webtrees\I18N;
|
||||
use Fisharebest\Webtrees\Individual;
|
||||
use Fisharebest\Webtrees\Services\RelationshipService;
|
||||
|
||||
/**
|
||||
* @var Individual $individual
|
||||
* @var Family $family
|
||||
* @var RelationshipService $relationship_service
|
||||
* @var string $title
|
||||
*/
|
||||
|
||||
?>
|
||||
|
||||
<table class="table table-sm wt-facts-table wt-family-navigator-family">
|
||||
<caption class="text-center wt-family-navigator-family-heading">
|
||||
<?php if ($family->canShow()) : ?>
|
||||
<a href="<?= e($family->url()) ?>">
|
||||
<?= $title ?>
|
||||
</a>
|
||||
<?php else : ?>
|
||||
<?= $title ?>
|
||||
<?php endif ?>
|
||||
</caption>
|
||||
<tbody>
|
||||
<?php foreach ($family->spouses() as $spouse) : ?>
|
||||
<tr class="text-center wt-family-navigator-parent wt-sex-<?= strtolower($spouse->sex()) ?>">
|
||||
<th class="align-middle wt-family-navigator-label" scope="row">
|
||||
<?php if ($spouse === $individual) : ?>
|
||||
<?= $relationship_service->getCloseRelationshipName($individual, $spouse) ?>
|
||||
<span class="icon-selected"><?= view('icons/user') ?></span>
|
||||
<?php elseif ($spouse->childFamilies()->isNotEmpty()) : ?>
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle" href="#" role="button" id="dropdown-<?= e($spouse->xref()) ?>" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<?= $relationship_service->getCloseRelationshipName($individual, $spouse) ?>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu wt-family-navigator-dropdown">
|
||||
<?php foreach ($spouse->childFamilies() as $n => $spouse_child_family) : ?>
|
||||
<?php if ($n > 0) : ?>
|
||||
<div class="dropdown-divider"></div>
|
||||
<?php endif ?>
|
||||
<a class="dropdown-header wt-family-navigator-dropdown-heading" href="<?= e($spouse_child_family->url()) ?>">
|
||||
<?= I18N::translate('Parents') ?>
|
||||
</a>
|
||||
<?php foreach ($spouse_child_family->spouses() as $parent) : ?>
|
||||
<a class="dropdown-item" href="<?= e($parent->url()) ?>">
|
||||
<?= $parent->fullName() ?>
|
||||
</a>
|
||||
<?php endforeach ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<?= $relationship_service->getCloseRelationshipName($individual, $spouse) ?>
|
||||
<?php endif ?>
|
||||
</th>
|
||||
|
||||
<td class="wt-family-navigator-name">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<?php
|
||||
$thumb = $spouse->displayImage(40, 40, 'crop', ['class' => 'wt-family-navigator-thumb']);
|
||||
// Strip gallery link, wrap in person URL instead
|
||||
$thumbImg = preg_replace('/<a[^>]*>(.+?)<\/a>/s', '$1', $thumb);
|
||||
?>
|
||||
<?php if ($thumbImg !== '') : ?>
|
||||
<div class="wt-family-navigator-thumb-wrap">
|
||||
<a href="<?= e($spouse->url()) ?>"><?= $thumbImg ?></a>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<div>
|
||||
<?php if ($spouse->canShow()) : ?>
|
||||
<a href="<?= e($spouse->url()) ?>">
|
||||
<?= $spouse->fullName() ?>
|
||||
</a>
|
||||
<div class="small">
|
||||
<?= $spouse->lifespan() ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<?= $spouse->fullName() ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach ?>
|
||||
|
||||
<?php foreach ($family->children() as $child) : ?>
|
||||
<tr class="text-center wt-family-navigator-child wt-sex-<?= strtolower($child->sex()) ?>">
|
||||
<th class="align-middle wt-family-navigator-label" scope="row">
|
||||
<?php if ($child === $individual) : ?>
|
||||
<?= $relationship_service->getCloseRelationshipName($individual, $child) ?>
|
||||
<span class="icon-selected"><?= view('icons/user') ?></span>
|
||||
<?php elseif ($child->spouseFamilies()->isNotEmpty()) : ?>
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle" href="#" role="button" id="dropdown-<?= e($child->xref()) ?>" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<?= $relationship_service->getCloseRelationshipName($individual, $child) ?>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu">
|
||||
<?php foreach ($child->spouseFamilies() as $n => $in_laws) : ?>
|
||||
<?php if ($n > 0) : ?>
|
||||
<div class="dropdown-divider"></div>
|
||||
<?php endif ?>
|
||||
<a class="dropdown-header wt-family-navigator-dropdown-heading" href="<?= e($in_laws->url()) ?>">
|
||||
<?= I18N::translate('Family') ?>
|
||||
</a>
|
||||
|
||||
<?php foreach ($in_laws->spouses() as $sibling_in_law) : ?>
|
||||
<?php if ($sibling_in_law !== $child) : ?>
|
||||
<a class="dropdown-item" href="<?= e($sibling_in_law->url()) ?>">
|
||||
<?= $sibling_in_law->fullName() ?>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
|
||||
<ul>
|
||||
<?php foreach ($in_laws->children() as $child_in_law) : ?>
|
||||
<li>
|
||||
<a class="dropdown-item" href="<?= e($child_in_law->url()) ?>">
|
||||
<?= $child_in_law->fullName() ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<?= $relationship_service->getCloseRelationshipName($individual, $child) ?>
|
||||
<?php endif ?>
|
||||
</th>
|
||||
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<?php
|
||||
$thumb = $child->displayImage(40, 40, 'crop', ['class' => 'wt-family-navigator-thumb']);
|
||||
$thumbImg = preg_replace('/<a[^>]*>(.+?)<\/a>/s', '$1', $thumb);
|
||||
?>
|
||||
<?php if ($thumbImg !== '') : ?>
|
||||
<div class="wt-family-navigator-thumb-wrap">
|
||||
<a href="<?= e($child->url()) ?>"><?= $thumbImg ?></a>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<div>
|
||||
<?php if ($child->canShow()) : ?>
|
||||
<a href="<?= e($child->url()) ?>">
|
||||
<?= $child->fullName() ?>
|
||||
</a>
|
||||
<div class="small">
|
||||
<?= $child->lifespan() ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<?= $child->fullName() ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach ?>
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in New Issue
Block a user