diff --git a/GanjooRazor/Areas/User/Pages/Editor.cshtml b/GanjooRazor/Areas/User/Pages/Editor.cshtml index 3ff0f68a..fc488fe8 100644 --- a/GanjooRazor/Areas/User/Pages/Editor.cshtml +++ b/GanjooRazor/Areas/User/Pages/Editor.cshtml @@ -1812,7 +1812,8 @@ else

@verseCoupletNumber.ToPersianNumbers() - + @{ var verseProgressPercent = Model.GetCoupletProgressPercent(verseCoupletNumber); } + ترتیب مصرع یا خط از ابتدا: @verse.VOrder.ToPersianNumbers()

@@ -1946,7 +1947,7 @@ else
- ⬇ رفتن به ذخیره + ⬇ رفتن به ذخیره @if (Model.ShowAdminOps && verse.VOrder > 1 && verse.VersePosition != RMuseum.Models.Ganjoor.VersePosition.Left) { ✂️ شکستن از اینجا @@ -2224,7 +2225,7 @@ else
- ⬇ رفتن به ذخیره + ⬇ رفتن به ذخیره
@@ -2242,7 +2243,8 @@ else

@summaryCoupletNumber.ToPersianNumbers() - + @{ var summaryProgressPercent = Model.GetCoupletProgressPercent(summaryCoupletNumber); } +

@@ -2318,7 +2320,7 @@ else
- ⬇ رفتن به ذخیره + ⬇ رفتن به ذخیره
} } diff --git a/GanjooRazor/Areas/User/Pages/Editor.cshtml.cs b/GanjooRazor/Areas/User/Pages/Editor.cshtml.cs index a95c62bf..0a3a094b 100644 --- a/GanjooRazor/Areas/User/Pages/Editor.cshtml.cs +++ b/GanjooRazor/Areas/User/Pages/Editor.cshtml.cs @@ -109,6 +109,19 @@ namespace GanjooRazor.Areas.User.Pages return Math.Min(100, coupletNumber * 100 / TotalCoupletsCount); } + /// + /// hsl() color for a 0-100 read-progress percentage - red at 0% (just started), green at + /// 100% (reached the end), smoothly interpolated in between (same traffic-light hue sweep + /// idea, 0deg..120deg). Used as the end color of the progress bar's fill gradient (see + /// up-verse-progress-fill in user-panel.css), so the fill itself reads redder near the start + /// of the poem and greener near the end. + /// + public string GetCoupletProgressColor(int percent) + { + int hue = Math.Max(0, Math.Min(100, percent)) * 120 / 100; + return $"hsl({hue}, 70%, 42%)"; + } + public PoemRelatedImage TextSourceImage { get; set; } diff --git a/GanjooRazor/wwwroot/css/user-panel.css b/GanjooRazor/wwwroot/css/user-panel.css index 49a9c756..7b798fe5 100644 --- a/GanjooRazor/wwwroot/css/user-panel.css +++ b/GanjooRazor/wwwroot/css/user-panel.css @@ -16,6 +16,7 @@ --up-success: #0a0; --up-success-dark: darkgreen; + --up-success-light: #e3f6e4; --up-danger: #f00; --up-danger-dark: darkred; --up-gray: slategray; @@ -53,6 +54,7 @@ --up-primary: #a54a4a; --up-primary-hover: #c25e5e; --up-on-primary: #fff; + --up-success-light: #1e3a22; } } @@ -189,6 +191,27 @@ color: var(--up-text); } +/* "jump to save" shortcut links scattered through the editor (⬇ رفتن به ذخیره) - a light green + tint instead of the plain ghost look, to visually tag them as the one action every section + points back to */ +.up-btn--save-jump { + background-color: var(--up-success-light); + border-color: var(--up-success-light); + color: var(--up-success-dark); +} + +.up-btn--save-jump:hover { + background-color: var(--up-success); + border-color: var(--up-success); + color: var(--up-on-primary); +} + +@media (prefers-color-scheme: dark) { + .up-btn--save-jump { + color: #bdeec2; + } +} + .up-btn--sm { padding: 4px 10px; font-size: 0.8rem; @@ -816,7 +839,10 @@ body.up-modal-open { .up-verse-progress-fill { display: block; height: 100%; - background: var(--up-primary); + /* red -> green gradient, set per-bar via inline style (ends at the color matching this + couplet's progress percentage) so the fill reads redder near the poem's start and + greener near its end - see GetCoupletProgressColor() in Editor.cshtml.cs */ + background: linear-gradient(to right, hsl(0, 70%, 45%), var(--up-progress-color, var(--up-success))); border-radius: 999px; }