From af5d13b9d96b2329446cc9f6aed9742ebc0bed27 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 4 Jun 2023 12:37:37 -0400
Subject: [PATCH] improve mark visual

---
 common/static/scss/_mark.scss | 20 ++++++++++++++
 journal/templates/mark2.html  | 52 ++++++++++++++++++-----------------
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/common/static/scss/_mark.scss b/common/static/scss/_mark.scss
index 9f12e3c2..c71851e1 100644
--- a/common/static/scss/_mark.scss
+++ b/common/static/scss/_mark.scss
@@ -2,6 +2,26 @@
   width: unset !important;
 }
 
+.mark-line {
+  margin-bottom: var(--pico-spacing);
+
+  >div:last-child {
+    margin-top: calc(-0.3rem * var(--pico-line-height));
+    text-align: right;
+  }
+}
+
+@media (max-width: 768px) {
+  .mark-line {
+
+    >div,
+    >div:last-child {
+      margin-top: unset;
+      text-align: center;
+    }
+  }
+}
+
 .tag-input {
   display: -webkit-box;
   display: -ms-flexbox;
diff --git a/journal/templates/mark2.html b/journal/templates/mark2.html
index 98446fd4..ff8e4e21 100644
--- a/journal/templates/mark2.html
+++ b/journal/templates/mark2.html
@@ -22,7 +22,7 @@
     <div class="add-to-list-modal__body">
       <form method="post" action="{% url 'journal:mark' item.uuid %}">
         {% csrf_token %}
-        <div class="grid">
+        <div class="grid mark-line">
           <div>
             <fieldset>
               {% for k, v in shelf_types %}
@@ -40,32 +40,34 @@
             </fieldset>
           </div>
           <div>
-            <fieldset>
-              <span class="rating-editor {% if shelf_type == 'wishlist' %}hidden{% endif %}" _="on mousemove(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
-                <div/>
-                in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' add .yellow to star_div end on click(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
-                <div/>
-                in me set star_input to the
-                <input/>
-                in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' set star_input.value to current_value end on mouseleave(currentTarget) set star_div to the
-                <div/>
-                in me set star_input to the
-                <input/>
-                in me set current_value to star_input.value set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' remove .yellow from star_div end">
-                {{ mark.rating_grade|rating_star }}
-                <input type="hidden"
-                       name="rating_grade"
-                       id="id_rating"
-                       value="{{ mark.rating_grade | default:0 }}">
-              </span>
-            </fieldset>
+            <span class="rating-editor {% if shelf_type == 'wishlist' %}hidden{% endif %}" _="on mousemove(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
+              <div/>
+              in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' add .yellow to star_div end on click(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
+              <div/>
+              in me set star_input to the
+              <input/>
+              in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' set star_input.value to current_value end on mouseleave(currentTarget) set star_div to the
+              <div/>
+              in me set star_input to the
+              <input/>
+              in me set current_value to star_input.value set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' remove .yellow from star_div end">
+              {{ mark.rating_grade|rating_star }}
+              <input type="hidden"
+                     name="rating_grade"
+                     id="id_rating"
+                     value="{{ mark.rating_grade | default:0 }}">
+            </span>
           </div>
         </div>
-        <textarea name="text"
-                  rows="4"
-                  autofocus
-                  placeholder="提示： 善用 &gt;!文字!&lt; 标记可隐藏剧透； 超过360字可能无法分享到联邦网络实例时间线。"
-                  id="id_text">{{ mark.comment_text|default:"" }}</textarea>
+        <div>
+          <fieldset>
+            <textarea name="text"
+                      rows="5"
+                      autofocus
+                      placeholder="提示： 善用 &gt;!文字!&lt; 标记可隐藏剧透； 超过360字可能无法分享到联邦网络实例时间线。"
+                      id="id_text">{{ mark.comment_text|default:"" }}</textarea>
+          </fieldset>
+        </div>
         <div class="mark-modal__tag">
           <div class="tag-input">
             <input name="tags" type="text" placeholder="回车增加标签" id="id_tags" value="">