improve UI/UX of the User Area

#496

GanjooRazor/Areas/User/Pages/CatEditor.cshtml

@@ -1,4 +1,4 @@
-@page
+@page
 @model GanjooRazor.Areas.User.Pages.CatEditorModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
@@ -6,134 +6,112 @@
     ViewData["Title"] = "ویرایشگر متن بخش";
     await GanjooRazor.Utils.GanjoorSessionChecker.ApplyPermissionsToViewData(Request, Response, ViewData);
 }
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
-
+    <h1>@ViewData["Title"]</h1>
-<div class="notice width-100per">
-    <p>لطفاً از گنجاندن ادعاهای قومیتی، جغرافیایی یا مذهبی یا هر گونه ادعایی که روی آنها اجماع وجود ندارد یا موجب بحث و اعتراض می‌شود در زندگینامه‌های شاعران خودداری کنید.</p>
-    <p>در گنجاندن پیوند به منابع حتی‌الامکان از ویکیپدیا یا وبگاه‌های مشهور با عمر بالا بدون وجود تبلیغات در آنها استفاده کنید. ارجاع به وبگاه‌های دیگر به دلیل  آن که ممکن است تبلیغاتی فرض شود و همینطور احتمال آن وجود دارد که در طولانی‌مدت با از دسترس خارج شدن وبگاه تبدیل به پیوند مرده شود مورد قبول قرار نمی‌گیرد.</p>
-    <p>از آنجا که متن پس از حذف پیوندها به صورت صرفاً متنی در نرم‌افزارهای جانبی مورد استفاده قرار می‌گیرد متن پیوندهای احتمالی را به صورتی تنظیم کنید که با حذف پیوند ناقص نشود.</p>
-
 </div>
 
