Initial commit: webtrees Family Navigator Graph sidebar module

SVG-based sidebar widget displaying immediate family relationships (parents, siblings, spouses, children) with compact card layout, multi-spouse routing, wrapped rows, and ancestor/descendant indicators.
2026-03-16 14:02:13 +01:00
commit 0369f781fa
17 changed files with 2737 additions and 0 deletions
--- a/resources/css/family-nav-graph.css
+++ b/resources/css/family-nav-graph.css
@@ -0,0 +1,128 @@
+/* Family Navigator Graph — Sidebar Styles
+ *
+ * Uses the same class names as the full-diagram plugin so that
+ * a single theme override applies to both visualizations.
+ * The graph renders inline — no viewport, no zoom, no borders.
+ */
+
+/* ── Sidebar container — seamless, no viewport ── */
+.wt-sidebar-family-nav-graph {
+    padding: 0;
+}
+
+.fng-container {
+    position: relative;
+}
+
+.fng-container .full-diagram-chart svg {
+    width: 100%;
+    display: block;
+}
+
+/* ── Person cards (SVG) — shared with full-diagram ── */
+.person-card rect {
+    fill: #e8e8e8;
+    stroke: #b0b0b0;
+    stroke-width: 1;
+}
+
+.person-card.sex-m rect {
+    fill: #d4e6f9;
+    stroke: #7bafd4;
+}
+
+.person-card.sex-f rect {
+    fill: #f9d4e6;
+    stroke: #d47ba8;
+}
+
+.person-card.is-root rect {
+    stroke: #495057;
+    stroke-width: 2.5;
+    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
+}
+
+.person-card:hover rect {
+    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
+}
+
+/* Photo placeholder */
+.person-card .photo-placeholder {
+    fill: #ddd;
+    stroke: none;
+}
+
+.person-card.sex-m .photo-placeholder {
+    fill: #b8d4ed;
+}
+
+.person-card.sex-f .photo-placeholder {
+    fill: #edb8d4;
+}
+
+.person-card .silhouette {
+    fill: rgba(255, 255, 255, 0.6);
+}
+
+/* Card text */
+.person-card .person-name {
+    font-size: 10.5px;
+    font-weight: 600;
+    fill: #212529;
+    dominant-baseline: auto;
+}
+
+.person-card .person-dates {
+    font-size: 9px;
+    fill: #6c757d;
+    dominant-baseline: auto;
+}
+
+/* ── Connector lines — shared with full-diagram ── */
+.link {
+    fill: none;
+    stroke: #adb5bd;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.couple-link {
+    stroke: #868e96;
+}
+
+.ancestor-link {
+    stroke: #adb5bd;
+}
+
+.descendant-link {
+    stroke: #adb5bd;
+}
+
+/* ── More ancestors / descendants indicators — shared with full-diagram ── */
+.more-ancestors-indicator rect,
+.more-descendants-indicator rect {
+    fill: #dee2e6;
+    stroke: #adb5bd;
+    stroke-width: 1;
+}
+
+.more-ancestors-indicator line,
+.more-descendants-indicator line {
+    stroke: #adb5bd;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.person-card.sex-m .more-ancestors-indicator rect,
+.person-card.sex-m .more-descendants-indicator rect {
+    fill: #c4d9f0;
+    stroke: #7bafd4;
+}
+
+.person-card.sex-f .more-ancestors-indicator rect,
+.person-card.sex-f .more-descendants-indicator rect {
+    fill: #f0c4d9;
+    stroke: #d47ba8;
+}