ui: update problem_detail

.eslintrc.yaml

@@ -30,6 +30,7 @@ rules:
   global-require: 0
   guard-for-in: 0
   implicit-arrow-linebreak: 0
+  import/newline-after-import: 0
   import/no-cycle: 0
   import/no-extraneous-dependencies: 0
   import/no-named-as-default: 0

packages/hydrojudge/src/sysinfo.ts

@@ -12,7 +12,7 @@ async function stackSize() {
     let output = '';
     try {
         const context: any = {
-            lang: 'ccWithoutO2',
+            lang: 'cc',
             code: `#include <iostream>
 using namespace std;
 int i=1;

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

@@ -17,7 +17,7 @@
   overflow: hidden
   text-overflow: ellipsis
   white-space: nowrap
-  max-width: rem(130px)
+  max-width: rem(250px)
   line-height: rem($table-lh)
   height: rem($table-lh)
   background: #F0F0F0

packages/ui-default/package.json

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

packages/ui-default/templates/problem_detail.html

@@ -1,3 +1,4 @@
+{% set no_path_section = true %}
 {% extends "layout/basic.html" %}
 {% block content %}
 <script>
@@ -22,22 +23,36 @@
 </script>
 <div class="row">
   <div class="medium-9 columns">
+    <div class="section">
+      <div class="section__header" style="align: center">
+        <h1 class="section__title">
+          {% if rdoc %}
+            <a href="{{ url('record_detail', {rid:rdoc._id}) }}">
+            <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc['status']] }}"></span>
+            <span class="record-status--text {{ model.builtin.STATUS_CODES[rdoc['status']] }}">
+              {{ model.builtin.STATUS_TEXTS[rdoc.status] }}{% if rdoc.status != model.builtin.STATUS.STATUS_ACCEPTED %} {{ rdoc.score }}{% endif %}
+            </span>
+            </a>
+          {% endif %}
+          #{{ pdoc.docId }}. {{ pdoc.title }}
+        </h1>
+      </div>
+      <div class="section__body">
+        <ul class="problem__tags">
+          <li class="problem__tag"><p class="problem__tag-link">{{ _('Time') }}: {{ pdoc.config.timeMax if pdoc.config.timeMax == pdoc.config.timeMin else pdoc.config.timeMin+'~'+pdoc.config.timeMax }}ms</p></li>
+          <li class="problem__tag"><p class="problem__tag-link">{{ _('Memory') }}: {{ pdoc.config.memoryMax if pdoc.config.memoryMax == pdoc.config.memoryMin else pdoc.config.memoryMin+'~'+pdoc.config.memoryMax }}MiB</p></li>
+          <li class="problem__tag"><p class="problem__tag-link">{{ _('Accepted') }}: {{ pdoc.nAccept }}</p></li>
+          <li class="problem__tag"><p class="problem__tag-link">{{ _('Accepted Ratio') }}: {% if pdoc.nSubmit > 0 %}{{ (100 * pdoc.nAccept / pdoc.nSubmit)|round|int }}%{% else %}{{ _('?') }}{% endif %}</p></li>
+          <li class="problem__tag"><p class="problem__tag-link">{{ _('Difficulty') }}: {{ pdoc['difficulty'] or _('(None)') }}</p></li>
+          <li class="problem__tag"><p class="problem__tag-link">{{ _('Uploaded By') }}: {{ user.render_inline(owner_udoc, badge=false) }}</p></li>
+        </ul>
+      </div>
+    </div>
     <div class="section">
       <div class="problem-content-container"><div class="problem-content" data-marker-enabled>
-        {% if rdoc %}
-          <div class="section__header scratchpad--hide">
-            <h1 class="section__title">
-              <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc['status']] }}"></span>
-              <span class="record-status--text {{ model.builtin.STATUS_CODES[rdoc['status']] }}">
-                {{ model.builtin.STATUS_TEXTS[rdoc.status] }}{% if rdoc.status != model.builtin.STATUS.STATUS_ACCEPTED %} {{ rdoc.score }}{% endif %}
-              </span>
-            </h1>
-          </div>
-        {% else %}
         <div class="section__header non-scratchpad--hide">
           <h1 class="section__title">{{ pdoc.title }}</h1>
         </div>
-        {% endif %}
         <div class="section__body typo">
         {% if not pdoc.data.length %}
           <blockquote class="warn">