improve UI/UX of the User Area

#496

GanjooRazor/Areas/Admin/Pages/Banners.cshtml

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

GanjooRazor/Areas/Admin/Pages/Donations.cshtml

@@ -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>

GanjooRazor/Areas/Admin/Pages/Expenses.cshtml

@@ -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>

GanjooRazor/Areas/Admin/Pages/LongRunningJobs.cshtml

@@ -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>

GanjooRazor/Areas/Admin/Pages/Poets.cshtml

@@ -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>

GanjooRazor/Areas/User/Pages/Editor.cshtml

@@ -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)

GanjooRazor/Pages/Shared/_AdminLayout.cshtml

@@ -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>

GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml

@@ -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>

GanjooRazor/wwwroot/css/user-panel.css

@@ -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 {