From 07460d6121a71bd16c120ca248eb97a82b127706 Mon Sep 17 00:00:00 2001
From: Menci <HuangHaoRui301@Gmail.com>
Date: Sun, 27 Nov 2016 19:57:42 +0800
Subject: [PATCH] Optimize UI

---
 static/style.css       | 32 ++++++++++++++++++++++++++------
 views/edit_user.ejs    |  1 +
 views/header.ejs       |  5 ++---
 views/judge_detail.ejs | 11 ++++++++---
 views/login.ejs        | 24 ++++++++++++------------
 views/ranklist.ejs     |  5 +++--
 views/user.ejs         | 22 ++++++++++++++++++++--
 7 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/static/style.css b/static/style.css
index 0501eb7..aea2f3d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -27,27 +27,47 @@ th {
 
 /* status color */
 
-.status.accepted {
+/*
+.accordion .status_detail {
+    transition: color .1s ease;
+}
+*/
+
+:not(.status_detail).status.accepted,
+.title:hover .status_detail.status.accepted,
+.title.active .status_detail.status.accepted {
     color: forestgreen;
 }
 
-.status.wrong_answer {
+:not(.status_detail).status.wrong_answer,
+.title:hover .status_detail.status.wrong_answer,
+.title.active .status_detail.status.wrong_answer {
     color: red;
 }
 
-.status.runtime_error {
+:not(.status_detail).status.runtime_error,
+.title:hover .status_detail.status.runtime_error,
+.title.active .status_detail.status.runtime_error {
     color: darkorchid;
 }
 
-.status.memory_limit_exceed, .status.time_limit_exceed, .status.output_limit_exceed {
+:not(.status_detail).status.memory_limit_exceed,
+.title:hover .status_detail.status.memory_limit_exceed,
+.title.active .status_detail.status.memory_limit_exceed,
+:not(.status_detail).status.time_limit_exceed,
+.title:hover .status_detail.status.time_limit_exceed,
+.title.active .status_detail.status.time_limit_exceed,
+:not(.status_detail).status.output_limit_exceed,
+.title:hover .status_detail.status.output_limit_exceed,
+.title.active .status_detail.status.output_limit_exceed {
     color: sandybrown;
 }
 
-.status.waiting, .status.system_error {
+:not(.status_detail).status.waiting, :not(.status_detail).status.system_error {
     color: grey;
 }
 
-.status.compile_error {
+:not(.status_detail).status.compile_error {
     color: rgb(0, 68, 136);
 }
 
diff --git a/views/edit_user.ejs b/views/edit_user.ejs
index b45fff8..27c1c78 100644
--- a/views/edit_user.ejs
+++ b/views/edit_user.ejs
@@ -38,6 +38,7 @@
           </div>
         </div>
         <button type="submit" class="ui button">修改</button>
+        <a href="<%= syzoj.utils.makeUrl(['user', edited_user.id]) %>" class="ui blue button">返回个人资料</a>
 		</form>
 	</div>
 </div>
diff --git a/views/header.ejs b/views/header.ejs
index c8b3f84..9fbf11f 100644
--- a/views/header.ejs
+++ b/views/header.ejs
@@ -22,11 +22,10 @@
             <a class="item<% if (active === 'discussion' || active === 'article') { %> active<% } %>" href="/discussion"><i class="comments icon"></i> 讨论</a>
             <div class="right menu">
               <% if (user) { %>
-              <div class="ui simple dropdown item">
+              <div class="ui simple dropdown item" onclick="location.href = '<%= syzoj.utils.makeUrl(['user', user.id]) %>'">
                 <%= user.username %> <i class="dropdown icon"></i>
                 <div class="menu">
-                  <a class="item" href="<%= syzoj.utils.makeUrl(['user', user.id]) %>"><i class="user icon"></i>个人资料</a>
-                  <a class="item" href="<%= syzoj.utils.makeUrl(['user', user.id, 'edit']) %>"><i class="settings icon"></i>设置</a>
+                  <a class="item" href="<%= syzoj.utils.makeUrl(['user', user.id, 'edit']) %>"><i class="edit icon"></i>修改资料</a>
                   <a class="item" href="#" id="logout"><i class="power icon"></i>注销</a>
                 </div>
               </div>
diff --git a/views/judge_detail.ejs b/views/judge_detail.ejs
index bc9012f..930432c 100644
--- a/views/judge_detail.ejs
+++ b/views/judge_detail.ejs
@@ -30,9 +30,14 @@
   <% for (let i = 0; i < judge.result.case_num; i++) { %>
   <% let testcase = judge.result[i]; %>
   <div class="title">
-    <i class="dropdown icon"></i>
-    测试点：<%= i %> 状态：<%= testcase.status %>
-                运行时间：<%= testcase.time_used %> ms 使用内存：<%= testcase.memory_used %> KiB
+    <div class="ui grid">
+      <div class="three wide column"><i class="dropdown icon"></i>测试点 #<%= i + 1 %></div>
+      <div class="four wide column status status_detail <%= testcase.status.toLowerCase().split(' ').join('_') %>">
+      <i class="<%= testcase.status === 'Accepted' ? 'checkmark' : 'remove' %> icon"></i>
+      <%= testcase.status %></div>
+      <div class="four wide column">用时：<span style="font-weight: normal; "><%= testcase.time_used %> ms</span></div>
+      <div class="four wide column">内存：<span style="font-weight: normal; "><%= testcase.memory_used %> KiB</span></div>
+    </div>
   </div>
   <div class="content">
     <p>
diff --git a/views/login.ejs b/views/login.ejs
index 5c458b9..9097113 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -14,13 +14,13 @@
           <div class="field">
             <div class="ui left icon input">
               <i class="user icon"></i>
-              <input name="email" placeholder="用户名" type="text" id="username" onkeydown="key_login()">
+              <input name="email" placeholder="用户名" type="text" id="username" onkeydown="key_login(event)">
             </div>
           </div>
           <div class="field">
             <div class="ui left icon input">
               <i class="lock icon"></i>
-              <input name="password" placeholder="密码" type="password" id="password" onkeydown="key_login()">
+              <input name="password" placeholder="密码" type="password" id="password" onkeydown="key_login(event)">
             </div>
           </div>
           <div class="ui fluid large submit button" id="login">登录</div>
@@ -38,10 +38,10 @@
 </div>
 <script src="//cdn.bootcss.com/blueimp-md5/2.5.0/js/md5.min.js"></script>
 <script type="text/javascript">
-function key_login() {
-	if (event.keyCode == 13) {
-		login();
-	}
+function key_login(event) {
+    if (event.keyCode == 13) {
+        login();
+    }
 }
 function show_error(error) {
     $("#error").text(error);
@@ -65,25 +65,25 @@ function login() {
             error_code = data.error_code;
             switch (error_code) {
                 case 1001:
-                    show_error("No such user.");
+                    show_error("用户不存在");
                     break;
                 case 1002:
-                    show_error("Wrong password.");
+                    show_error("密码错误");
                     break;
                 case 1:
                     success(data.session_id);
-                    break;
+                    return;
                 default:
-                    show_error("Unknown error.");
+                    show_error("未知错误");
                     break;
             }
-            $("#login").text("Login");
+            $("#login").text("登录");
             $("#login").removeClass("loading");
         },
         error:  function(XMLHttpRequest, textStatus, errorThrown) {
             alert(XMLHttpRequest.responseText);
             show_error("未知错误");
-            $("#login").text("Login");
+            $("#login").text("登录");
         }
     });
 }
diff --git a/views/ranklist.ejs b/views/ranklist.ejs
index db40dc8..dcdeb25 100644
--- a/views/ranklist.ejs
+++ b/views/ranklist.ejs
@@ -2,8 +2,9 @@
 <% include header %>
 <div class="padding">
   <form action="<%= syzoj.utils.makeUrl(['find_user']) %>" class="ui mini form" method="get" role="form">
-    <div class="inline field">
-      <input name="nickname" placeholder="用户名" style="margin-right: 2px;" type="text" value=""><button class="ui mini button" type="submit">查找用户</button>
+    <div class="ui action left icon input inline" style="width: 180px; ">
+      <i class="search icon"></i><input name="nickname" placeholder="用户名" type="text">
+      <button class="ui mini button" type="submit">查找用户</button>
     </div>
   </form>
 	    <table class="ui very basic center aligned table">
diff --git a/views/user.ejs b/views/user.ejs
index 90008bd..ea756b6 100644
--- a/views/user.ejs
+++ b/views/user.ejs
@@ -4,12 +4,21 @@
 <div class="ui grid">
     <div class="row">
         <div class="five wide column">
-            <div class="ui card" style="width: 100%; ">
+            <div class="ui card" style="width: 100%; " id="user_card">
                 <div class="blurring dimmable image">
+                    <% if (show_user.allowedEdit) { %>
+                    <div class="ui dimmer transition hidden">
+                        <div class="content">
+                            <div class="center">
+                                <a class="ui inverted button" href="<%= syzoj.utils.makeUrl(['user', show_user.id, 'edit']) %>"><i class="edit icon"></i>修改资料</a>
+                            </div>
+                        </div>
+                    </div>
+                    <% } %>
                     <img src="<%= syzoj.utils.gravatar(show_user.email, 1000) %>">
                 </div>
                 <div class="content">
-                    <div class="header"><%= show_user.username %><% if (show_user.sex == 1) { %><i class="man icon"></i><% } else if (show_user.sex == -1) { %><i class="woman icon"></i><% } %></div>
+                    <div class="header"><%= show_user.username %> <% if (show_user.sex == 1) { %><i class="man icon"></i><% } else if (show_user.sex == -1) { %><i class="woman icon"></i><% } %></div>
                     <div class="meta">
                         <a class="group"><%= show_user.is_admin ? '管理员' : '普通用户' %></a>
                     </div>
@@ -95,4 +104,13 @@
     </div>
 </div>
 </div>
+<% if (show_user.allowedEdit) { %>
+<script>
+$(function () {
+  $('#user_card .image').dimmer({
+    on: 'hover'
+  });
+})
+<% } %>
+</script>
 <% include footer %>