ui: 页面布局优化

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "2.29.22",
+    "version": "2.29.23",
     "bin": "bin/hydrooj.js",
     "main": "dist/loader.js",
     "typings": "dist/loader.d.ts",

packages/hydrooj/src/handler/problem.ts

@@ -38,7 +38,7 @@ export class ProblemHandler extends Handler {
                 page, pcount, ppcount, pdocs, psdict, category,
             } = this.response.body;
             this.response.body = {
-                title: this.renderTitle(category),
+                title: this.renderTitle(this.translate('problem_main')),
                 fragments: (await Promise.all([
                     this.renderHTML('partials/problem_list.html', {
                         page, ppcount, pcount, pdocs, psdict,
@@ -92,8 +92,10 @@ export class ProblemMainHandler extends ProblemHandler {
         if (q) {
             const pdoc = await problem.get(domainId, +q || q, problem.PROJECTION_LIST);
             if (pdoc) {
+                const count = pdocs.length;
                 pdocs = pdocs.filter((doc) => doc.docId !== pdoc.docId);
                 pdocs.unshift(pdoc);
+                pcount = pcount - count + pdocs.length;
             }
         }
         if (this.user.hasPriv(PRIV.PRIV_USER_PROFILE)) {

packages/hydrooj/src/service/server.ts

@@ -683,6 +683,8 @@ async function handle(ctx, HandlerClass, checker) {
         await bail(`handler/before/${HandlerClass.name.replace(/Handler$/, '')}`, h);
         await bail('handler/before', h);
         if (h[method]) await h[method](args);
+        await bail(`handler/before-operation/${HandlerClass.name.replace(/Handler$/, '')}`, h);
+        await bail('handler/before-operation', h);
         if (operation) await h[`post${operation}`](args);
         await bail(`handler/after/${HandlerClass.name.replace(/Handler$/, '')}`, h);
         await bail('handler/after', h);

packages/ui-default/package.json

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

packages/ui-default/pages/problem_main.page.js

@@ -218,6 +218,15 @@ const page = new NamedPage(['problem_main', 'problem_category'], () => {
     ev.preventDefault();
     updateSelection();
   });
+  $('#searchForm').on('submit', () => {
+    updateSelection();
+    return false;
+  });
+  let update;
+  $('#searchForm').find('input').on('input', () => {
+    if (update) clearTimeout(update);
+    update = setTimeout(updateSelection, 500);
+  });
   $(document).on('click', 'a.pager__item', (ev) => {
     ev.preventDefault();
     pjax.request({ url: $(ev.currentTarget).attr('href') }).then(() => {

packages/ui-default/pages/problem_main.page.styl

@@ -1,10 +1,10 @@
 .page--problem_main
 .page--problem_category
   .col--checkbox
-    width: rem(60px)
+    width: rem(61px)
 
   .col--pid
-    width: rem(80px)
+    width: rem(81px)
   
   .col--status
     width: rem(140px)
@@ -109,3 +109,39 @@
 
 .edit-mode .edit-mode-hide
   display: none
+
+.data-table > tbody > tr
+  height: 40.15px
+
+.data-table > thead > tr
+  height: 54.9px
+
+.search
+  width: 100%
+  position: relative
+  display: flex
+
+.search > input
+  width: 100%
+  border: 1px solid #cccccc
+  border-right: none
+  padding: 5px
+  height: 36px
+  outline: none
+  color: #000000
+
+.search > button
+  width: 40px
+  height: 36px
+  border: 1px solid #00B4CC
+  background: #00B4CC
+  text-align: center
+  color: #fff
+  cursor: pointer
+  font-size: 20px
+
+.search > div
+  position: absolute
+  right: 50px
+  top: 8px
+  font-size: rem(17px)

packages/ui-default/templates/partials/problem_stat.html

@@ -1,3 +1,3 @@
-<div class="section__body" data-fragment-id="problem_stat">
+<div data-fragment-id="problem_stat">
   <p>{{ _('{0} problems').format(pcount) }}</p>
 </div>

packages/ui-default/templates/problem_edit.html

@@ -17,7 +17,7 @@
                 {{ _('pid') }}
                 <br>
                 <label>
-                  <input name="pid" placeholder="{{ _('Leave blank to use numeric pid.') }}" value="{{ pdoc['pid']|default('') }}" class="textbox">
+                  <input name="pid" placeholder="P1000" value="{{ pdoc['pid']|default('') }}" class="textbox">
                 </label>
               </label>
             </div>

packages/ui-default/templates/problem_main.html

@@ -11,6 +11,15 @@
     <div class="medium-9 columns">
       <div class="section">
         <div class="section__body no-padding">
+          <form method="get" id="searchForm" action="{{ url('problem_main') }}">
+            <div class="search">
+              <input name="q" type="text" value="{{ category }}" placeholder="1001">
+              {% include "partials/problem_stat.html" %}
+              <button type="submit">
+                <span class="icon icon-search"></span>
+              </button>
+            </div>
+          </form>
           {% include "partials/problem_list.html" %}
         </div>
       </div>
@@ -48,30 +57,6 @@
           </ol>
         </div>
       {% endif %}
-      <div class="section side">
-        <div class="section__header edit-mode-hide">
-          <h1 class="section__title">{{ _('Categories') }}</h1>
-        </div>
-        <div class="section__body">
-          {% include "partials/category.html" %}
-        </div>
-        <div class="section__body edit-mode-hide">
-          {% include "partials/problem_lucky.html" %}
-        </div>
-      </div>
-      <div class="section side">
-        <div class="section__header">
-          <h1 class="section__title">{{ _('Search') }}</h1>
-        </div>
-        <form method="get" action="{{ url('problem_main') }}">
-          <div class="section__body">
-            <label>
-              <input name="q" type="text" class="textbox" value="{{ category }}" placeholder="1001">
-            </label>
-            <button type="submit" id="search" class="primary button">{{ _('Search') }}</button>
-          </div>
-        </form>
-      </div>
       {% if handler.user.hasPerm(perm.PERM_CREATE_PROBLEM) %}
         <div class="section side">
           <div class="section__header">
@@ -93,10 +78,15 @@
         </div>
       {% endif %}
       <div class="section side">
-        <div class="section__header">
+        <div class="section__header edit-mode-hide">
-          <h1 class="section__title">{{ _('Statistics') }}</h1>
+          <h1 class="section__title">{{ _('Categories') }}</h1>
+        </div>
+        <div class="section__body">
+          {% include "partials/category.html" %}
+        </div>
+        <div class="section__body edit-mode-hide">
+          {% include "partials/problem_lucky.html" %}
         </div>
-        {% include "partials/problem_stat.html" %}
       </div>
     </div>
   </div>