Improve mobile ux & css

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "codemirror": "^5.56.0",
     "core-js": "^3.6.5",
     "dompurify": "^2.0.12",
     "element-ui": "^2.13.2",

src/assets/code_mirror/tomorrow.css

@@ -0,0 +1,160 @@
+.CodeMirror {
+    height: 600px !important;
+    background-color: #fcfcfc;
+    color: #4d4d4c;
+}
+
+.CodeMirror-cursor {
+    opacity: 0.7;
+    border-left: 2px solid #4d4d4c;
+}
+
+.cm-qualifier {
+    color: #c82829;
+}
+
+.cm-property {
+    color: #eab700;
+}
+
+.cm-meta,
+.cm-number,
+.cm-atom {
+    color: #f5871f;
+}
+
+.cm-comment {
+    color: #8e908c !important;
+}
+
+.cm-keyword,
+.cm-type,
+.cm-tag {
+    color: #8959a8;
+}
+
+.cm-def {
+    color: #4271ae;
+}
+
+.cm-string {
+    color: #718c00 !important;
+}
+
+.CodeMirror-linebackground,
+.CodeMirror-activeline-background {
+    background-color: #efefef !important;
+}
+
+.cm-operator {
+    color: #3e999f !important;
+}
+
+.CodeMirror-selected {
+    background-color: #d6d6d6 !important;
+}
+
+.CodeMirror-gutters {
+    background: #f9f9f9;
+    border-right: none;
+}
+
+.CodeMirror-linenumber {
+    color: #909399;
+    font-size: 15px;
+}
+
+.CodeMirror-matchingbracket {
+    color: #4d4d4c !important;
+    outline: 1px solid #d6d6d6;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror-nonmatchingbracket {
+    color: #c82829 !important;
+    outline: 1px solid #c82829;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror-foldmarker {
+    text-shadow: none !important;
+    color: #8e908c !important;
+    font-family: "Fira Sans" !important;
+    outline: 1px solid #d6d6d6;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror span[role="presentation"] {
+    font-size: 14px;
+}
+
+.CodeMirror-hints {
+    max-height: 200px !important;
+    box-shadow: none !important;
+    border-color: #dcdfe6 !important;
+    background-color: #fefefe !important;
+    font-family: "Fira Code" !important;
+    padding: 5px !important;
+}
+
+.CodeMirror-hint {
+    line-height: 20px;
+    color: #444444 !important;
+}
+
+li.CodeMirror-hint-active {
+    background-color: #efefef !important;
+    color: #444444 !important;
+    font-weight: 500;
+}
+
+.CodeMirror-dialog {
+    background-color: #fefefe !important;
+}
+
+.cm-searching {
+    background-color: #d6d6d6;
+}
+
+.CodeMirror-search-label {
+    line-height: 24px;
+    font-weight: 500;
+}
+
+.CodeMirror-search-field {
+    line-height: 20px;
+    border: 1px solid #dcdfe6 !important;
+    width: 50em !important;
+}
+
+.CodeMirror-search-hint {
+    line-height: 25px;
+    float: right;
+}
+
+.cm-matchhighlight {
+    outline: 1px solid #d6d6d6;
+    -moz-outline-radius: 3px;
+}
+
+.CodeMirror-selection-highlight-scrollbar {
+    margin-right: 2.5px;
+    width: 5px !important;
+    background-color: #8e908c;
+    opacity: 0.6;
+}
+
+.CodeMirror-simplescroll-horizontal div,
+.CodeMirror-simplescroll-vertical div {
+    background: #b3b3b3 !important;
+    border: none !important;
+    border-radius: 0 !important;
+}
+
+.CodeMirror-simplescroll-vertical {
+    width: 10px !important;
+}
+
+.CodeMirror-simplescroll-horizontal {
+    height: 10px !important;
+}

src/assets/css/basic.css

