ui: fix reaction display on mobile

packages/ui-default/components/discussion/comments.page.styl

@@ -29,35 +29,28 @@ $downvote-color = red
     border-top: 0
   
   .reactions
-    display: flex
-    flex-direction: row
-    width: 100%
-    flex-wrap: wrap
-    margin-top: 0.25rem
-    overflow: visible
     .reaction
-      display: flex
-      flex-direction: row
-      height: 1.75rem
       white-space: nowrap
       width: auto
-      margin: 0.125rem
-      padding: 0 0.5rem
-      border: 2px solid transparent
       border-radius: 1.75rem
-      font-weight: 500
       overflow: visible
-      border-color: lighten(blue, 75%)
+      font-size: rem($font-size-small)
+      display: inline-block
+      line-height: rem(22px)
+      padding: rem(0 10px)
+      vertical-align: middle
+      border-radius: rem(12px)
+      border: 1px solid $supplementary-border-color
+      &.active, &:hover
+        text-decoration: none
+        border-color: $primary-color
+        color: #FFF !important
       &.active
-        background-color: lighten(blue, 60%)
+        background-color: lighten($primary-color, 10%) !important
       &:hover
-        background-color: lighten(blue, 75%) !important
+        background-color: lighten($primary-color, 30%) !important
-      p
+      .emoji
-        padding-top: 0px
+        margin-right: rem(5px)
-        margin-top: 0px
-        padding-left: 0px
-        margin-right: 2px
-        line-height: 1.5
 
 .dczcomments__reply
   >.media

packages/ui-default/components/discussion/comments.page.tsx

@@ -193,7 +193,7 @@ function renderReactions(reactions, self, rootEle) {
   let html = '';
   for (const key in reactions) {
     if (!reactions[key]) continue;
-    html += `<div class="reaction${self[key] ? ' active' : ''}"><p>${key} ${reactions[key]}</p></div>`;
+    html += `<div class="reaction${self[key] ? ' active' : ''}"><span class="emoji">${key}</span> ${reactions[key]}</div>\n`;
   }
   rootEle.html(html);
 }
@@ -227,7 +227,7 @@ function Reaction({ payload, ele }) {
             {line.map((emoji) => (
               <div
                 key={emoji}
-                className={`medium-${12 / elesPerRow} columns`}
+                className={`medium-${12 / elesPerRow} small-${12 / elesPerRow} columns`}
                 onClick={() => handleEmojiClick(payload, emoji, ele).then(() => updateFinish(true))}
               >
                 {emoji}

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.31.9",
+  "version": "4.31.10",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/templates/components/comments_discussion.html

@@ -107,10 +107,10 @@
       </div>
       <div class="typo" data-emoji-enabled data-drid="{{ doc.docId }}" data-raw-url="{{ url('discussion_reply_raw', did=doc.parentId, drid=doc._id) }}">
         {{ doc['content']|markdown|safe }}
-        <div class="reactions row">
+        <div class="reactions list">
           {% for key in Object.keys(doc.react or {}) %}
             {% if doc.react[key] %}
-              <div class="reaction{% if reactions[doc.docId][key] %} active{% endif %}"><p>{{ key }} {{ doc.react[key] }}</p></div>
+              <div class="reaction{% if reactions[doc.docId][key] %} active{% endif %}"><span class="emoji">{{ key }}</span> {{ doc.react[key] }}</div>
             {% endif %}
           {% endfor %}
         </div>