From 66c618adda6e19d686a6db2b444b294e66905544 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Sun, 29 Aug 2021 23:40:31 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui-default/components/discussion/comments.page.styl  | 9 ++++++++-
 packages/ui-default/components/problem/tag.page.styl     | 8 +++++++-
 packages/ui-default/package.json                         | 2 +-
 packages/ui-default/pages/problem_detail.page.jsx        | 6 +++---
 packages/ui-default/pages/problem_main.page.js           | 3 +--
 .../templates/partials/problem_sidebar_normal.html       | 2 +-
 packages/ui-default/templates/problem_main.html          | 4 ++--
 7 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/ui-default/components/discussion/comments.page.styl b/packages/ui-default/components/discussion/comments.page.styl
index 7e74a405b..10032797b 100644
--- a/packages/ui-default/components/discussion/comments.page.styl
+++ b/packages/ui-default/components/discussion/comments.page.styl
@@ -29,6 +29,13 @@ $downvote-color = red
     border-top: 0
 
 .dczcomments__reply
+  >.media
+    // FIXME doesn't work on IE 11
+    display: flex
+
+    >.media__body
+      width: calc(100% - (50px + 0.625rem))
+
   &:last-child
     >.media
       padding-bottom: 0
@@ -36,7 +43,7 @@ $downvote-color = red
 .dczcomments__item > .media
   display: flex
   >.media__body
-    max-width: calc(100% - 6.5em);
+    max-width: calc(100% - 6.5em)
 
 .dczcomments__supplementary
   float: left
diff --git a/packages/ui-default/components/problem/tag.page.styl b/packages/ui-default/components/problem/tag.page.styl
index 9ac8fde9a..2f12b1a15 100644
--- a/packages/ui-default/components/problem/tag.page.styl
+++ b/packages/ui-default/components/problem/tag.page.styl
@@ -4,6 +4,8 @@
   list-style: none !important
   font-size: 0
   word-break: keep-all
+  display: flex
+  flex-wrap: wrap
 
 .problem__tag
   display: inline-block
@@ -13,11 +15,15 @@
   padding: 0 !important
 
 .problem__tag-item
-  padding: rem(0px)
+  padding: 0 10px !important
   margin-left: rem(3px)
   margin-bottom: rem(5px)
+  line-height: 30px !important
   &:hover
     text-decoration: none
+  > span
+    display: flex
+    align-items: center
 
 .problem__tag-link
   display: inline-block
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 253c7ce5d..c62a34641 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.18.10",
+  "version": "4.18.11",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/pages/problem_detail.page.jsx b/packages/ui-default/pages/problem_detail.page.jsx
index c47af80e6..69d1334a9 100644
--- a/packages/ui-default/pages/problem_detail.page.jsx
+++ b/packages/ui-default/pages/problem_detail.page.jsx
@@ -108,7 +108,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     await $('#scratchpad')
       .transition(
         { opacity: 1 },
-        { duration: 200, easing: 'easeOutCubic' }
+        { duration: 200, easing: 'easeOutCubic' },
       )
       .promise();
   }
@@ -117,7 +117,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     await $('#scratchpad')
       .transition(
         { opacity: 0 },
-        { duration: 200, easing: 'easeOutCubic' }
+        { duration: 200, easing: 'easeOutCubic' },
       )
       .promise();
   }
@@ -262,7 +262,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
   });
   $(document).on('click', '[name="show_tags"]', (ev) => {
     $(ev.currentTarget).hide();
-    $('span.tags').show();
+    $('span.tags').css('display', 'inline-block');
   });
   $('[name="problem-sidebar__download').on('click', handleClickDownloadProblem);
   if (UiContext.pdoc.config?.type === 'objective') loadObjective();
diff --git a/packages/ui-default/pages/problem_main.page.js b/packages/ui-default/pages/problem_main.page.js
index 4975244c2..c7d2bd598 100644
--- a/packages/ui-default/pages/problem_main.page.js
+++ b/packages/ui-default/pages/problem_main.page.js
@@ -200,8 +200,7 @@ async function handleDownload(ev) {
 }
 
 const page = new NamedPage(['problem_main', 'problem_category'], () => {
-  const doc = document.documentElement;
-  doc.className += ' display-mode';
+  const doc = document.getElementById('listSection');
   buildCategoryFilter();
   parseCategorySelection();
   $('[name="leave-edit-mode"]').on('click', () => {
diff --git a/packages/ui-default/templates/partials/problem_sidebar_normal.html b/packages/ui-default/templates/partials/problem_sidebar_normal.html
index 84a5f5b6b..6ac0955a7 100644
--- a/packages/ui-default/templates/partials/problem_sidebar_normal.html
+++ b/packages/ui-default/templates/partials/problem_sidebar_normal.html
@@ -101,7 +101,7 @@
   {% include "partials/problem-sidebar-information.html" %}
 </div>
 {% elif page_name != 'contest_detail_problem' %}
-<div class="section side nojs-hide">
+<div class="section side nojs--hide">
   <div class="section__header">
     <h1 class="section__title">{{ _('Statistics') }}</h1>
   </div>
diff --git a/packages/ui-default/templates/problem_main.html b/packages/ui-default/templates/problem_main.html
index fa3444d3c..ae0601f6c 100644
--- a/packages/ui-default/templates/problem_main.html
+++ b/packages/ui-default/templates/problem_main.html
@@ -9,7 +9,7 @@
   }) }}
   <div class="row">
     <div class="medium-9 columns">
-      <div class="section">
+      <div class="section display-mode" id="listSection">
         <div class="section__body no-padding">
           <form method="get" id="searchForm" action="{{ url('problem_main') }}">
             <div class="search">
@@ -26,7 +26,7 @@
     </div>
     <div class="medium-3 columns">
       {% if handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
-        <div class="section side">
+        <div class="section side nojs--hide">
           <ol class="menu">
             <a href="javascript:;" class="menu__link edit-mode-hide" name="enter-edit-mode">
               <span class="icon icon-edit"></span>