improving tj.ganjoor.net design
This commit is contained in:
parent
9f54fa9bb8
commit
6092bfedcd
@ -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
|
||||
|
||||
@ -221,17 +221,29 @@ 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} - ";
|
||||
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>";
|
||||
if (IsPoemPage)
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user