From 63e5d5b999c0536682a4ab0ab6106413ce2ad552 Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Sat, 4 Dec 2021 10:21:08 +0330
Subject: [PATCH] #254 collapsing / expanding the comments section + versioning
 css + js files

---
 GanjooRazor/Pages/AudioClip.cshtml           |   4 +-
 GanjooRazor/Pages/Bp.cshtml                  |   2 +-
 GanjooRazor/Pages/Error.cshtml               |   2 +-
 GanjooRazor/Pages/Golha.cshtml               |   2 +-
 GanjooRazor/Pages/Index.cshtml               |   4 +-
 GanjooRazor/Pages/Login.cshtml               |   2 +-
 GanjooRazor/Pages/Map.cshtml                 |   2 +-
 GanjooRazor/Pages/Pin.cshtml                 |   2 +-
 GanjooRazor/Pages/ReportComment.cshtml       |   2 +-
 GanjooRazor/Pages/ResetPassword.cshtml       |   2 +-
 GanjooRazor/Pages/Search.cshtml              |   4 +-
 GanjooRazor/Pages/Shared/_AdminLayout.cshtml |   2 +-
 GanjooRazor/Pages/Shared/_Layout.cshtml      |   2 +-
 GanjooRazor/Pages/SignUp.cshtml              |   2 +-
 GanjooRazor/Pages/Spotify.cshtml             |   2 +-
 GanjooRazor/Pages/Trans.cshtml               |   2 +-
 GanjooRazor/Pages/_GanjoorPagePartial.cshtml | 265 ++++++++++---------
 GanjooRazor/Pages/errors/404.cshtml          |   2 +-
 GanjooRazor/Pages/errors/503.cshtml          |   2 +-
 GanjooRazor/wwwroot/css/p8.css               |   9 +-
 20 files changed, 162 insertions(+), 154 deletions(-)

diff --git a/GanjooRazor/Pages/AudioClip.cshtml b/GanjooRazor/Pages/AudioClip.cshtml
index b45aeb59..5f4c9ada 100644
--- a/GanjooRazor/Pages/AudioClip.cshtml
+++ b/GanjooRazor/Pages/AudioClip.cshtml
@@ -15,7 +15,7 @@
         گنجور &raquo; نمایش خوانش
     </title>
     <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
-    <link href="~/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="~/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script>
@@ -149,7 +149,7 @@
         </p>
 
         <script src="~/lib/jquery/dist/jquery.min.js"></script>
-        <script src="~/js/bk.js?version=13"></script>
+        <script src="~/js/bk.js?version=14"></script>
         <script src="~/js/jplayersupport.js"></script>
         <script src="~/js/vaabd.js"></script>
         <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
diff --git a/GanjooRazor/Pages/Bp.cshtml b/GanjooRazor/Pages/Bp.cshtml
index dd58bbd1..ceceea82 100644
--- a/GanjooRazor/Pages/Bp.cshtml
+++ b/GanjooRazor/Pages/Bp.cshtml
@@ -11,7 +11,7 @@
     <title>انتخاب قطعهٔ موسیقی مرتبط با شعر از بیپتونز</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/Error.cshtml b/GanjooRazor/Pages/Error.cshtml
index 33e263df..f4ed9106 100644
--- a/GanjooRazor/Pages/Error.cshtml
+++ b/GanjooRazor/Pages/Error.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/Pages/Golha.cshtml b/GanjooRazor/Pages/Golha.cshtml
index da66d00c..f65b97e2 100644
--- a/GanjooRazor/Pages/Golha.cshtml
+++ b/GanjooRazor/Pages/Golha.cshtml
@@ -10,7 +10,7 @@
     <title>انتخاب قطعه‌ای از برنامهٔ گلها مرتبط با این شعر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/js/golha.js"></script>
diff --git a/GanjooRazor/Pages/Index.cshtml b/GanjooRazor/Pages/Index.cshtml
index ed7e1c8f..43bad0a4 100644
--- a/GanjooRazor/Pages/Index.cshtml
+++ b/GanjooRazor/Pages/Index.cshtml
@@ -17,7 +17,7 @@
         <meta name="robots" content="noindex, nofollow" />
     }
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
@@ -25,7 +25,7 @@
     <script>
         var playerScrollLock = false;
     </script>