@@ -1,22 +1,18 @@
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
-    background-color: #cccccc;
+    background-color: #eeeeee;
 }
 
 ::-webkit-scrollbar-track {
-    background-color: #cccccc;
+    background-color: #eeeeee;
 }
 
 ::-webkit-scrollbar-thumb {
     background-color: #b3b3b3;
     transition: all 0.5s;
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background-color: #808080;
-}
-
 *::selection {
     background-color: #b9d7ff;
     opacity: 0.2;
@@ -45,6 +41,21 @@ h5 {
     color: #303133;
 }
 
+a {
+    text-decoration: none;
+}
+
+.markdown-container a {
+    color: #409eff;
+    text-decoration: none;
+    transition: 0.2s;
+}
+
+.markdown-container a:hover {
+    color: #66b1ff;
+    text-decoration: underline;
+}
+
 .markdown-container pre {
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
@@ -148,10 +159,26 @@ h3::before {
     border: none;
 }
 
-.highzindex {
+.bottom-zindex {
+    z-index: 10 !important;
+}
+
+.low-zindex {
+    z-index: 100 !important;
+}
+
+.mid-zindex {
+    z-index: 1000 !important;
+}
+
+.high-zindex {
     z-index: 10000 !important;
 }
 
+.top-zindex {
+    z-index: 100000 !important;
+}
+
 .no-margin {
     margin: 0;
 }

src/assets/css/theme.css

@@ -54,16 +54,6 @@
     background-color: #409eff;
 }
 
-a {
-    color: #409eff;
-    text-decoration: none;
-    transition: 0.2s;
-}
-
-a:hover {
-    color: #66b1ff;
-}
-
 .CodeMirror .CodeMirror-code .cm-comment {
     background-color: #ffffff00 !important;
     font-family: "Fira Code";

src/assets/element/index.css

@@ -2470,7 +2470,7 @@
     position: absolute;
     top: 1px;
     left: 1px;
-    border-radius: 100%;
+    border-radius: 0;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     width: 16px;

src/assets/fonts/fonts.css

@@ -1,6 +1,6 @@
 pre,
 code {
-    font-family: "Fira Code", "Cascadia Code", "Noto Sans SC", "Source Code Pro", Consolas, "微软雅黑", monospace;
+    font-family: "Fira Code", "Cascadia Code", "Noto Sans SC", "Source Code Pro", Consolas, "微软雅黑", monospace !important;
 }
 
 body {

src/components/404.vue

@@ -1,11 +1,20 @@
 <template>
-  <div class="box">
-    <div class="logo">
-      404
-    </div>
-    <div class="message">
-      Page Not Found
-    </div>
+  <div>
+    <el-card style="height: 700px;">
+      <div slot="header" class="clearfix">
+        <i class="el-icon-warning" />
+        Error
+      </div>
+      <div class="box">
+        <div class="logo">
+          404
+        </div>
+        <el-divider />
+        <div class="message">
+          Page Not Found
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -17,7 +26,7 @@ export default {
 
 <style scoped>
 .logo {
-    font-size: 5em;
+    font-size: 8em;
 }
 
 .message {

src/components/app/editor.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <i class="el-icon-document" />
+        Code Editor
+      </div>
+      <codeMirror />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import codeMirror from './../lib/editor.vue';
+
+export default {
+  name: 'CodeEditorContainer',
+  data() {
+    return {
+      source: null
+    };
+  },
+  components: {
+    codeMirror
+  }
+};
+</script>

src/components/home/carousel.vue

@@ -1,7 +1,9 @@
 <template>
-  <el-carousel trigger="click" :interval="5000" arrow="none" id="carousel">
-    <el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
-  </el-carousel>
+  <div>
+    <el-carousel trigger="click" :interval="5000" arrow="none" id="carousel">
+      <el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
+    </el-carousel>
+  </div>
 </template>
 
 <script>

src/components/home/page.vue

@@ -1,14 +1,25 @@
 <template>
-  <carousel/>
+  <div>
+    <carousel/>
+    <JumpToProblem class="item" />
+  </div>
 </template>
 
 <script>
 import Carousel from './carousel.vue';
+import JumpToProblem from './../lib/jumpToProblem.vue';
 
 export default {
   name: 'Home',
   components: {
-    Carousel
+    Carousel,
+    JumpToProblem
   }
 };
 </script>
+
+<style scoped>
+.item {
+    margin-top: 20px;
+}
+</style>