Skip to content

Commit de180c3

Browse files
szdytomszdytom
authored
Merge pull request #75 from segment-oj/improve-user-experience-ztl
Improve user experience ztl
2 parents 87cbd42 + 1fd73ff commit de180c3

File tree

10 files changed

+261
-94
lines changed

10 files changed

+261
-94
lines changed

‎src/assets/css/basic.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
::-webkit-scrollbar-thumb {
1212
background-color: #b3b3b3;
13+
transition: all 0.5s;
1314
}
1415

1516
::-webkit-scrollbar-thumb:hover {
@@ -31,6 +32,19 @@
3132
opacity: 0.2;
3233
}
3334

35+
body {
36+
color: #606266;
37+
}
38+
39+
h1,
40+
h2,
41+
h3,
42+
h4,
43+
h5 {
44+
font-weight: 400;
45+
color: #303133;
46+
}
47+
3448
.markdown-container pre {
3549
white-space: pre-wrap;
3650
white-space: -moz-pre-wrap;
@@ -47,13 +61,8 @@
4761
margin: 20px 0 20px 0;
4862
}
4963

50-
h1,
51-
h2,
52-
h3,
53-
h4,
54-
h5 {
55-
font-weight: 400;
56-
color: #303133;
64+
.markdown-container thead {
65+
background-color: #f9f9f9;
5766
}
5867

5968
.markdown-container h1::before,
@@ -92,15 +101,6 @@ h3::before {
92101
font-size: 14px;
93102
}
94103

95-
.cm-header,
96-
.cm-strong {
97-
font-weight: 400 !important;
98-
}
99-
100-
body {
101-
color: #606266;
102-
}
103-
104104
.markdown-container blockquote {
105105
background-color: #f8f8f8;
106106
border-left: 5px solid #a8a8a8;

‎src/assets/css/mde.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
.CodeMirror {
22
height: 500px;
3+
border: none;
4+
}
5+
6+
.cm-header,
7+
.cm-strong {
8+
font-weight: 400 !important;
39
}

‎src/components/lib/MarkdownEditor.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,8 @@ export default {
128128
129129
#markdown-container-outline {
130130
padding: 10px;
131-
border: 1px solid #dddddd;
132131
margin-bottom: 20px;
132+
max-height: 600px;
133+
overflow-y: scroll;
133134
}
134135
</style>

‎src/components/page/navbar.vue‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,17 @@
1111
text-color="#fff"
1212
active-text-color="rgb(233, 233, 235)"
1313
>
14-
<el-menu-item index=""><img src="./../../assets/icon/SOJ-thick-white.png" style="height: 40px;" /></el-menu-item>
15-
<el-menu-item index="/"><i class="el-icon-s-home" /> Home</el-menu-item>
16-
<el-menu-item index="/problem/list"><i class="el-icon-s-order" />Problem List</el-menu-item>
14+
<el-menu-item index="" @click="$router.push('/')">
15+
<img src="./../../assets/icon/SOJ-thick-white.png" style="height: 40px;" />
16+
</el-menu-item>
17+
<el-menu-item index="/" class="webkit-box">
18+
<i class="el-icon-s-home" />
19+
<div class="lable"> Home</div>
20+
</el-menu-item>
21+
<el-menu-item index="/problem/list" class="webkit-box">
22+
<i class="el-icon-s-order" />
23+
<div class="lable"> Problem List</div>
24+
</el-menu-item>
1725
<el-submenu index="2" id="user">
1826
<template slot="title">
1927
<el-avatar shape="square">
@@ -53,7 +61,13 @@ export default {
5361
};
5462
</script>
5563

56-
<style lang="css" scoped>
64+
<style scoped>
65+
@media only screen and (max-width: 500px) {
66+
.lable {
67+
display: none;
68+
}
69+
}
70+
5771
#nav {
5872
z-index: 1000;
5973
background-color: #545c64;
@@ -81,4 +95,8 @@ export default {
8195
#user_icon {
8296
height: 50%;
8397
}
98+
99+
.webkit-box {
100+
display: -webkit-box;
101+
}
84102
</style>

‎src/components/problem/content.vue‎

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,33 @@
1818
</div>
1919
<div id="pannel" v-if="!isWider">
2020
<div id="tools">
21-
<el-row>
22-
<el-col>
23-
<div><i class="el-icon-s-tools" /> Tool Bar</div>
24-
<el-menu default-active="3">
25-
<el-menu-item index="3" @click="$router.push('/problem/' + $route.params.id +'/submit');">
26-
<span slot="title" class="text-bold"><i class="el-icon-upload2" /> Submit</span>
21+
<el-card>
22+
<div><i class="el-icon-s-tools" /> Tool Bar</div>
23+
<el-menu default-active="3">
24+
<el-menu-item index="3" @click="$router.push('/problem/' + $route.params.id +'/submit');">
25+
<span slot="title" class="text-bold"><i class="el-icon-upload2" /> Submit</span>
26+
</el-menu-item>
27+
<el-submenu index="0">
28+
<template slot="title"><div class="text-bold"><i class="el-icon-pie-chart" /> Statistics</div></template>
29+
<el-menu-item index="0-0">Submissions</el-menu-item>
30+
<el-menu-item index="0-1">Statistics</el-menu-item>
31+
</el-submenu>
32+
<el-submenu index="1">
33+
<template slot="title"><div class="text-bold"><i class="el-icon-chat-line-round" /> Discuss</div></template>
34+
<el-menu-item index="1-0">Discussions</el-menu-item>
35+
<el-menu-item index="1-1">Solutions</el-menu-item>
36+
</el-submenu>
37+
<el-submenu index="2">
38+
<template slot="title"><div class="text-bold"><i class="el-icon-edit" /> Edit</div></template>
39+
<el-menu-item index="2-0" @click="$router.push('/problem/' + $route.params.id +'/edit');">
40+
Edit
2741
</el-menu-item>
28-
<el-submenu index="0">
29-
<template slot="title"><div class="text-bold"><i class="el-icon-pie-chart" /> Statistics</div></template>
30-
<el-menu-item index="0-0">Submissions</el-menu-item>
31-
<el-menu-item index="0-1">Statistics</el-menu-item>
32-
</el-submenu>
33-
<el-submenu index="1">
34-
<template slot="title"><div class="text-bold"><i class="el-icon-chat-line-round" /> Discuss</div></template>
35-
<el-menu-item index="1-0">Discussions</el-menu-item>
36-
<el-menu-item index="1-1">Solutions</el-menu-item>
37-
</el-submenu>
38-
<el-submenu index="2">
39-
<template slot="title"><div class="text-bold"><i class="el-icon-edit" /> Edit</div></template>
40-
<el-menu-item index="2-0" @click="$router.push('/problem/' + $route.params.id +'/edit');">
41-
Edit
42-
</el-menu-item>
43-
<el-menu-item index="2-1">Delete</el-menu-item>
44-
<el-menu-item index="2-2">Settings</el-menu-item>
45-
</el-submenu>
46-
</el-menu>
47-
<el-button @click="$router.push('/problem/list');">Back</el-button>
48-
</el-col>
49-
</el-row>
42+
<el-menu-item index="2-1">Delete</el-menu-item>
43+
<el-menu-item index="2-2">Settings</el-menu-item>
44+
</el-submenu>
45+
</el-menu>
46+
<el-button @click="$router.push('/problem/list');" class="margin-top-small">Back</el-button>
47+
</el-card>
5048
</div>
5149
<div id="info">
5250
<el-card shadow="never">
@@ -67,10 +65,10 @@
6765
</el-card>
6866
<el-card shadow="never" class="margin-top">
6967
<div class="margin-bottom">
70-
<i class="el-icon-collection-tag" />
68+
<i class="el-icon-s-flag" />
7169
Tags
72-
<div v-if="showTag" @click="showTag = false" id="tag-button"><i class="el-icon-arrow-up" />Hide tags</div>
73-
<div v-if="!showTag" @click="showTag = true" id="tag-button"><i class="el-icon-arrow-down" />Show tags</div>
70+
<div v-if="showTag" @click="showTag = false" id="tag-button"><i class="el-icon-arrow-up" /> Hide tags</div>
71+
<div v-if="!showTag" @click="showTag = true" id="tag-button"><i class="el-icon-arrow-down" /> Show tags</div>
7472
</div>
7573
<div class="tags" v-if="showTag">
7674
<SegmentTag
@@ -145,8 +143,8 @@ export default {
145143
this.hidden = !data.enabled;
146144
this.timeAdd = timeFormat(data.date_added);
147145
this.tags = data.tags;
148-
this.problemLoading = false;
149146
this.render_tags();
147+
this.problemLoading = false;
150148
})
151149
.catch(err => {
152150
if(err.request.status === 404) {
@@ -199,10 +197,14 @@ export default {
199197
right: 30px;
200198
}
201199
202-
#pannel:hover {
200+
#pannel:active {
203201
z-index: 1000;
204202
opacity: 1;
205203
}
204+
205+
#info {
206+
display: none;
207+
}
206208
}
207209
208210
.el-menu {
@@ -223,18 +225,16 @@ export default {
223225
z-index: 10;
224226
width: 100%;
225227
padding: 20px;
226-
border: 1px solid #e4e7ed;
228+
border: 1px solid #ebeef5;
227229
}
228230
229231
#pannel {
230232
background-color: #ffffff !important;
231-
margin-left: 20px;
233+
margin-left: 30px;
232234
}
233235
234236
#tools {
235-
width: 200px;
236-
padding: 20px;
237-
border: 1px solid #e4e7ed;
237+
width: 250px;
238238
}
239239
240240
#full-screen-button,
@@ -258,4 +258,8 @@ export default {
258258
.tool-content {
259259
color: #606266;
260260
}
261+
262+
.margin-top-small {
263+
margin-top: 10px;
264+
}
261265
</style>

‎src/components/problem/edit.vue‎

Lines changed: 65 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,44 @@
11
<template>
2-
<div>
3-
<h1>Edit problem #{{this.$route.params.id}}</h1>
4-
<h3 class="no-bottom-margin">Problem Name</h3>
5-
<el-input v-model="title" placeholder="input problem title here"></el-input>
6-
<h3 class="no-bottom-margin">Problem Content</h3>
7-
<MarkdownEditor v-model="mdContent" />
8-
<el-button type="primary" @click="submit();" :loading="buttonLoading">Submit</el-button>
9-
<el-button @click="back();">Back</el-button>
10-
</div>
2+
<el-row :gutter="30">
3+
<el-col span="6">
4+
<el-card>
5+
<div slot="header" class="clearfix"><i class="el-icon-edit-outline" /> Name</div>
6+
<el-input v-model="title" placeholder="Input problem title here"></el-input>
7+
<el-checkbox v-model="enabled" label="Enabled" class="item"></el-checkbox>
8+
</el-card>
9+
<el-card class="item">
10+
<i class="el-icon-menu" /> Limitation
11+
<el-divider>Time</el-divider>
12+
<el-row gutter="10">
13+
<el-col span="20">
14+
<el-input v-model="time" placeholder="Set time limitation"></el-input>
15+
</el-col>
16+
<el-col span="4" class="center-text">
17+
MS
18+
</el-col>
19+
</el-row>
20+
<el-divider>Memery</el-divider>
21+
<el-row gutter="10">
22+
<el-col span="20">
23+
<el-input v-model="memery" placeholder="Set memery limitation"></el-input>
24+
</el-col>
25+
<el-col span="4" class="center-text">
26+
MB
27+
</el-col>
28+
</el-row>
29+
</el-card>
30+
<el-card class="item">
31+
<el-button type="primary" @click="submit();" :loading="buttonLoading">Submit</el-button>
32+
<el-button @click="back();">Back</el-button>
33+
</el-card>
34+
</el-col>
35+
<el-col span="18">
36+
<el-card v-loading="contentLoading">
37+
<div slot="header" class="clearfix"><i class="el-icon-document" /> Content</div>
38+
<MarkdownEditor v-model="mdContent" />
39+
</el-card>
40+
</el-col>
41+
</el-row>
1142
</template>
1243

1344
<script>
@@ -20,7 +51,11 @@ export default {
2051
return {
2152
title: '',
2253
mdContent: 'Loading...',
23-
buttonLoading: false
54+
contentLoading: true,
55+
buttonLoading: false,
56+
time: 'Unknown',
57+
memery: 'Unknown',
58+
enabled: true
2459
};
2560
},
2661
methods: {
@@ -31,6 +66,10 @@ export default {
3166
let data = res.data.res;
3267
this.title = data.title;
3368
this.mdContent = data.description;
69+
this.memery = data.memory_limit / 1000;
70+
this.time = data.time_limit;
71+
this.enabled = data.enabled;
72+
this.contentLoading = false;
3473
})
3574
.catch(err => {
3675
this.$SegmentMessage.error(this, 'Problem loading error');
@@ -45,11 +84,14 @@ export default {
4584
this.$axios
4685
.patch(apiurl('/problem/' + this.$route.params.id), {
4786
title: this.title,
48-
description: this.mdContent
87+
description: this.mdContent,
88+
memory_limit: this.memery * 1000,
89+
time_limit: this.time,
90+
enabled: this.enabled
4991
})
5092
.then(() => {
51-
this.$SegmentMessage.success(this, 'Your change has been submited');
52-
this.$router.push('/problem/'+this.$route.params.id);
93+
this.buttonLoading = false;
94+
this.$SegmentMessage.success(this, 'Your changes have been submitted');
5395
})
5496
.catch(err => {
5597
if(err.request.status === 404) {
@@ -71,3 +113,13 @@ export default {
71113
}
72114
};
73115
</script>
116+
117+
<style scoped>
118+
.item {
119+
margin-top: 20px;
120+
}
121+
122+
.center-text {
123+
margin-top: 0.7rem;
124+
}
125+
</style>

0 commit comments

Comments
 (0)