-    <script src="/js/bk.js?version=13"></script>
+    <script src="/js/bk.js?version=14"></script>
 
     @if (Model.IsHomePage)
     {
diff --git a/GanjooRazor/Pages/Login.cshtml b/GanjooRazor/Pages/Login.cshtml
index c1c69c8b..bc5314f0 100644
--- a/GanjooRazor/Pages/Login.cshtml
+++ b/GanjooRazor/Pages/Login.cshtml
@@ -13,7 +13,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Map.cshtml b/GanjooRazor/Pages/Map.cshtml
index aab8e7b4..b8fef0cc 100644
--- a/GanjooRazor/Pages/Map.cshtml
+++ b/GanjooRazor/Pages/Map.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="شاعران و نویسندگان گنجور روی نقشهٔ جغرافیایی" />
     <meta charset="utf-8" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="/css/leaflet.css" />
     <style>
         .leaflet-container {
diff --git a/GanjooRazor/Pages/Pin.cshtml b/GanjooRazor/Pages/Pin.cshtml
index 8af4f17b..68d65a64 100644
--- a/GanjooRazor/Pages/Pin.cshtml
+++ b/GanjooRazor/Pages/Pin.cshtml
@@ -11,7 +11,7 @@
     <title>پیشنهاد شعر مرتبط با تصویر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist//jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/ReportComment.cshtml b/GanjooRazor/Pages/ReportComment.cshtml
index 6dbf3303..59d00782 100644
--- a/GanjooRazor/Pages/ReportComment.cshtml
+++ b/GanjooRazor/Pages/ReportComment.cshtml
@@ -9,7 +9,7 @@
     <meta charset="utf-8" />
     <title>درخواست حذف حاشیه</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <style>
     label{
 		width:100px;
diff --git a/GanjooRazor/Pages/ResetPassword.cshtml b/GanjooRazor/Pages/ResetPassword.cshtml
index 9440f276..952fc106 100644
--- a/GanjooRazor/Pages/ResetPassword.cshtml
+++ b/GanjooRazor/Pages/ResetPassword.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Search.cshtml b/GanjooRazor/Pages/Search.cshtml
index 4ff5f3be..f7b29fcb 100644
--- a/GanjooRazor/Pages/Search.cshtml
+++ b/GanjooRazor/Pages/Search.cshtml
@@ -15,7 +15,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
@@ -187,7 +187,7 @@
         </div>
 
         <script src="/lib/jquery/dist/jquery.min.js"></script>
-        <script src="/js/bk.js?version=13"></script>
+        <script src="/js/bk.js?version=14"></script>
         <script src="/js/vaabd.js"></script>
 
         @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
diff --git a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
index 3fac9e51..6251d2e1 100644
--- a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
+++ b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
diff --git a/GanjooRazor/Pages/Shared/_Layout.cshtml b/GanjooRazor/Pages/Shared/_Layout.cshtml
index 8e5a7dd2..274dd252 100644
--- a/GanjooRazor/Pages/Shared/_Layout.cshtml
+++ b/GanjooRazor/Pages/Shared/_Layout.cshtml
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
diff --git a/GanjooRazor/Pages/SignUp.cshtml b/GanjooRazor/Pages/SignUp.cshtml
index 73f3a08f..4396c150 100644
--- a/GanjooRazor/Pages/SignUp.cshtml
+++ b/GanjooRazor/Pages/SignUp.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Spotify.cshtml b/GanjooRazor/Pages/Spotify.cshtml
index 41a42489..1f4eb092 100644
--- a/GanjooRazor/Pages/Spotify.cshtml
+++ b/GanjooRazor/Pages/Spotify.cshtml
@@ -11,7 +11,7 @@
     <title>انتخاب قطعهٔ موسیقی مرتبط با شعر از اسپاتیفای</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/Trans.cshtml b/GanjooRazor/Pages/Trans.cshtml
index cd915dc4..738713d5 100644
--- a/GanjooRazor/Pages/Trans.cshtml
+++ b/GanjooRazor/Pages/Trans.cshtml
@@ -14,7 +14,7 @@
         گنجور &raquo; برگردان‌ها و نویس‌های شعر
     </title>
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
-    <link href="~/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="~/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 </head>
diff --git a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
index e7dd06b7..aa9297a1 100644
--- a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
+++ b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
@@ -428,11 +428,13 @@
 
                                 @if (Model.GanjoorPage.Poem.Songs.Length == 0)
                                 {
-                                    <p>
-                                        <a href="@Html.Raw($"/spotify?p={Model.GanjoorPage.Id}")" onclick="wpopen(this.href); return false" class="pagebutton comments-link">
-                                            معرفی آهنگهایی که در متن آنها از این شعر استفاده شده است<i class="info-buttons">music_note</i>
-                                        </a>
-                                    </p>
+                                    <div class="related-songs">
+                                        <p>
+                                            <a href="@Html.Raw($"/spotify?p={Model.GanjoorPage.Id}")" onclick="wpopen(this.href); return false" class="pagebutton comments-link">
+                                                معرفی آهنگهایی که در متن آنها از این شعر استفاده شده است<i class="info-buttons">music_note</i>
+                                            </a>
+                                        </p>
+                                    </div>
                                 }
                                 else
                                 {
@@ -501,138 +503,141 @@
                             </div>
 
                             <div class="century">
-                                حاشیه‌ها
+                                حاشیه‌ها <a role="button" class="w3tooltip" style="cursor: pointer;" onclick="switch_section('comments-section', 'comments-collapse-button')"><i class="info-buttons" id="comments-collapse-button" style="transform: rotate(180deg)">expand_circle_down</i><span class="w3tooltiptext">جمع شود / باز شود</span></a>
                             </div>
 
-                            @switch (Model.GanjoorPage.Poem.Comments.Length)
-                            {
-                                case 0:
-                                    <p>
-                                        تا به حال حاشیه‌ای برای این شعر نوشته نشده است. <a href="#commentform" class="comments-link" title="شما حاشیه بگذارید ...">💬 شما حاشیه بگذارید ...</a>
-                                    </p>
-                                    break;
-                                case 1:
-                                    <p>
-                                        تا به حال یک حاشیه برای این شعر نوشته شده است. <a href="#commentform" class="comments-link" title="شما حاشیه بگذارید ...">💬 شما حاشیه بگذارید ...</a>
-                                    </p>
-                                    break;
-                                default:
-                                    <p>
-                                        تا به حال @Html.Raw(Model.GanjoorPage.Poem.Comments.Length.ToPersianNumbers()) حاشیه برای این شعر نوشته شده است. <a href="#commentform" class="comments-link" title="شما حاشیه بگذارید ...">💬 شما حاشیه بگذارید ...</a>
-                                    </p>
-                                    break;
-                            }
-
-                            <div id="comments-block">
-                                @foreach (var comment in Model.GanjoorPage.Poem.Comments)
+                            <div id="comments-section">
+                                @switch (Model.GanjoorPage.Poem.Comments.Length)
                                 {
-                                    <partial name="_CommentPartial" model=Model.GetCommentModel(comment) />
+                                    case 0:
+                                        <p>
+                                            تا به حال حاشیه‌ای برای این شعر نوشته نشده است. <a href="#commentform" class="comments-link" title="شما حاشیه بگذارید ...">💬 شما حاشیه بگذارید ...</a>
+                                        </p>
+                                        break;
+                                    case 1:
+                                        <p>
+                                            تا به حال یک حاشیه برای این شعر نوشته شده است. <a href="#commentform" class="comments-link" title="شما حاشیه بگذارید ...">💬 شما حاشیه بگذارید ...</a>
+                                        </p>
+                                        break;
+                                    default:
+                                        <p>
+                                            تا به حال @Html.Raw(Model.GanjoorPage.Poem.Comments.Length.ToPersianNumbers()) حاشیه برای این شعر نوشته شده است. <a href="#commentform" class="comments-link" title="شما حاشیه بگذارید ...">💬 شما حاشیه بگذارید ...</a>
+                                        </p>
+                                        break;
+                                }
+
+                                <div id="comments-block">
+                                    @foreach (var comment in Model.GanjoorPage.Poem.Comments)
+                                    {
+                                        <partial name="_CommentPartial" model=Model.GetCommentModel(comment) />
+                                    }
+                                </div>
+
+                                @if (Model.LoggedIn)
+                                {
+
+                                    <form method="post" id="commentform" action="?handler=Comment">
+                                        <fieldset>
+                                            <legend>💬 شما حاشیه بگذارید ...</legend>
+                                            <table style="max-width:100%; width:100%; margin:0">
+                                                <tr>
+                                                    <td>
+                                                        <div class="required">
+                                                            <textarea name="comment" id="comment" class="inputTextarea editor" tabindex="4" rows="10" style="width:100%"></textarea>
+                                                        </div>
+                                                        <input type="hidden" name="poemId" id="poemId" value="@Model.GanjoorPage.Id" />
+                                                        <input type="hidden" name="coupletIndex" value="-1" />
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <button name="postcomment" id="postcomment" class="submitCommentButton" onclick="return postComment('', '#postcomment');" style="width:100%">درج حاشیه</button>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+
+                                            <div class="notice">
+                                                <p>
+                                                    لطفاً توجه داشته باشید که حاشیه‌ها برای ثبت نظرات شما راجع به <strong>همین شعر</strong> در نظر گرفته شده‌اند. در صورتی که در متن ثبت شدهٔ شعر در گنجور تفاوتهایی غیر از موارد قابل ویرایش یافتید، در مورد این شعر نظر یا احساس خاصی دارید یا مطلب خاصی در مورد آن می‌دانید یا دوست دارید دربارهٔ آن از دیگران چیزی بپرسید یک حاشیه برای آن بنویسید. <span style="color:#f00">لطفاً از درج مطالب غیرمرتبط با متن این شعر خاص خودداری فرمایید</span> و حتی‌الامکان سعی کنید متن حاشیهٔ خود را با حروف فارسی درج کنید (حاشیه‌ها بازبینی خواهند شد و موارد غیرمرتبط و ناقض این نکات حذف می‌شوند).
+                                                </p>
+                                                <p>
+                                                    <span style="color:#f00">بحثهای مذهبی و اعتقادی و ارجاع توهین‌آمیز نسبت به بزرگان ادیان و همینطور بحثهای قومیتی و توهین به فرهنگها و قومیتها و زبانها و بحثهای مرتبط با سیاست روز از مصادیق حاشیه‌های نامناسب محسوب می‌شوند.</span> لطفاً از هیچ قوم و مذهبی با صفات زننده صحبت نکنید و به خاطر داشته باشید که همهٔ اقوام (حتی ایرانی‌ها) در مقاطعی از تاریخ خود نسبت به اقوام دیگر بدوی محسوب می‌شده‌اند یا با تعدی به خاک همسایگان خود نسبت به آنها ستم روا داشته‌اند.
+                                                </p>
+                                                <p>
+                                                    در خطاب قرار دادن کاربران دیگر -چه به شکل خاص و چه به شکل عمومی- فارغ از این که در حاشیه‌هایشان نظرات معقولی را عنوان کرده‌اند یا خیر، رعایت احترام را بفرمایید. بی‌احترامی به دیگر کاربران (و البته شخصیتهای دیگر از جمله هنرمندان و ...) از مصادیق حاشیه‌های نامناسب محسوب می‌شود و فارغ از ارزش محتوایی، حاشیهٔ فرد خاطی به محض دریافت گزارش تخلف حذف خواهد شد.
+                                                </p>
+                                                <p>
+                                                    <span style="color:#0a0">لطفاً در صورتی که تفاوتها را با استناد به نسخه‌های چاپی یا خطی گزارش می‌کنید این مسئله را با ذکر منبع مطرح نمایید. اشتباهات تایپی و غلطهای املایی را از طریق دکمهٔ «ویرایش» تصحیح کنید.</span>
+                                                </p>
+                                            </div>
+                                        </fieldset>
+
+                                    </form>
+
+
+                                    <div id="id02" class="modal">
+                                        <span onclick="document.getElementById('id02').style.display='none'"
+                                  class="close" title="بستن">&times;</span>
+                                        <form class="modal-content animate" method="post" id="editcommentform" action="?handler=EditComment">
+                                            <table style="max-width:100%; width:100%; margin:0">
+                                                <tr>
+                                                    <td>
+                                                        <textarea name="editCommentText" id="editCommentText" class="inputTextarea editor" tabindex="4" rows="10" style="width:100%"></textarea>
+                                                        <input type="hidden" name="editCommentId" id="editCommentId" value="" />
+                                                        <input type="hidden" name="editCommentCoupletIndex" id="editCommentCoupletIndex" value="" />
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <button name="editcomment" id="editcomment" class="inputSubmit" onclick="return editComment();" style="width:100%">ویرایش حاشیه</button>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </form>
+                                    </div>
+
+                                    <div id="id03" class="modal">
+                                        <span onclick="document.getElementById('id03').style.display='none'"
+                                  class="close" title="بستن">&times;</span>
+                                        <form class="modal-content animate" method="post" id="replycommentform" action="?handler=Reply">
+                                            <table style="max-width:100%; width:100%; margin:0">
+                                                <tr>
+                                                    <td>
+                                                        <textarea name="replyCommentText" id="replyCommentText" class="inputTextarea editor" tabindex="4" rows="10" style="width:100%"></textarea>
+                                                        <input type="hidden" name="refPoemId" id="refPoemId" value="@Model.GanjoorPage.Id" />
+                                                        <input type="hidden" name="refCommentId" id="refCommentId" value="" />
+                                                        <input type="hidden" name="refCommentDivSuffix" id="refCommentDivSuffix" value="" />
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <button name="replycomment" id="replycomment" class="inputSubmit" onclick="return postReplyComment();" style="width:100%">درج پاسخ به حاشیه</button>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <p>در پاسخ به:</p>
+                                                        <div id="refComment"></div>
+                                                    </td>
+                                                </tr>
+                                            </table>
+
+                                        </form>
+                                    </div>
+                                }
+                                else
+                                {
+                                    <div class="notice" id="commentform">
+                                        <p>
+                                            برای حاشیه‌گذاری باید در گنجور <a href="/signup" target="_blank">ثبت نام</a> کنید و با نام کاربری خود از طریق آیکون 👤 گوشهٔ پایین سمت چپ صفحات به آن وارد شوید.
+                                        </p>
+                                    </div>
                                 }
                             </div>
 
 
-                            @if (Model.LoggedIn)
-                            {
-
-                                <form method="post" id="commentform" action="?handler=Comment">
-                                    <fieldset>
-                                        <legend>💬 شما حاشیه بگذارید ...</legend>
-                                        <table style="max-width:100%; width:100%; margin:0">
-                                            <tr>
-                                                <td>
-                                                    <div class="required">
-                                                        <textarea name="comment" id="comment" class="inputTextarea editor" tabindex="4" rows="10" style="width:100%"></textarea>
-                                                    </div>
-                                                    <input type="hidden" name="poemId" id="poemId" value="@Model.GanjoorPage.Id" />
-                                                    <input type="hidden" name="coupletIndex" value="-1" />
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <button name="postcomment" id="postcomment" class="submitCommentButton" onclick="return postComment('', '#postcomment');" style="width:100%">درج حاشیه</button>
-                                                </td>
-                                            </tr>
-                                        </table>
-
-
-                                        <div class="notice">
-                                            <p>
-                                                لطفاً توجه داشته باشید که حاشیه‌ها برای ثبت نظرات شما راجع به <strong>همین شعر</strong> در نظر گرفته شده‌اند. در صورتی که در متن ثبت شدهٔ شعر در گنجور تفاوتهایی غیر از موارد قابل ویرایش یافتید، در مورد این شعر نظر یا احساس خاصی دارید یا مطلب خاصی در مورد آن می‌دانید یا دوست دارید دربارهٔ آن از دیگران چیزی بپرسید یک حاشیه برای آن بنویسید. <span style="color:#f00">لطفاً از درج مطالب غیرمرتبط با متن این شعر خاص خودداری فرمایید</span> و حتی‌الامکان سعی کنید متن حاشیهٔ خود را با حروف فارسی درج کنید (حاشیه‌ها بازبینی خواهند شد و موارد غیرمرتبط و ناقض این نکات حذف می‌شوند).
-                                            </p>
-                                            <p>
-                                                <span style="color:#f00">بحثهای مذهبی و اعتقادی و ارجاع توهین‌آمیز نسبت به بزرگان ادیان و همینطور بحثهای قومیتی و توهین به فرهنگها و قومیتها و زبانها و بحثهای مرتبط با سیاست روز از مصادیق حاشیه‌های نامناسب محسوب می‌شوند.</span> لطفاً از هیچ قوم و مذهبی با صفات زننده صحبت نکنید و به خاطر داشته باشید که همهٔ اقوام (حتی ایرانی‌ها) در مقاطعی از تاریخ خود نسبت به اقوام دیگر بدوی محسوب می‌شده‌اند یا با تعدی به خاک همسایگان خود نسبت به آنها ستم روا داشته‌اند.
-                                            </p>
-                                            <p>
-                                                در خطاب قرار دادن کاربران دیگر -چه به شکل خاص و چه به شکل عمومی- فارغ از این که در حاشیه‌هایشان نظرات معقولی را عنوان کرده‌اند یا خیر، رعایت احترام را بفرمایید. بی‌احترامی به دیگر کاربران (و البته شخصیتهای دیگر از جمله هنرمندان و ...) از مصادیق حاشیه‌های نامناسب محسوب می‌شود و فارغ از ارزش محتوایی، حاشیهٔ فرد خاطی به محض دریافت گزارش تخلف حذف خواهد شد.
-                                            </p>
-                                            <p>
-                                                <span style="color:#0a0">لطفاً در صورتی که تفاوتها را با استناد به نسخه‌های چاپی یا خطی گزارش می‌کنید این مسئله را با ذکر منبع مطرح نمایید. اشتباهات تایپی و غلطهای املایی را از طریق دکمهٔ «ویرایش» تصحیح کنید.</span>
-                                            </p>
-                                        </div>
-                                    </fieldset>
-
-                                </form>
-
-
-                                <div id="id02" class="modal">
-                                    <span onclick="document.getElementById('id02').style.display='none'"
-                              class="close" title="بستن">&times;</span>
-                                    <form class="modal-content animate" method="post" id="editcommentform" action="?handler=EditComment">
-                                        <table style="max-width:100%; width:100%; margin:0">
-                                            <tr>
-                                                <td>
-                                                    <textarea name="editCommentText" id="editCommentText" class="inputTextarea editor" tabindex="4" rows="10" style="width:100%"></textarea>
-                                                    <input type="hidden" name="editCommentId" id="editCommentId" value="" />
-                                                    <input type="hidden" name="editCommentCoupletIndex" id="editCommentCoupletIndex" value="" />
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <button name="editcomment" id="editcomment" class="inputSubmit" onclick="return editComment();" style="width:100%">ویرایش حاشیه</button>
-                                                </td>
-                                            </tr>
-                                        </table>
-
-                                    </form>
-                                </div>
-
-                                <div id="id03" class="modal">
-                                    <span onclick="document.getElementById('id03').style.display='none'"
-                              class="close" title="بستن">&times;</span>
-                                    <form class="modal-content animate" method="post" id="replycommentform" action="?handler=Reply">
-                                        <table style="max-width:100%; width:100%; margin:0">
-                                            <tr>
-                                                <td>
-                                                    <textarea name="replyCommentText" id="replyCommentText" class="inputTextarea editor" tabindex="4" rows="10" style="width:100%"></textarea>
-                                                    <input type="hidden" name="refPoemId" id="refPoemId" value="@Model.GanjoorPage.Id" />
-                                                    <input type="hidden" name="refCommentId" id="refCommentId" value="" />
-                                                    <input type="hidden" name="refCommentDivSuffix" id="refCommentDivSuffix" value="" />
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <button name="replycomment" id="replycomment" class="inputSubmit" onclick="return postReplyComment();" style="width:100%">درج پاسخ به حاشیه</button>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td>
-                                                    <p>در پاسخ به:</p>
-                                                    <div id="refComment"></div>
-                                                </td>
-                                            </tr>
-                                        </table>
-
-                                    </form>
-                                </div>
-                            }
-                            else
-                            {
-                                <div class="notice" id="commentform">
-                                    <p>
-                                        برای حاشیه‌گذاری باید در گنجور <a href="/signup" target="_blank">ثبت نام</a> کنید و با نام کاربری خود از طریق آیکون 👤 گوشهٔ پایین سمت چپ صفحات به آن وارد شوید.
-                                    </p>
-                                </div>
-                            }
 
                         </div> <!-- <div id="comments"> -->
                     }
diff --git a/GanjooRazor/Pages/errors/404.cshtml b/GanjooRazor/Pages/errors/404.cshtml
index 68328005..0b98f310 100644
--- a/GanjooRazor/Pages/errors/404.cshtml
+++ b/GanjooRazor/Pages/errors/404.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/Pages/errors/503.cshtml b/GanjooRazor/Pages/errors/503.cshtml
index 5c9f9c1d..0d478a2b 100644
--- a/GanjooRazor/Pages/errors/503.cshtml
+++ b/GanjooRazor/Pages/errors/503.cshtml
@@ -15,7 +15,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=20" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=21" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index 2e91a3a5..6b4c2ceb 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -377,6 +377,10 @@ div.n, div.l {
     border: 2px solid #300;
 }
 
+#comments {
+    border-radius: 20px;
+}
+
 .notice {
     width: 90%;
     margin: 6px auto;
@@ -1126,10 +1130,9 @@ ol {
         padding-right: 50px;
     }
 
-.recitaion-info{
-
+.recitaion-info {
 }
 
 .hidden-recitation {
     display: none;
-}
\ No newline at end of file
+}