improving tj.ganjoor.net design

This commit is contained in:
Hamid Reza Mohammadi 2026-08-07 16:00:14 +03:30
parent 9f54fa9bb8
commit 6092bfedcd
3 changed files with 33 additions and 51 deletions

View File

@ -86,26 +86,12 @@
}
else if (Model.IsCatPage)
{
<a class="tg-poet-badge" href="@Model.GanjoorPage.PoetOrCat.Poet.FullUrl" title="@Model.GanjoorPage.PoetOrCat.Poet.Nickname">
<span class="tg-poet-portrait-sm">
<img src="/images/poets/@(Model.GanjoorPage.PoetOrCat.Poet.Id).png" alt="@Model.GanjoorPage.PoetOrCat.Poet.Nickname" loading="lazy"
onerror="this.onerror=null;this.src='/images/poets/999.png';" />
</span>
<span class="tg-poet-badge-name">@Model.GanjoorPage.PoetOrCat.Poet.Nickname</span>
</a>
<div class="tg-cat-page">
@Html.Raw(Model.GanjoorPage.HtmlText)
</div>
}
else if (Model.IsPoemPage)
{
<a class="tg-poet-badge" href="@Model.GanjoorPage.Poem.Category.Poet.FullUrl" title="@Model.GanjoorPage.Poem.Category.Poet.Nickname">
<span class="tg-poet-portrait-sm">
<img src="/images/poets/@(Model.GanjoorPage.Poem.Category.Poet.Id).png" alt="@Model.GanjoorPage.Poem.Category.Poet.Nickname" loading="lazy"
onerror="this.onerror=null;this.src='/images/poets/999.png';" />
</span>
<span class="tg-poet-badge-name">@Model.GanjoorPage.Poem.Category.Poet.Nickname</span>
</a>
@Html.Raw(Model.GanjoorPage.HtmlText)
}
else

View File

@ -221,16 +221,28 @@ namespace TajikGanjoor.Pages
if (IsPoetPage)
{
ViewData["Title"] = $"Ганҷур - {GanjoorPage?.PoetOrCat.Poet.Nickname}";
BreadCrumpUrls += $" - <a href=\"{GanjoorPage?.PoetOrCat.Poet.FullUrl}\">{GanjoorPage?.PoetOrCat.Poet.Nickname}</a>";
BreadCrumpUrls += $" - <a href=\"{GanjoorPage?.PoetOrCat.Poet.FullUrl}\" class=\"tg-crumb-poet\"><img src=\"/images/poets/{GanjoorPage?.PoetOrCat.Poet.Id}.png\" alt=\"\" onerror=\"this.onerror=null;this.src='/images/poets/999.png';\" />{GanjoorPage?.PoetOrCat.Poet.Nickname}</a>";
}
else
if (IsCatPage || IsPoemPage)
{
string title = $"Ганҷур - ";
bool firstAncestor = true;
foreach (var gran in GanjoorPage.PoetOrCat.Cat.Ancestors)
{
title += $"{gran.Title} - ";
BreadCrumpUrls += $" - <a href=\"{gran.FullUrl}\">{gran.Title}</a>";
if (firstAncestor)
{
// Ancestors[0] is always the poet's own root category (see GanjoorService._GetCatById,
// which walks Parent all the way up) - prefix it with the poet's portrait instead of
// adding a separate crumb, so the image and the poet's name stay a single link.
BreadCrumpUrls += $" - <a href=\"{gran.FullUrl}\" class=\"tg-crumb-poet\"><img src=\"/images/poets/{GanjoorPage.PoetOrCat.Poet.Id}.png\" alt=\"\" onerror=\"this.onerror=null;this.src='/images/poets/999.png';\" />{gran.Title}</a>";
firstAncestor = false;
}
else
{
BreadCrumpUrls += $" - <a href=\"{gran.FullUrl}\">{gran.Title}</a>";
}
}
title += GanjoorPage.PoetOrCat.Cat.Title;
BreadCrumpUrls += $" - <a href=\"{GanjoorPage?.PoetOrCat.Cat.FullUrl}\">{GanjoorPage?.PoetOrCat.Cat.Title}</a>";

View File

@ -98,6 +98,11 @@ html, body {
.tg-breadcrumb {
font-family: 'PT Sans', sans-serif;
font-size: 0.95rem;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 4px;
row-gap: 2px;
}
.tg-breadcrumb a:first-child {
@ -321,47 +326,26 @@ html, body {
display: block;
}
/* small inline poet badge, used above category pages and poem pages so
readers landing on a poem or a subcategory can still see whose work
it is at a glance, without the full bio-page header treatment */
.tg-poet-badge {
/* small poet portrait inlined into the breadcrumb, prefixing the poet's
name wherever it appears there (poet page's own crumb, and the first
ancestor crumb on category/poem pages, which is always the poet's root
category - see Index.cshtml.cs) */
.tg-crumb-poet {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 4px auto 16px auto;
text-decoration: none;
color: var(--tg-ink-soft);
gap: 5px;
vertical-align: middle;
}
.tg-poet-portrait-sm {
display: block;
width: 36px;
height: 36px;
.tg-crumb-poet img {
width: 22px;
height: 22px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--tg-rule);
background: #fff;
flex: 0 0 auto;
}
.tg-poet-portrait-sm img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tg-poet-badge-name {
font-family: 'PT Serif', serif;
font-size: 0.95rem;
}
.tg-poet-badge:hover .tg-poet-portrait-sm {
border-color: var(--tg-accent);
}
.tg-poet-badge:hover .tg-poet-badge-name {
color: var(--tg-accent-deep);
border: 1px solid var(--tg-rule);
background: #fff;
vertical-align: middle;
flex: 0 0 auto;
}
/* GanjoorPage.HtmlText for poet/cat pages is server-generated plain