Skip to content

Commit 0b7e175

Browse files
szdytomszdytom
authored
Merge pull request #76 from segment-oj/improve-mobile-UX-ztl
Improve mobile ux & css
2 parents de180c3 + dae739e commit 0b7e175

32 files changed

+1331
-289
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"axios": "^0.19.2",
13+
"codemirror": "^5.56.0",
1314
"core-js": "^3.6.5",
1415
"dompurify": "^2.0.12",
1516
"element-ui": "^2.13.2",

‎src/assets/code_mirror/tomorrow.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
.CodeMirror {
2+
height: 600px !important;
3+
background-color: #fcfcfc;
4+
color: #4d4d4c;
5+
}
6+
7+
.CodeMirror-cursor {
8+
opacity: 0.7;
9+
border-left: 2px solid #4d4d4c;
10+
}
11+
12+
.cm-qualifier {
13+
color: #c82829;
14+
}
15+
16+
.cm-property {
17+
color: #eab700;
18+
}
19+
20+
.cm-meta,
21+
.cm-number,
22+
.cm-atom {
23+
color: #f5871f;
24+
}
25+
26+
.cm-comment {
27+
color: #8e908c !important;
28+
}
29+
30+
.cm-keyword,
31+
.cm-type,
32+
.cm-tag {
33+
color: #8959a8;
34+
}
35+
36+
.cm-def {
37+
color: #4271ae;
38+
}
39+
40+
.cm-string {
41+
color: #718c00 !important;
42+
}
43+
44+
.CodeMirror-linebackground,
45+
.CodeMirror-activeline-background {
46+
background-color: #efefef !important;
47+
}
48+
49+
.cm-operator {
50+
color: #3e999f !important;
51+
}
52+
53+
.CodeMirror-selected {
54+
background-color: #d6d6d6 !important;
55+
}
56+
57+
.CodeMirror-gutters {
58+
background: #f9f9f9;
59+
border-right: none;
60+
}
61+
62+
.CodeMirror-linenumber {
63+
color: #909399;
64+
font-size: 15px;
65+
}
66+
67+
.CodeMirror-matchingbracket {
68+
color: #4d4d4c !important;
69+
outline: 1px solid #d6d6d6;
70+
-moz-outline-radius: 3px;
71+
}
72+
73+
.CodeMirror-nonmatchingbracket {
74+
color: #c82829 !important;
75+
outline: 1px solid #c82829;
76+
-moz-outline-radius: 3px;
77+
}
78+
79+
.CodeMirror-foldmarker {
80+
text-shadow: none !important;
81+
color: #8e908c !important;
82+
font-family: "Fira Sans" !important;
83+
outline: 1px solid #d6d6d6;
84+
-moz-outline-radius: 3px;
85+
}
86+
87+
.CodeMirror span[role="presentation"] {
88+
font-size: 14px;
89+
}
90+
91+
.CodeMirror-hints {
92+
max-height: 200px !important;
93+
box-shadow: none !important;
94+
border-color: #dcdfe6 !important;
95+
background-color: #fefefe !important;
96+
font-family: "Fira Code" !important;
97+
padding: 5px !important;
98+
}
99+
100+
.CodeMirror-hint {
101+
line-height: 20px;
102+
color: #444444 !important;
103+
}
104+
105+
li.CodeMirror-hint-active {
106+
background-color: #efefef !important;
107+
color: #444444 !important;
108+
font-weight: 500;
109+
}
110+
111+
.CodeMirror-dialog {
112+
background-color: #fefefe !important;
113+
}
114+
115+
.cm-searching {
116+
background-color: #d6d6d6;
117+
}
118+
119+
.CodeMirror-search-label {
120+
line-height: 24px;
121+
font-weight: 500;
122+
}
123+
124+
.CodeMirror-search-field {
125+
line-height: 20px;
126+
border: 1px solid #dcdfe6 !important;
127+
width: 50em !important;
128+
}
129+
130+
.CodeMirror-search-hint {
131+
line-height: 25px;
132+
float: right;
133+
}
134+
135+
.cm-matchhighlight {
136+
outline: 1px solid #d6d6d6;
137+
-moz-outline-radius: 3px;
138+
}
139+
140+
.CodeMirror-selection-highlight-scrollbar {
141+
margin-right: 2.5px;
142+
width: 5px !important;
143+
background-color: #8e908c;
144+
opacity: 0.6;
145+
}
146+
147+
.CodeMirror-simplescroll-horizontal div,
148+
.CodeMirror-simplescroll-vertical div {
149+
background: #b3b3b3 !important;
150+
border: none !important;
151+
border-radius: 0 !important;
152+
}
153+
154+
.CodeMirror-simplescroll-vertical {
155+
width: 10px !important;
156+
}
157+
158+
.CodeMirror-simplescroll-horizontal {
159+
height: 10px !important;
160+
}

‎src/assets/css/basic.css‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
::-webkit-scrollbar {
22
width: 10px;
33
height: 10px;
4-
background-color: #cccccc;
4+
background-color: #eeeeee;
55
}
66

