anas/divan
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

improve UI/UX of the User Area

Browse Source 
#496
This commit is contained in:
Hamid Reza Mohammadi 2026-08-06 20:29:57 +03:30
parent 2356435a70
commit 376bf2cf87
9 changed files with 85 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
GanjooRazor/Areas/Admin/Pages/Banners.cshtml
View File

@ -4,6 +4,7 @@
@{
Layout = "_AdminLayout";
ViewData["Title"] = "آگاهی‌ها";
ViewData["WideShell"] = true;
}
<h1>@ViewData["Title"]</h1>

3
GanjooRazor/Areas/Admin/Pages/Donations.cshtml
View File

@ -1,9 +1,10 @@
@page
@page
@model GanjooRazor.Areas.Admin.Pages.DonationsModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_AdminLayout";
ViewData["Title"] = "کمک‌های مالی";
ViewData["WideShell"] = true;
}
<div class="up-page-header">
<h1>@ViewData["Title"]</h1>

3
GanjooRazor/Areas/Admin/Pages/Expenses.cshtml
View File

@ -1,9 +1,10 @@
@page
@page
@model GanjooRazor.Areas.Admin.Pages.ExpensesModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_AdminLayout";
ViewData["Title"] = "هزینه‌ها";
ViewData["WideShell"] = true;
}
<div class="up-page-header">
<h1>@ViewData["Title"]</h1>

3
GanjooRazor/Areas/Admin/Pages/LongRunningJobs.cshtml
View File

@ -1,9 +1,10 @@
@page
@page
@model GanjooRazor.Areas.Admin.Pages.LongRunningJobsModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_AdminLayout";
ViewData["Title"] = "کارهای جاری";
ViewData["WideShell"] = true;
}
<div class="up-page-header">
<h1>@ViewData["Title"]</h1>

3
GanjooRazor/Areas/Admin/Pages/Poets.cshtml
View File

@ -1,9 +1,10 @@
@page
@page
@model GanjooRazor.Areas.Admin.Pages.PoetsModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_AdminLayout";
ViewData["Title"] = "مدیریت سخنوران";
ViewData["WideShell"] = true;
}
<div class="up-page-header">
<h1>@ViewData["Title"]</h1>

16
GanjooRazor/Areas/User/Pages/Editor.cshtml
View File

