83 lines
3.3 KiB
Plaintext
83 lines
3.3 KiB
Plaintext
@page "{id:int}"
|
|
@model GanjooRazor.Pages.FamilyTreeModel
|
|
@{
|
|
Layout = "_Layout";
|
|
}
|
|
@section Head {
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
}
|
|
@if (!string.IsNullOrEmpty(Model.LastError))
|
|
{
|
|
@Model.LastError
|
|
}
|
|
else
|
|
{
|
|
<!-- #hdr2 -->
|
|
|
|
<div id="fa">
|
|
|
|
<div id="maincnt">
|
|
|
|
<partial name="_InlineLoginPartial" model="Model" />
|
|
|
|
<div class="spacer"> </div>
|
|
|
|
<div class="poem">
|
|
<h1>
|
|
شجره‌نامهٔ @(string.IsNullOrEmpty(Model.RootPerson.FamilyTreeCaption) ? Model.RootPerson.Name : Model.RootPerson.FamilyTreeCaption)
|
|
<a href="/person/@Model.RootPerson.Id" class="up-btn up-btn--ghost up-btn--sm">بازگشت به صفحهٔ شخصیت</a>
|
|
</h1>
|
|
<p class="up-hint"><small>
|
|
برای مشاهدهٔ توضیحات هر شخصیت، روی آن کلیک کنید. برای پیمایش نمودار آن را با ماوس بکشید و با غلتک ماوس بزرگ/کوچک کنید.
|
|
این نمودار محدود به فرزندان این شخصیت نیست؛ تمام خویشاوندان به‌هم‌پیوسته (از جمله نیاکان و خانوادهٔ همسر) را نشان می‌دهد.
|
|
</small></p>
|
|
|
|
<div id="familytree-container" style="position:relative;width:100%;height:70vh;border:1px solid #d8cdb8;border-radius:6px;overflow:hidden;background:#faf7f0;">
|
|
<svg id="familytree-svg" width="100%" height="100%"></svg>
|
|
<div id="familytree-tooltip" class="ft-tooltip-panel" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer"> </div>
|
|
|
|
</div>
|
|
|
|
<partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.ft-box { fill: #fdf6e6; stroke: #8b6b4a; stroke-width: 1.5; }
|
|
.ft-box-current { fill: #f3e2b8; stroke: #7a4a2a; stroke-width: 2.5; }
|
|
.ft-box-text { font-size: 14px; fill: #4a3520; font-family: inherit; }
|
|
.ft-heart { font-size: 13px; fill: #a0455c; }
|
|
.ft-line { fill: none; stroke: #a99a7c; stroke-width: 1.5; }
|
|
.ft-line-spouse { stroke-dasharray: 3,3; }
|
|
.ft-tooltip-panel {
|
|
position: absolute; top: 10px; left: 10px; max-width: 300px;
|
|
background: #fffdf7; border: 1px solid #8b6b4a; border-radius: 8px;
|
|
padding: 12px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 10;
|
|
direction: rtl; text-align: right;
|
|
}
|
|
.ft-tooltip-close {
|
|
float: left; border: none; background: none; font-size: 18px; cursor: pointer; color: #7a4a2a;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var familyTreeData = @Html.Raw(Model.TreeDataJson);
|
|
var familyTreeRootId = @Model.RootPerson.Id;
|
|
</script>
|
|
<script src="/js/familytree.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
GanjoorFamilyTree.render('familytree-container', 'familytree-svg', 'familytree-tooltip', familyTreeData, familyTreeRootId);
|
|
});
|
|
</script>
|
|
|
|
@if (ViewData["TrackingScript"] != null && !string.IsNullOrEmpty(ViewData["TrackingScript"].ToString()))
|
|
{
|
|
@Html.Raw(ViewData["TrackingScript"])
|
|
}
|
|
}
|