77
::-webkit-scrollbar-track {
8-
background-color: #cccccc;
8+
background-color: #eeeeee;
99
}
1010

1111
::-webkit-scrollbar-thumb {
1212
background-color: #b3b3b3;
1313
transition: all 0.5s;
1414
}
1515

16-
::-webkit-scrollbar-thumb:hover {
17-
background-color: #808080;
18-
}
19-
2016
*::selection {
2117
background-color: #b9d7ff;
2218
opacity: 0.2;
@@ -45,6 +41,21 @@ h5 {
4541
color: #303133;
4642
}
4743

44+
a {
45+
text-decoration: none;
46+
}
47+
48+
.markdown-container a {
49+
color: #409eff;
50+
text-decoration: none;
51+
transition: 0.2s;
52+
}
53+
54+
.markdown-container a:hover {
55+
color: #66b1ff;
56+
text-decoration: underline;
57+
}
58+
4859
.markdown-container pre {
4960
white-space: pre-wrap;
5061
white-space: -moz-pre-wrap;
@@ -148,10 +159,26 @@ h3::before {
148159
border: none;
149160
}
150161

151-
.highzindex {
162+
.bottom-zindex {
163+
z-index: 10 !important;
164+
}
165+
166+
.low-zindex {
167+
z-index: 100 !important;
168+
}
169+
170+
.mid-zindex {
171+
z-index: 1000 !important;
172+
}
173+
174+
.high-zindex {
152175
z-index: 10000 !important;
153176
}
154177

178+
.top-zindex {
179+
z-index: 100000 !important;
180+
}
181+
155182
.no-margin {
156183
margin: 0;
157184
}

‎src/assets/css/theme.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,6 @@
5454
background-color: #409eff;
5555
}
5656

57-
a {
58-
color: #409eff;
59-
text-decoration: none;
60-
transition: 0.2s;
61-
}
62-
63-
a:hover {
64-
color: #66b1ff;
65-
}
66-
6757
.CodeMirror .CodeMirror-code .cm-comment {
6858
background-color: #ffffff00 !important;
6959
font-family: "Fira Code";

‎src/assets/element/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2470,7 +2470,7 @@
24702470
position: absolute;
24712471
top: 1px;
24722472
left: 1px;
2473-
border-radius: 100%;
2473+
border-radius: 0;
24742474
-webkit-transition: all 0.3s;
24752475
transition: all 0.3s;
24762476
width: 16px;

‎src/assets/fonts/fonts.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
pre,
22
code {
3-
font-family: "Fira Code", "Cascadia Code", "Noto Sans SC", "Source Code Pro", Consolas, "微软雅黑", monospace;
3+
font-family: "Fira Code", "Cascadia Code", "Noto Sans SC", "Source Code Pro", Consolas, "微软雅黑", monospace !important;
44
}
55

66
body {

‎src/components/404.vue‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
<template>
2-
<div class="box">
3-
<div class="logo">
4-
404
5-
</div>
6-
<div class="message">
7-
Page Not Found
8-
</div>
2+
<div>
3+
<el-card style="height: 700px;">
4+
<div slot="header" class="clearfix">
5+
<i class="el-icon-warning" />
6+
Error
7+
</div>
8+
<div class="box">
9+
<div class="logo">
10+
404
11+
</div>
12+
<el-divider />
13+
<div class="message">
14+
Page Not Found
15+
</div>
16+
</div>
17+
</el-card>
918
</div>
1019
</template>
1120

@@ -17,7 +26,7 @@ export default {
1726

1827
<style scoped>
1928
.logo {
20-
font-size: 5em;
29+
font-size: 8em;
2130
}
2231
2332
.message {

‎src/components/app/editor.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div>
3+
<el-card>
4+
<div slot="header" class="clearfix">
5+
<i class="el-icon-document" />
6+
Code Editor
7+
</div>
8+
<codeMirror />
9+
</el-card>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import codeMirror from './../lib/editor.vue';
15+
16+
export default {
17+
name: 'CodeEditorContainer',
18+
data() {
19+
return {
20+
source: null
21+
};
22+
},
23+
components: {
24+
codeMirror
25+
}
26+
};
27+
</script>

‎src/components/home/carousel.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
2-
<el-carousel trigger="click" :interval="5000" arrow="none" id="carousel">
3-
<el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
4-
</el-carousel>
2+
<div>
3+
<el-carousel trigger="click" :interval="5000" arrow="none" id="carousel">
4+
<el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
5+
</el-carousel>
6+
</div>
57
</template>
68

79
<script>

‎src/components/home/page.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
<template>
2-
<carousel/>
2+
<div>
3+
<carousel/>
4+
<JumpToProblem class="item" />
5+
</div>
36
</template>
47

58
<script>
69
import Carousel from './carousel.vue';
10+
import JumpToProblem from './../lib/jumpToProblem.vue';
711
812
export default {
913
name: 'Home',
1014
components: {
11-
Carousel
15+
Carousel,
16+
JumpToProblem
1217
}
1318
};
1419
</script>
20+
21+
<style scoped>
22+
.item {
23+
margin-top: 20px;
24+
}
25+
</style>

0 commit comments

Comments
 (0)