Files
WebtreesBockenTheme/resources/views/modules/family_nav/sidebar-family.phtml
T
Alexander 02599e5876 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
2026-03-15 15:35:42 +01:00

167 lines
8.4 KiB
PHTML

<?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>