-
+<div class="up-alert up-alert--warning">
+    <p>لطفاً از گنجاندن ادعاهای قومیتی، جغرافیایی یا مذهبی یا هر گونه ادعایی که روی آنها اجماع وجود ندارد یا موجب بحث و اعتراض می‌شود در زندگینامه‌های شاعران خودداری کنید.</p>
+    <p>در گنجاندن پیوند به منابع حتی‌الامکان از ویکیپدیا یا وبگاه‌های مشهور با عمر بالا بدون وجود تبلیغات در آنها استفاده کنید. ارجاع به وبگاه‌های دیگر به دلیل  آن که ممکن است تبلیغاتی فرض شود و همینطور احتمال آن وجود دارد که در طولانی‌مدت با از دسترس خارج شدن وبگاه تبدیل به پیوند مرده شود مورد قبول قرار نمی‌گیرد.</p>
+    <p class="up-mt-0">از آنجا که متن پس از حذف پیوندها به صورت صرفاً متنی در نرم‌افزارهای جانبی مورد استفاده قرار می‌گیرد متن پیوندهای احتمالی را به صورتی تنظیم کنید که با حذف پیوند ناقص نشود.</p>
+</div>
 
 @if (Model.MyLastEdit != null)
 {
     <script>
-            function deleteCatCorrection(id) {
+        async function deleteCatCorrection(id) {
-            if (!confirm('آیا از حذف تغییرات پیشنهادی اطمینان دارید؟'))
+            var ok = await upConfirm('آیا از حذف تغییرات پیشنهادی اطمینان دارید؟');
-                return;
+            if (!ok) return;
 
             $('#deletecorrections').hide();
             $('#saving').text('در حال ذخیره ...');
 
-            var url = '?handler=DeleteCatCorrection';
-
             $.ajax({
                 type: "POST",
-                url: url,
+                url: '?handler=DeleteCatCorrection',
-                data: {
+                data: { catid: id },
-                    catid: id,
+                error: function (e) {
-                },
+                    upToast(e.responseText || 'خطا رخ داد.', 'error');
-                error: function () {
-                    alert('خطا رخ داد.')
                 },
                 success: function () {
                     location.reload(true);
                 },
-
             });
         }
     </script>
 
-    <table>
+    <div class="up-card">
-        <tr>
+        <h2 class="up-card__title">ویرایش‌های بررسی‌نشدهٔ من</h2>
-            <td colspan="2">ویرایشهای بررسی نشدهٔ من</td>
+        <table>
-        </tr>
-
-        <tr>
-            <td>متن اولیه</td>
-            <td>تغییرات من</td>
-        </tr>
-
-        @if (Model.MyLastEdit.Description != null)
-        {
             <tr>
-                <td colspan="2">
+                <td>متن اولیه</td>
-                    تغییرات متن
+                <td>تغییرات من</td>
-                </td>
             </tr>
-            <tr>
-                <td>
-                    <p class="red-color" id="title-lastedit-original">@Model.MyLastEdit.OriginalDescription</p>
-                </td>
-                <td>
-                    <p class="green-color" id="title-lastedit-edited">@Model.MyLastEdit.Description</p>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <p id="title-lastedit-compare">@Model.MyLastEdit.OriginalDescription</p>
-                    <script>
-                        $(document).ready(function () {
-                            compareCorrectionBlocks('title-lastedit-original', 'title-lastedit-edited', 'title-lastedit-compare');
-                        });
-                    </script>
-                </td>
-            </tr>
-        }
-        @if (!string.IsNullOrEmpty(Model.MyLastEdit.Note))
-        {
-            <tr>
-                <td>یادداشت:</td>
-                <td>
-                    @Model.MyLastEdit.Note
-                </td>
-            </tr>
-        }
 
-        <tr>
+            @if (Model.MyLastEdit.Description != null)
-            <td colspan="2" class="td-button-container">
+            {
-                <a role="button" id="deletecorrections" class="editor-button background-red" onclick="deleteCatCorrection(@Model.PageInformation.PoetOrCat.Cat.Id)">انصراف و حذف این ویرایش</a>
+                <tr>
-            </td>
+                    <td colspan="2">
-        </tr>
+                        تغییرات متن
-
+                    </td>
-    </table>
+                </tr>
+                <tr>
+                    <td>
+                        <p class="red-color" id="title-lastedit-original">@Model.MyLastEdit.OriginalDescription</p>
+                    </td>
+                    <td>
+                        <p class="green-color" id="title-lastedit-edited">@Model.MyLastEdit.Description</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <p id="title-lastedit-compare">@Model.MyLastEdit.OriginalDescription</p>
+                        <script>
+                            $(document).ready(function () {
+                                compareCorrectionBlocks('title-lastedit-original', 'title-lastedit-edited', 'title-lastedit-compare');
+                            });
+                        </script>
+                    </td>
+                </tr>
+            }
+            @if (!string.IsNullOrEmpty(Model.MyLastEdit.Note))
+            {
+                <tr>
+                    <td>یادداشت:</td>
+                    <td>
+                        @Model.MyLastEdit.Note
+                    </td>
+                </tr>
+            }
+        </table>
+        <p id="saving" class="up-hint"></p>
+        <div class="up-form-actions">
+            <a role="button" id="deletecorrections" class="up-btn up-btn--danger" onclick="deleteCatCorrection(@Model.PageInformation.PoetOrCat.Cat.Id)">انصراف و حذف این ویرایش</a>
+        </div>
+    </div>
 }
 
-<form method="post">
+<div class="up-card">
-    <table style="max-width:100%; width:100%; margin:0" class="noborder">
+    <form method="post" class="up-form">
         @if (Model.PageInformation != null)
         {
-            <tr><td><a role="button" target="_blank" href="@Model.PageInformation.FullUrl" class="actionlink">@Model.PageInformation.FullTitle</a></td></tr>
+            <p><a role="button" target="_blank" href="@Model.PageInformation.FullUrl" class="up-btn up-btn--ghost">@Model.PageInformation.FullTitle</a></p>
         }
 
-        <tr>
+        <input asp-for="Correction.CatId" type="hidden" />
-            <td>
-                <span class="inputlabel">متن: </span>
-                <input asp-for="Correction.CatId" type="hidden" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <textarea asp-for="Correction.DescriptionHtml" class="inputTextarea editor" rows="20" style="width:100%"></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span class="inputlabel">توضیح این ویرایش: </span>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <input asp-for="Correction.Note" />
 
-            </td>
+        <div class="up-field">
-        </tr>
+            <label asp-for="Correction.DescriptionHtml">متن</label>
-        <tr>
+            <textarea asp-for="Correction.DescriptionHtml" class="inputTextarea editor" rows="20"></textarea>
-            <td>
+        </div>
-                <button type="submit" name="approve" id="approve" style="width:100%;color:white;background-color:green">ذخیره</button>
+
-            </td>
+        <div class="up-field">
-        </tr>
+            <label asp-for="Correction.Note">توضیح این ویرایش</label>
-    </table>
+            <input asp-for="Correction.Note" />
-</form>
+        </div>
+
+        <div class="up-form-actions">
+            <button type="submit" name="approve" id="approve" class="up-btn up-btn--success">ذخیره</button>
+        </div>
+    </form>
+</div>