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

Fix player dock UX: full-bleed LTR controls and delayed resume save.
build-and-deploy / deploy (push) Successful in 4m43s
Details

Browse Source 
Persist listening progress only after ~2.5s of real playback so opening an ayah no longer overwrites resume.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
masoodafar-web
2026-10-10 03:00:38 +03:30
parent 3ca743ca12
commit fd8caa3b7c
5 changed files with 116 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TafsirQuran.UI/wwwroot/css/app.css
+28 -18
View File
@@ -291,9 +291,13 @@ button, input { font: inherit; }
}
.title-author { font-weight: 500; color: var(--muted); font-size: 0.92em; }
.back-btn {
flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
border: 1px solid var(--line); background: #fff; cursor: pointer;
font-size: 1.25rem; line-height: 1; color: var(--brand-deep);
font-size: 1.6rem; line-height: 1; color: var(--brand-deep);
display: grid; place-items: center;
}
.ayah-page-title {
margin: 0 0 0.85rem; font-size: 1.1rem; font-weight: 700; color: var(--brand-deep);
}
.skeleton-stack { display: grid; gap: 0.65rem; margin: 0.5rem 0 1rem; }
@@ -313,39 +317,45 @@ button, input { font: inherit; }
.player-dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
background: rgba(243, 239, 230, 0.94);
backdrop-filter: blur(14px);
padding: 0;
padding-bottom: env(safe-area-inset-bottom);
background: #fff;
border-top: 1px solid var(--line);
box-shadow: 0 -10px 28px rgba(28, 43, 36, 0.08);
}
.dock-player {
max-width: 980px; margin: 0 auto;
border: 1px solid var(--line);
max-width: none; margin: 0; width: 100%;
border: 0; border-radius: 0;
background: #fff;
border-radius: 18px;
padding: 0.75rem 0.9rem 0.85rem;
padding: 0.85rem 1rem 0.95rem;
direction: rtl;
text-align: right;
box-sizing: border-box;
}
.dock-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
margin-bottom: 0.55rem;
margin-bottom: 0.65rem;
}
.dock-title {
border: 0; background: transparent; padding: 0; cursor: pointer;
font-weight: 700; font-size: 0.98rem; color: var(--ink); text-align: right;
font-weight: 700; font-size: 1.05rem; color: var(--ink); text-align: right;
}
.dock-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.dock-actions { display: flex; gap: 0.45rem; flex-shrink: 0; }
.icon-chip {
width: 36px; height: 36px; border-radius: 10px;
border: 1px solid var(--line); background: #fff; cursor: pointer;
color: var(--muted); font-size: 1rem;
width: 44px; height: 44px; border-radius: 12px;
border: 1px solid rgba(28, 43, 36, 0.22); background: #f3f6f4; cursor: pointer;
color: #1c2b24; font-size: 1.35rem;
display: grid; place-items: center;
}
.icon-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.rtl-controls {
display: grid; grid-template-columns: auto 1fr auto; gap: 0.65rem; align-items: center;
direction: rtl;
.ltr-controls {
display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center;
direction: ltr;
}
.ltr-controls .seek { direction: ltr; }
.ltr-controls .time {
font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--muted); white-space: nowrap;
min-width: 5.5rem; text-align: left;
}
.dock-empty { margin: 0; font-size: 0.9rem; }