ui: 优化题目标签显示

packages/ui-default/components/problem/tag.page.styl

@@ -3,6 +3,7 @@
   padding: 0 !important
   list-style: none !important
   font-size: 0
+  word-break: keep-all
 
 .problem__tag
   display: inline-block
@@ -14,7 +15,7 @@
 .problem__tag-item
   padding: rem(0px)
   margin-left: rem(3px)
-  margin-bottom: rem(2px)
+  margin-bottom: rem(5px)
   &:hover
     text-decoration: none
 

packages/ui-default/package.json

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

packages/ui-default/pages/problem_detail.page.jsx

@@ -176,7 +176,6 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
 
   async function loadSubjective() {
     try {
-      if (UiContext.pdoc.config?.type !== 'subjective') return;
       let s = '';
       try {
         s = JSON.parse(UiContext.pdoc.content);
@@ -193,9 +192,11 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
       const props = yaml.load(s);
       if (!(props instanceof Array)) return;
       $('.outer-loader-container').show();
-      const { default: Subjective } = await import('vj/components/subjective-question/index');
-      const React = await import('react');
-      const ReactDOM = await import('react-dom');
+      const [{ default: Subjective }, React, ReactDOM] = await Promise.all([
+        import('vj/components/subjective-question/index'),
+        import('react'),
+        import('react-dom'),
+      ]);
 
       ReactDOM.render(
         <div className="section__body typo">
@@ -215,12 +216,12 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     leaveScratchpadMode();
     ev.preventDefault();
   });
-  $(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
+  $(document).on('click', '[name="show_tags"]', (ev) => {
     $(ev.currentTarget).hide();
-    $('[name="problem-sidebar__categories"]').show();
+    $('span.tags').show();
   });
   $('[name="problem-sidebar__download').on('click', handleClickDownloadProblem);
-  loadSubjective();
+  if (UiContext.pdoc.config?.type === 'subjective') loadSubjective();
 
   if (pagename === 'contest_detail_problem') return;
   if (!Object.keys(UiContext.pdoc.stats || {}).length) {

packages/ui-default/templates/problem_detail.html

@@ -49,6 +49,12 @@
           <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('Accepted Ratio') }}: {% if pdoc.nSubmit > 0 %}{{ (100 * pdoc.nAccept / pdoc.nSubmit)|round|int }}%{% else %}{{ _('?') }}{% endif %}</span>
           <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('Difficulty') }}: {{ pdoc['difficulty'] or _('(None)') }}</span>
           <span class="bp3-tag bp3-large bp3-minimal bp3-interactive problem__tag-item">{{ _('Uploaded By') }}: {{ user.render_inline(udoc, badge=false) }}</span>
+          {% if pdoc.tag.length %}
+            <span name="show_tags" class="bp3-tag bp3-large bp3-minimal bp3-interactive problem__tag-item nojs--hide">{{ _('Show Tags') }}</span>
+            {%- for tag in pdoc.tag -%}
+              <span class="bp3-tag bp3-large bp3-minimal problem__tag-item tags hasjs--hide">{{ tag }}</span>
+            {%- endfor -%}
+          {% endif %}
         </ul>
       </div>
     </div>