From 5c61cfe77d7abba7891ce515e885fb87abc1d8ad Mon Sep 17 00:00:00 2001
From: Menci <huanghaorui301@gmail.com>
Date: Mon, 30 Apr 2018 15:27:49 +0800
Subject: [PATCH] UI Optimize

---
 views/index.ejs            |  2 +-
 views/submission.ejs       | 58 ++++++++++++++++++++++++++++----------
 views/submissions_item.ejs |  6 ++--
 3 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/views/index.ejs b/views/index.ejs
index 0c6994f..6c96ad3 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -191,7 +191,7 @@
         </table>
         <% } %>
       </div>
-      <% if (typeof links !== 'undefined' && links) { %>
+      <% if (typeof links !== 'undefined' && links && links.length) { %>
       <h4 class="ui top attached block header font-content">友情链接</h4>
       <div class="ui bottom attached segment">
         <ul style="margin: 0; padding-left: 20px; ">
diff --git a/views/submission.ejs b/views/submission.ejs
index 13e2cd9..703824f 100644
--- a/views/submission.ejs
+++ b/views/submission.ejs
@@ -2,6 +2,33 @@
 <% include util %>
 <% include header %>
 <script src="/textFit.js"></script>
+<style>
+.single-subtask {
+    box-shadow: none !important;
+}
+
+.single-subtask > .title {
+    display: none;
+}
+
+.single-subtask > .content {
+    padding: 0 !important;
+}
+
+.accordion > .content > .accordion {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.accordion > .content > .accordion > .content {
+    margin-top: 0;
+    margin-bottom: 14px;
+}
+
+.accordion > .content > .accordion > .content > :last-child {
+    margin-bottom: -10px !important;
+}
+</style>
 <span id="submission_content">
 <div class="padding" id="vueAppFuckSafari">
   <table class="ui very basic center aligned table" id="status_table">
@@ -28,7 +55,7 @@
   <code-box v-if="detailResult && detailResult.compile" :escape="false" title="编译信息" v-bind:content="detailResult.compile.message"></code-box>
   <code-box v-if="detailResult" title="系统信息" :escape="true" v-bind:content="detailResult.systemMessage"></code-box>
 
-  <div class="ui styled fluid accordion" v-if="detailResult && detailResult.judge && detailResult.judge.subtasks">
+  <div class="ui styled fluid accordion" :class="singleSubtask ? 'single-subtask' : '' "v-if="detailResult && detailResult.judge && detailResult.judge.subtasks">
     <template v-for="subtask, $index in detailResult.judge.subtasks">
       <div class="title" :class="singleSubtask ? 'active' : ''">
         <div class="ui grid">
@@ -39,8 +66,8 @@
           <div class="four wide column">
             <status-label :status="getSubtaskResult(subtask)"></status-label>
           </div>
-          <div class="three wide column" v-if="subtask.score != null">得分
-            <span style="font-weight: normal; ">{{ Math.trunc(subtask.score) }}</span>
+          <div class="three wide column" v-if="subtask.score != null">
+            得分：<span style="font-weight: normal; ">{{ Math.trunc(subtask.score) }}</span>
           </div>
         </div>
       </div>
@@ -57,22 +84,22 @@
                   <status-label :status="getTestcaseStatus(curCase)"></status-label>
                 </div>
                 <template v-if="checkTestcaseOK(curCase)">
-                  <div class="three wide column">得分率
-                      <span style="font-weight: normal; ">{{ Math.trunc(curCase.result.scoringRate * 100) }}</span>
+                  <div class="three wide column">
+                      得分：<span style="font-weight: normal; ">{{ Math.trunc(curCase.result.scoringRate * 100) }}</span>
                   </div>
-                  <div class="three wide column" v-if="curCase.result.time != null && curCase.result.time !== NaN">用时
-                      <span style="font-weight: normal; ">{{ curCase.result.time }} ms</span>
+                  <div class="three wide column" v-if="curCase.result.time != null && curCase.result.time !== NaN">
+                      用时：<span style="font-weight: normal; ">{{ curCase.result.time }} ms</span>
                   </div>
-                  <div class="three wide column" v-if="curCase.result.memory != null && curCase.result.memory !== NaN">内存
-                      <span style="font-weight: normal; ">{{ curCase.result.memory }} KiB</span>
+                  <div class="three wide column" v-if="curCase.result.memory != null && curCase.result.memory !== NaN">
+                      内存：<span style="font-weight: normal; ">{{ curCase.result.memory }} KiB</span>
                   </div>
                 </template>
               </div>
             </div>
               <div class="content">
                 <template v-if="checkTestcaseOK(curCase)">
-                  <code-box v-if="curCase.result.input" :title="'输入文件（'+ curCase.result.input.name +'）'" :content="curCase.result.input.content"></code-box>
-                  <code-box v-if="curCase.result.output" :title="'答案文件（'+ curCase.result.output.name +'）'" :content="curCase.result.output.content"></code-box>
+                  <code-box v-if="curCase.result.input" :title="'输入文件（<span style=\'font-family: monospace; \'>'+ curCase.result.input.name +'</span>）'" :content="curCase.result.input.content"></code-box>
+                  <code-box v-if="curCase.result.output" :title="'答案文件（<span style=\'font-family: monospace; \'>'+ curCase.result.output.name +'</span>）'" :content="curCase.result.output.content"></code-box>
                   <code-box title="用户输出" :content="curCase.result.userOutput"></code-box>
                   <code-box title="标准错误流" :content="curCase.result.userError"></code-box>
                   <code-box title="Special Judge 信息" :content="curCase.result.spjMessage"></code-box>
@@ -93,9 +120,10 @@
 <% include submissions_item %>
 
 <script type="text/x-template" id="codeBoxTemplate">
-    <div style="" v-if="content != null && content !== ''">
-        <div></div>
-        <h3 v-if="title" class="ui header">{{ title }}</h3>
+    <div style="margin-top: 0px; margin-bottom: 14px; " v-if="content != null && content !== ''">
+        <p v-if="title" class="transition visible">
+           <strong v-html="title"></strong>
+        </p>
         <div class="ui existing segment">
           <pre v-if="escape" style="margin-top: 0; margin-bottom: 0; "><code>{{ content }}</code></pre>
           <pre v-if="!escape" style="margin-top: 0; margin-bottom: 0; "><code v-html="content"></code></pre>
@@ -268,4 +296,4 @@ if (token != null) {
 }
 </script>
 </span>
-<% include footer %>
\ No newline at end of file
+<% include footer %>
diff --git a/views/submissions_item.ejs b/views/submissions_item.ejs
index 977fc63..673983e 100644
--- a/views/submissions_item.ejs
+++ b/views/submissions_item.ejs
@@ -43,7 +43,7 @@ Vue.component('submission-item', {
     }
   },
   mounted() {
-    textFit(this.$refs.problemLabel, { maxFontSize: 14 });
+    textFit(this.$refs.problemLabelTextFit, { maxFontSize: 14 });
   }
 });
 </script>
@@ -51,7 +51,7 @@ Vue.component('submission-item', {
 <script id="submissionItemTemplate" type="text/x-template">
 <tr>
   <td><a :href="submissionLink">#{{ data.info.submissionId }}</a></td>
-  <td ref="problemLabel"><a style="width: 230px; height: 22px; display: block; margin: 0 auto; line-height: 22px;" :href="problemLink">#{{ config.inContest ? alpha(data.info.problemId) : data.info.problemId }}. {{ data.info.problemName }}</a></td>
+  <td ref="problemLabel"><a ref="problemLabelTextFit" style="width: 230px; height: 22px; display: block; margin: 0 auto; line-height: 22px;" :href="problemLink">#{{ config.inContest ? alpha(data.info.problemId) : data.info.problemId }}. {{ data.info.problemName }}</a></td>
   <td><a :href="submissionLink"><status-label :status="statusString"></status-label></a></td>
 
   <template v-if="data.result">
@@ -75,4 +75,4 @@ Vue.component('submission-item', {
     </form>
   </td>
 </tr>
-</script>
\ No newline at end of file
+</script>