Merge pull request #69 from segment-oj/add-icon-to-nav-ztl

Add icon to nav ztl

Author: szdytom

public/favicon.ico

@@ -63,6 +63,10 @@ h3::before {
     content: "# ";
 }
 
+.markdown-container img {
+    max-width: 100%;
+}
+
 .markdown-container h1,
 .cm-header-1 {
     font-size: 30px;

src/assets/css/basic.css

@@ -12,7 +12,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-
-</style>

src/assets/icon/SOJ-thick-white.svg

@@ -11,6 +11,7 @@
         text-color="#fff"
         active-text-color="rgb(233, 233, 235)"
       >
+        <el-menu-item index=""><img src="./../../assets/icon/SOJ-thick-white.svg" style="height: 40px;" /></el-menu-item>
         <el-menu-item index="/"><i class="el-icon-s-home" /> Home</el-menu-item>
         <el-menu-item index="/problem/list"><i class="el-icon-s-order" />Problem List</el-menu-item>
         <el-submenu index="2" id="user">

src/components/home/page.vue

@@ -55,6 +55,8 @@
             <div class="tool-content">{{title}}</div>
             <el-divider class="divider">PID</el-divider>
             <div class="tool-content">#{{pid}}</div>
+            <el-divider class="divider">Date Created</el-divider>
+            <div class="tool-content">{{timeAdd}}</div>
           </el-card>
           <el-card shadow="never" class="margin-top">
             <div><i class="el-icon-menu" /> Limitation </div>
@@ -70,6 +72,7 @@
 </template>
 
 <script>
+import timeFormat from './../../methods/time';
 import apiurl from './../../apiurl';
 import MarkdownContainer from './../lib/MarkdownContainer.vue';
 
@@ -78,14 +81,15 @@ export default {
   data() {
     return {
       description: null,
-      title: '-',
+      title: 'Unknown',
       pid: this.$route.params.id,
       allowHTML: false,
       isWider: false,
       enable: true,
       hidden: false,
       time: '-',
       memery: '-',
+      timeAdd: 'Unknown',
       problemLoading: true
     };
   },
@@ -102,6 +106,7 @@ export default {
           this.memery = data.memory_limit / 1000;
           this.time = data.time_limit;
           this.hidden = !data.enabled;
+          this.timeAdd = timeFormat(data.date_added);
           this.problemLoading = false;
         })
         .catch(err => {

src/components/page/navbar.vue

@@ -45,8 +45,8 @@ export default {
       if (!x.enabled) {
         x.title = (
           <div>
+            <router-link to={'/problem/' + String(x.pid)} class={color + ' text-normal'}>{ x.title } </router-link>
             <el-tag effect="dark" type="warning">Hidden</el-tag>
-            <router-link to={'/problem/' + String(x.pid)} class={color + ' text-normal'}> { x.title }</router-link>
           </div>
         );
       } else {

src/components/problem/content.vue

@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       code: '',
-      lang_num: null,
+      lang_num: '-',
       buttonLoading: false,
       options: [{
         value: '0',

src/components/problem/list.vue

@@ -10,7 +10,7 @@
         <el-button @click="$router.go(-1);">Back</el-button>
       </el-card>
     </div>
-    <div id="info">
+    <div id="info" v-loading="userLoading">
       <el-row :gutter="20">
         <el-col :span="18">
           <el-card shadow="never">
@@ -25,10 +25,26 @@
           </el-card>
         </el-col>
       </el-row>
-      <el-card shadow="never" class="item">
-        <div slot="header" class="clearfix"><i class="el-icon-message" /> Email</div>
-        {{email}}
-      </el-card>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-card shadow="never" class="item">
+            <div slot="header" class="clearfix"><i class="el-icon-message" /> Email</div>
+            {{email}}
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="item">
+            <div slot="header" class="clearfix"><i class="el-icon-date" /> Time Joined</div>
+            {{timeJoin}}
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="item">
+            <div slot="header" class="clearfix"><i class="el-icon-time" /> Last Login</div>
+            {{lastLogin}}
+          </el-card>
+        </el-col>
+      </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
           <el-card shadow="never" class="item">
@@ -39,7 +55,7 @@
         <el-col :span="8">
           <el-card shadow="never" class="item">
             <div slot="header" class="clearfix"><i class="el-icon-upload2" /> Submited</div>
-            {{submit}} Problems
+            {{submit}} Times
           </el-card>
         </el-col>
         <el-col :span="8">
@@ -58,21 +74,25 @@
 </template>
 
 <script>
+import timeFormat from './../../methods/time';
 import apiurl from './../../apiurl';
 import MarkdownContainer from './../lib/MarkdownContainer.vue';
 
 export default {
   name: 'UserHomepage',
   data() {
     return {
-      username: '-',
+      username: 'Unknown',
       userid: '-',
-      email: '-',
+      email: 'Unknown',
       introduction: null,
       solved: '-',
       submit: '-',
-      rate: '-',
-      ismine: false
+      rate: 100,
+      ismine: false,
+      timeJoin: 'Unknown',
+      lastLogin: 'Unknown',
+      userLoading: true
     };
   },
   methods: {
@@ -87,6 +107,9 @@ export default {
           this.introduction = data.introduction;
           this.solved = data.solved;
           this.submit = data.submit_time;
+          this.timeJoin = timeFormat(data.date_joined);
+          this.lastLogin = timeFormat(data.last_login);
+          this.userLoading = false;
           if (this.solved == 0) {
             this.rate = 100;
           } else {

src/components/problem/submit.vue

@@ -0,0 +1,7 @@
+let timeFormat = (origin) => {
+  let time = new Date(origin);
+  let res = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
+  return res;
+};
+
+export default timeFormat;