admin/TafsirQuran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify all back buttons to the TOC chevron style.
build-and-deploy / deploy (push) Successful in 4m28s
Details

Browse Source 
Use the same ‹ icon, 44px square, and left placement on tafsir pages and the player TOC.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
masoodafar-web
2026-10-10 03:47:00 +03:30
parent 27a47a545e
commit 8edb8048a7
3 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TafsirQuran.UI/Components/PlayerToc.razor
+1 -1
View File
@@ -5,7 +5,7 @@
{ {
<div class="toc-sheet" dir="rtl" @key="tocKey"> <div class="toc-sheet" dir="rtl" @key="tocKey">
<div class="toc-header"> <div class="toc-header">
<button type="button" class="sheet-icon-btn toc-back" @onclick="Close" aria-label="بازگشت">‹</button> <button type="button" class="back-btn toc-back" @onclick="Close" aria-label="بازگشت">‹</button>
<div class="toc-header-text"> <div class="toc-header-text">
<strong>سوره @Session.SurahNameFa</strong> <strong>سوره @Session.SurahNameFa</strong>
<span class="muted">@Session.TafsirTitle</span> <span class="muted">@Session.TafsirTitle</span>
src/TafsirQuran.UI/Pages/TafsirPage.razor
+1 -1
View File
@@ -14,6 +14,7 @@
} }
else else
{ {
<button type="button" class="back-btn" @onclick="GoBack" aria-label="بازگشت">‹</button>
<h1 class="page-title-inline"> <h1 class="page-title-inline">
<span>@title</span> <span>@title</span>
@if (!string.IsNullOrWhiteSpace(author)) @if (!string.IsNullOrWhiteSpace(author))
@@ -21,7 +22,6 @@
<span class="title-author">(@author)</span> <span class="title-author">(@author)</span>
} }
</h1> </h1>
<button type="button" class="back-btn" @onclick="GoBack" aria-label="بازگشت">←</button>
} }
</header> </header>
src/TafsirQuran.UI/wwwroot/css/app.css
+11 -4
View File
@@ -282,12 +282,19 @@ button, input { font: inherit; }
.chip:disabled { opacity: 0.45; cursor: default; } .chip:disabled { opacity: 0.45; cursor: default; }
.page-header-row { .page-header-row {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
direction: ltr; /* back button physical left, like TOC */
} }
.page-title-inline { .page-title-inline {
margin: 0; font-size: clamp(1.15rem, 3.5vw, 1.45rem); font-weight: 700; margin: 0; font-size: clamp(1.15rem, 3.5vw, 1.45rem); font-weight: 700;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem;
direction: rtl;
text-align: right;
justify-content: flex-start;
} }
.title-author { font-weight: 500; color: var(--muted); font-size: 0.92em; } .title-author { font-weight: 500; color: var(--muted); font-size: 0.92em; }
.back-btn, .back-btn,
@@ -300,11 +307,11 @@ button, input { font: inherit; }
background: #fff; background: #fff;
box-shadow: 0 2px 8px rgba(28, 43, 36, 0.08); box-shadow: 0 2px 8px rgba(28, 43, 36, 0.08);
cursor: pointer; cursor: pointer;
color: var(--brand-deep); color: #1c2b24;
display: grid; place-items: center; display: grid; place-items: center;
font-size: 1.35rem; line-height: 1; font-size: 1.45rem; line-height: 1;
padding: 0;
} }
.back-btn { width: 52px; height: 52px; border-radius: 14px; font-size: 1.6rem; }
.icon-chip.on, .icon-chip.on,
.sheet-action.on .sheet-action-icon { .sheet-action.on .sheet-action-icon {
background: var(--brand); color: #fff; border-color: var(--brand); background: var(--brand); color: #fff; border-color: var(--brand);