@ -786,7 +786,7 @@ else
<label for="id-0">عنوان ویراستهٔ من</label>
@if (Model.MyLastEdit != null && Model.MyLastEdit.Title != null)
{
<div id="id-0" name="id-0" contenteditable="true" class="background-white">@Model.MyLastEdit.Title</div>
<div id="id-0" name="id-0" contenteditable="true" class="up-editable">@Model.MyLastEdit.Title</div>
<script>
$(document).ready(function () {
editorcompare(0);
@ -798,7 +798,7 @@ else
}
else
{
<div type="text" id="id-0" name="id-0" contenteditable="true" class="background-white">@Model.PageInformation.Poem.Title</div>
<div type="text" id="id-0" name="id-0" contenteditable="true" class="up-editable">@Model.PageInformation.Poem.Title</div>
<script>
document.getElementById("id-0").addEventListener("input", function () {
editorcompare(0)
@ -830,7 +830,7 @@ else
<label for="id-@($"{verse.VOrder}")">ویراستهٔ من</label>
@if (Model.MyLastEdit != null && Model.MyLastEdit.VerseOrderText != null && Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == verse.VOrder && !string.IsNullOrEmpty(v.Text)).Any())
{
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" class="background-white">@Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == verse.VOrder).First().Text</div>
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" class="up-editable">@Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == verse.VOrder).First().Text</div>
<script>
document.getElementById("id-@($"{verse.VOrder}")").addEventListener("input", function () {
editorcompare(@verse.VOrder)
@ -842,7 +842,7 @@ else
}
else
{
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" class="background-white">@verse.Text</div>
<div id="id-@($"{verse.VOrder}")" name="name-@($"{verse.VOrder}")" contenteditable="true" class="up-editable">@verse.Text</div>
<script>
document.getElementById("id-@($"{verse.VOrder}")").addEventListener("input", function () {
editorcompare(@verse.VOrder)
@ -1191,7 +1191,7 @@ else
<label for="summary-0">خلاصهٔ ویراستهٔ من (به زبان غیرمحاوره‌ای و همه‌کس فهم)</label>
@if (Model.MyLastEdit != null && Model.MyLastEdit.PoemSummary != null)
{
<div id="summary-0" name="summary-0" contenteditable="true" class="background-white">@Model.MyLastEdit.PoemSummary</div>
<div id="summary-0" name="summary-0" contenteditable="true" class="up-editable">@Model.MyLastEdit.PoemSummary</div>
<script>
document.getElementById("summary-0").addEventListener("input", function () {
summarycompare(0)
@ -1203,7 +1203,7 @@ else
}
else
{
<div id="summary-0" name="summary-0" contenteditable="true" class="background-white">@Model.PageInformation.Poem.PoemSummary</div>
<div id="summary-0" name="summary-0" contenteditable="true" class="up-editable">@Model.PageInformation.Poem.PoemSummary</div>
<script>
document.getElementById("summary-0").addEventListener("input", function () {
summarycompare(0)
@ -1276,7 +1276,7 @@ else
<label for="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")">معنای ویراستهٔ من (به زبان غیرمحاوره‌ای و همه‌کس فهم)</label>
@if (Model.MyLastEdit != null && Model.MyLastEdit.VerseOrderText != null && Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == Model.PageInformation.Poem.Verses[verseIndex].VOrder && !string.IsNullOrEmpty(v.CoupletSummary)).Any())
{
<div id="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" name="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" contenteditable="true" class="background-white">@Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == Model.PageInformation.Poem.Verses[verseIndex].VOrder).First().CoupletSummary</div>
<div id="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" name="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" contenteditable="true" class="up-editable">@Model.MyLastEdit.VerseOrderText.Where(v => v.VORder == Model.PageInformation.Poem.Verses[verseIndex].VOrder).First().CoupletSummary</div>
<script>
document.getElementById("summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")").addEventListener("input", function () {
summarycompare(@Model.PageInformation.Poem.Verses[verseIndex].VOrder)
@ -1288,7 +1288,7 @@ else
}
else
{
<div id="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" name="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" contenteditable="true" class="background-white">@Model.PageInformation.Poem.Verses[verseIndex].CoupletSummary</div>
<div id="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" name="summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")" contenteditable="true" class="up-editable">@Model.PageInformation.Poem.Verses[verseIndex].CoupletSummary</div>
<script>
document.getElementById("summary-@($"{Model.PageInformation.Poem.Verses[verseIndex].VOrder}")").addEventListener("input", function () {
summarycompare(@Model.PageInformation.Poem.Verses[verseIndex].VOrder)

2
GanjooRazor/Pages/Shared/_AdminLayout.cshtml
View File

@ -463,7 +463,7 @@
</div>
</nav>
</header>
<div class="container up-shell">
<div class="container up-shell @(ViewData["WideShell"] is true ? "up-shell--wide" : "")">
<main role="main" class="pb-3">
@RenderBody()
</main>

2
GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
View File

@ -168,7 +168,7 @@
</div>
</nav>
</header>
<div class="container up-shell">
<div class="container up-shell @(ViewData["WideShell"] is true ? "up-shell--wide" : "")">
<main role="main" class="pb-3">
@RenderBody()
</main>

68
GanjooRazor/wwwroot/css/user-panel.css
View File

@ -62,6 +62,14 @@
font-family: var(--up-font);
color: var(--up-text);
text-align: right;
max-width: 760px;
margin: 0 auto;
}
/* opt-out for pages that are genuinely wide data grids (Poets, Donations,
Banners, LongRunningJobs, Expenses) - set via ViewData["WideShell"] */
.up-shell--wide {
max-width: none;
}
.up-page-header {
@ -524,7 +532,8 @@ body.up-modal-open {
.up-field input[type="password"],
.up-field input[type="email"],
.up-field input:not([type]),
.up-field textarea {
.up-field textarea,
.up-field select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--up-border);
@ -535,18 +544,73 @@ body.up-modal-open {
font-size: 0.9rem;
}
.up-field select {
width: auto;
max-width: 100%;
cursor: pointer;
}
.up-field textarea {
min-height: 120px;
resize: vertical;
}
.up-field input:focus,
.up-field textarea:focus {
.up-field textarea:focus,
.up-field select:focus {
outline: none;
border-color: var(--up-primary);
box-shadow: 0 0 0 3px rgba(51, 0, 0, 0.12);
}
/* ---------- editable surfaces (contenteditable divs standing in for inputs) ----------
Needs a strong, unmistakable affordance since it isn't a native form control -
nothing else on the page should look like this. */
.up-editable {
display: block;
width: 100%;
min-height: 1.6em;
padding: 9px 12px;
border: 1px solid var(--up-primary);
border-radius: var(--up-radius-sm);
background: var(--up-surface-alt);
color: var(--up-text);
font-family: var(--up-font);
font-size: 0.9rem;
cursor: text;
transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.up-editable:hover {
border-color: var(--up-primary);
box-shadow: 0 0 0 2px rgba(51, 0, 0, 0.08);
}
.up-editable:focus {
outline: none;
background: var(--up-surface);
border-color: var(--up-primary);
box-shadow: 0 0 0 3px rgba(51, 0, 0, 0.16);
}
@media (prefers-color-scheme: dark) {
.up-editable:hover {
box-shadow: 0 0 0 2px rgba(165, 74, 74, 0.18);
}
.up-editable:focus {
box-shadow: 0 0 0 3px rgba(165, 74, 74, 0.3);
}
}
/* read-only display text: kept deliberately plain/quiet so it never competes
visually with .up-editable / real form controls */
.up-field-static {
background: none;
border: none;
}
@media (prefers-color-scheme: dark) {
.up-field input:focus,
.up-field textarea:focus {