#271 adding the list of centuries and quick access utilities to the home page

This commit is contained in:
Hamid Reza Mohammadi 2022-01-05 19:19:22 +03:30
parent a0f642d369
commit e48e767586
3 changed files with 99 additions and 5 deletions

View File

@ -1,4 +1,5 @@
@model GanjooRazor.Pages.IndexModel
@using DNTPersianUtils.Core
<div id="hdr">
<h1><a href="/" title="گنجور"><img src="/image/gmg.gif" alt="گنجور" class="home-logo" /></a></h1>
</div>
@ -32,12 +33,57 @@
</div>
@{
var popularGroup = Model.PoetGroups.Where(g => g.Id == 0).Single();
if (popularGroup.ShowInTimeLine)
{
<div class="century">
@popularGroup.Name
</div>
}
<div class="spacer">
@foreach (var poet in popularGroup.Poets)
{
<div class="poet">
<a href="@poet.FullUrl" title="@poet.Name">
<img src="@(GanjooRazor.APIRoot.InternetUrl+poet.ImageUrl)" alt="@poet.Name" />
</a>
<div class="caption">
<a href="@poet.FullUrl">@poet.Nickname</a>
</div>
</div>
}
</div>
<div class="century" id="cl">
دسته‌بندی بر اساس قرن
</div>
<div class="circled-number-container">
@foreach (var g in Model.PoetGroups)
{
if (g.Id != 0)
{
<a href="#pg-@g.Id">
<div class="circled-number">
@((g.HalfCenturyOrder + 2).ToPersianNumbers())
</div>
</a>
}
}
<a href="#gmap">
<div class="circled-number">
<i class="noindent-info-button map-icon"></i>
</div>
</a>
</div>
foreach (var poetGroup in Model.PoetGroups)
{
if (poetGroup.Id == 0) continue;
if (poetGroup.ShowInTimeLine)
{
<div class="century">
<div class="century" id="pg-@poetGroup.Id">
@poetGroup.Name
<a role="button" class="w3tooltip cursor-pointer" href="#cl"><i class="info-buttons recitation-navigation"></i><span class="w3tooltiptext">برگشت</span></a>
</div>
}
<div class="spacer">
@ -53,15 +99,35 @@
</div>
}
</div>
@if (poetGroup.Id == 0)
{
<div class="century" id="cl">
دسته‌بندی بر اساس قرن
</div>
<div class="circled-number-container">
@foreach (var g in Model.PoetGroups)
{
if (g.Id != 0)
{
<a href="#pg-@g.Id">
<div class="circled-number">
@((g.HalfCenturyOrder + 2).ToPersianNumbers())
</div>
</a>
}
}
</div>
}
}
}
<div class="century">
<div class="century" id="gmap">
<a href="/map">
نقشهٔ خاستگاه سخنوران
</a>
<a role="button" class="w3tooltip cursor-pointer" href="#cl"><i class="info-buttons recitation-navigation"></i><span class="w3tooltiptext">برگشت</span></a>
</div>
<div class="spacer">
<div class="poet">

View File

@ -8,8 +8,8 @@
},
"AllowedHosts": "*",
"GoogleAnalyticsCode": "",
"APIRoot": "https://ganjgah.ir",
"GlobalAPIRoot": "https://ganjgah.ir",
"APIRoot": "https://api.ganjoor.net",
"GlobalAPIRoot": "https://api.ganjoor.net",
"SiteUrl": "http://localhost:33081",
"AggressiveCacheEnabled": "False",
"ReadOnlyMode": "False",

View File

@ -884,7 +884,7 @@ ol {
src: url(https://fonts.gstatic.com/s/materialicons/v107/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons, .pageicons, .inlinebutton, .info-buttons, .recitation-icons, .ringmenu-icon {
.material-icons, .pageicons, .inlinebutton, .info-buttons, .recitation-icons, .ringmenu-icon, .noindent-info-button {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
@ -906,6 +906,11 @@ ol {
text-indent: 5px;
}
.noindent-info-button {
direction: rtl;
vertical-align: middle;
}
.pageicons {
font-size: 14px;
direction: rtl;
@ -1516,3 +1521,26 @@ audio {
.recitation-navigation::after {
content: 'apps';
}
.circled-number-container {
width: 100%;
display: inline-table;
direction: ltr;
}
.circled-number {
border-radius: 50%;
width: 34px;
height: 34px;
padding: 2px;
background-color: rgba(139, 0, 0, 0.5);
border: 3px solid black;
color: white;
text-align: center;
display: inline-table;
margin: 2px;
}
.map-icon::after {
content: 'public';
}