Merge branch 'master' into add-user-homepage-fisher

Author: szdytom

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="app">
-    <NavBar/>
+    <NavBar />
     <div id="main">
       <div id="content">
         <router-view></router-view>
       </div>
     </div>
-    <Footer/>
+    <Footer />
     <UserLogin></UserLogin>
     <UserRegister></UserRegister>
   </div>

src/assets/css/basic.css

@@ -137,3 +137,15 @@ body {
 .highzindex {
     z-index: 10000 !important;
 }
+
+.no-margin {
+    margin: 0;
+}
+
+.no-bottom-margin {
+    margin-bottom: 0;
+}
+
+.no-top-margin {
+    margin-top: 0;
+}

src/assets/css/mde.css

@@ -0,0 +1,3 @@
+.CodeMirror {
+    height: 500px;
+}

src/assets/css/theme.css

@@ -63,3 +63,9 @@ a {
 a:hover {
     color: #66b1ff;
 }
+
+.CodeMirror .CodeMirror-code .cm-comment {
+    background-color: #ffffff00 !important;
+    font-family: "Fira Code";
+    color: #cc6666;
+}

src/components/lib/MarkdownEditor.vue

@@ -5,15 +5,16 @@
       <el-tab-pane label="Preview" name="second" />
     </el-tabs>
     <div :class="editorVisbleClassName">
-      <textarea 
-        :value="value" 
-        @input="handleInput($event.target.value)" 
-        class="markdown-editor-value-placeholder" 
-        :id="uid + '-markdown-editor'" 
+      <textarea
+        :value="value"
+        @input="handleInput($event.target.value)"
+        class="markdown-editor-value-placeholder"
+        :id="uid + '-markdown-editor'"
         />
-
     </div>
-    <MarkdownContainer v-if="showPreview" :content="content" />
+    <div id="markdown-container-outline" v-if="showPreview">
+      <MarkdownContainer :content="content" />
+    </div>
   </div>
 </template>
 
@@ -22,6 +23,7 @@ import MarkdownContainer from './MarkdownContainer.vue';
 
 import SimpleMDE from 'simplemde';
 import 'simplemde/dist/simplemde.min.css';
+import './../../assets/css/mde.css';
 
 export default {
   name: 'MarkdownEditor',
@@ -123,4 +125,10 @@ export default {
 .markdown-editor-value-placeholder {
     display: none;
 }
+
+#markdown-container-outline {
+    padding: 10px;
+    border: 1px solid #dddddd;
+    margin-bottom: 20px;
+}
 </style>

src/components/problem/content.vue

@@ -143,7 +143,6 @@ export default {
 
 .header {
     font-size: 35px;
-    font-weight: 400;
     color: #303133;
 }
 

src/components/problem/edit.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <span class="text-extra-big">Edit problem #.{{this.$route.params.id}}</span>
+    <span class="text-extra-big">Edit problem #{{this.$route.params.id}}</span>
+    <h3 class="no-bottom-margin">Problem Name</h3>
     <el-input v-model="title" placeholder="input problem title here"></el-input>
+    <h3 class="no-bottom-margin">Problem Content</h3>
     <MarkdownEditor v-model="mdContent" />
     <el-button type="primary" @click="submit();" :loading="buttonLoading">Submit</el-button>
     <el-button @click="back();">Back</el-button>
@@ -73,4 +75,4 @@ export default {
     MarkdownEditor
   }
 };
-</script>
+</script>

src/components/problem/submit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="text-extra-big">Submit problem #.{{this.$route.params.id}}</span>
+    <span class="text-extra-big">Submit problem #{{this.$route.params.id}}</span>
     <el-select v-model="lang_num" placeholder="Select language">
       <el-option
         v-for="item in options"
@@ -9,8 +9,15 @@
         :value="item.value">
       </el-option>
     </el-select>
-    <br>
-    <textarea placeholder="Input your code here" required v-model="code" />
+    <el-input
+      class="code-input"
+      type="textarea"
+      :rows="20"
+      placeholder="Paste your code"
+      required
+      v-model="code"
+    >
+    </el-input>
     <br>
     <el-button type="primary" @click="submit();" :loading="buttonLoading">Submit</el-button>
     <el-button @click="back();">Back</el-button>
@@ -115,3 +122,10 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.code-input {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+</style>