Skip to content

Commit 8b8d50a

Browse files
NeibceNeibce
committed
Revamp 404 page layout
1 parent eb574c0 commit 8b8d50a

2 files changed

Lines changed: 204 additions & 81 deletions

File tree

‎frontend/src/pages/oj/App.vue‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
</template>
99
<div
1010
class="content-app"
11-
:class="{ ps: isProblemSolving, 'submission-list-app': isSubmissionList }"
11+
:class="{
12+
ps: isProblemSolving,
13+
'submission-list-app': isSubmissionList,
14+
'flat-white-app': isFlatWhitePage,
15+
}"
1216
>
1317
<transition name="fadeInUp" mode="out-in">
1418
<router-view></router-view>
@@ -17,7 +21,10 @@
1721
<template v-if="!isProblemSolving">
1822
<div
1923
class="footer-dummy"
20-
:class="{ 'submission-list-footer-dummy': isSubmissionList }"
24+
:class="{
25+
'submission-list-footer-dummy': isSubmissionList,
26+
'flat-white-footer-dummy': isFlatWhitePage,
27+
}"
2128
></div>
2229
<CSEPFooter></CSEPFooter>
2330
</template>
@@ -47,19 +54,19 @@ export default {
4754
},
4855
mounted() {
4956
this.getWebsiteConfig()
50-
this.syncSubmissionListChrome()
57+
this.syncFlatWhiteChrome()
5158
},
5259
updated() {
53-
this.syncSubmissionListChrome()
60+
this.syncFlatWhiteChrome()
5461
},
5562
beforeDestroy() {
56-
this.syncSubmissionListChrome(false)
63+
this.syncFlatWhiteChrome(false)
5764
},
5865
methods: {
5966
...mapActions(["getWebsiteConfig", "changeDomTitle"]),
60-
syncSubmissionListChrome(force) {
67+
syncFlatWhiteChrome(force) {
6168
const enabled =
62-
typeof force === "boolean" ? force : this.isSubmissionList
69+
typeof force === "boolean" ? force : this.isFlatWhitePage
6370
document.documentElement.classList.toggle(
6471
"submission-list-page",
6572
enabled,
@@ -75,6 +82,12 @@ export default {
7582
this.$route.name === "submission-list" || this.$route.path === "/status"
7683
)
7784
},
85+
isNotFoundPage() {
86+
return this.$route.meta && this.$route.meta.title === "404"
87+
},
88+
isFlatWhitePage() {
89+
return this.isSubmissionList || this.isNotFoundPage
90+
},
7891
},
7992
watch: {
8093
website() {
@@ -85,7 +98,7 @@ export default {
8598
handler() {
8699
this.changeDomTitle()
87100
this.$nextTick(() => {
88-
this.syncSubmissionListChrome()
101+
this.syncFlatWhiteChrome()
89102
})
90103
},
91104
},
@@ -287,11 +300,14 @@ a {
287300
}
288301
289302
.submission-list-app,
290-
.submission-list-footer-dummy {
303+
.submission-list-footer-dummy,
304+
.flat-white-app,
305+
.flat-white-footer-dummy {
291306
background-color: #ffffff;
292307
}
293308
294-
.submission-list-app {
309+
.submission-list-app,
310+
.flat-white-app {
295311
margin-top: calc(var(--header-height) + 28px);
296312
}
297313

‎frontend/src/pages/oj/views/general/404.vue‎

Lines changed: 178 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,42 @@
11
<template>
2-
<div class="error404">
3-
<div class="error404-body-con">
4-
<Card>
5-
<div class="error404-body-con-title">
6-
4<span><Icon type="ios-navigate-outline"></Icon></span>4
7-
</div>
8-
<p class="error404-body-con-message">
9-
YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST
10-
</p>
11-
<div class="error404-btn-con">
12-
<Button
13-
@click="goHome"
14-
size="large"
15-
style="width: 200px"
16-
type="ghost"
17-
>{{ $t("m.Go_Home") }}</Button
18-
>
19-
<Button
20-
@click="backPage"
21-
size="large"
22-
style="width: 200px; margin-left: 40px"
23-
type="primary"
24-
>{{ $t("m.Back") }}</Button
25-
>
2+
<div class="error404 flex-container">
3+
<section id="main" class="error404-panel">
4+
<div class="error404-content">
5+
<div class="error404-body">
6+
<div class="error404-mark" aria-hidden="true">
7+
<span>4</span>
8+
<svg class="error404-compass" viewBox="0 0 96 96">
9+
<circle cx="48" cy="48" r="35" />
10+
<path d="M59 25 50 51 28 64 37 38 59 25Z" />
11+
</svg>
12+
<span>4</span>
13+
</div>
14+
15+
<div class="error404-copy">
16+
<h2>페이지를 찾을 수 없습니다</h2>
17+
<p>
18+
입력하신 주소가 올바르지 않거나 페이지가 이동 또는 삭제되었습니다.
19+
</p>
20+
<div class="error404-actions">
21+
<button
22+
class="error404-button secondary"
23+
type="button"
24+
@click="backPage"
25+
>
26+
{{ $t("m.Back") }}
27+
</button>
28+
<button
29+
class="error404-button primary"
30+
type="button"
31+
@click="goHome"
32+
>
33+
{{ $t("m.Go_Home") }}
34+
</button>
35+
</div>
36+
</div>
2637
</div>
27-
</Card>
28-
</div>
38+
</div>
39+
</section>
2940
</div>
3041
</template>
3142

@@ -46,60 +57,156 @@ export default {
4657
</script>
4758

4859
<style lang="less" scoped>
49-
@keyframes error404animation {
50-
0% {
51-
transform: rotateZ(0deg);
52-
}
53-
20% {
54-
transform: rotateZ(-60deg);
55-
}
56-
40% {
57-
transform: rotateZ(-10deg);
60+
.error404 {
61+
width: 100%;
62+
margin: 0;
63+
background: #ffffff;
64+
65+
#main {
66+
flex: auto;
5867
}
59-
60% {
60-
transform: rotateZ(50deg);
68+
}
69+
70+
.error404-panel {
71+
overflow: visible;
72+
background: #ffffff;
73+
border: 0;
74+
border-radius: 0;
75+
}
76+
77+
.error404-content {
78+
width: 100%;
79+
max-width: var(--global-width);
80+
margin: 0 auto;
81+
padding: 0 32px;
82+
}
83+
84+
.error404-body {
85+
display: grid;
86+
grid-template-columns: 420px minmax(320px, 440px);
87+
align-items: center;
88+
justify-content: center;
89+
gap: 72px;
90+
min-height: calc(
91+
100vh - var(--header-height) - 28px - var(--footer-height) -
92+
var(--footer-margin)
93+
);
94+
padding: 0 0 32px;
95+
}
96+
97+
.error404-mark {
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
gap: 12px;
102+
color: #5661f6;
103+
font-size: 148px;
104+
font-weight: 800;
105+
line-height: 1;
106+
}
107+
108+
.error404-compass {
109+
flex: none;
110+
width: 116px;
111+
height: 116px;
112+
color: #5661f6;
113+
fill: none;
114+
stroke: currentColor;
115+
stroke-linecap: round;
116+
stroke-linejoin: round;
117+
stroke-width: 5;
118+
119+
path {
120+
fill: #eef1ff;
61121
}
62-
80% {
63-
transform: rotateZ(-20deg);
122+
}
123+
124+
.error404-copy {
125+
min-width: 0;
126+
max-width: 440px;
127+
128+
h2 {
129+
margin: 0 0 12px;
130+
color: #303747;
131+
font-size: 30px;
132+
font-weight: 800;
133+
line-height: 1.32;
64134
}
65-
100% {
66-
transform: rotateZ(0deg);
135+
136+
p {
137+
margin: 0;
138+
color: #697386;
139+
font-size: 15px;
140+
font-weight: 500;
141+
line-height: 1.8;
142+
overflow-wrap: anywhere;
67143
}
68144
}
69145
70-
.error404 {
71-
&-body-con {
72-
width: 700px;
73-
height: 500px;
74-
margin: 0 auto;
75-
&-title {
76-
text-align: center;
77-
font-size: 240px;
78-
font-weight: 700;
79-
color: #2d8cf0;
80-
height: 260px;
81-
line-height: 260px;
82-
margin-top: 40px;
83-
span {
84-
display: inline-block;
85-
color: #19be6b;
86-
font-size: 230px;
87-
animation: error404animation 3s ease 0s infinite alternate;
88-
}
146+
.error404-actions {
147+
display: flex;
148+
align-items: center;
149+
gap: 10px;
150+
flex-wrap: wrap;
151+
margin-top: 28px;
152+
}
153+
154+
.error404-button {
155+
height: 38px;
156+
padding: 0 18px;
157+
font-size: 14px;
158+
font-weight: 800;
159+
border: 0;
160+
border-radius: 999px;
161+
cursor: pointer;
162+
transition:
163+
color 0.15s ease,
164+
background-color 0.15s ease,
165+
box-shadow 0.15s ease;
166+
167+
&.primary {
168+
color: #ffffff;
169+
background: #5661f6;
170+
box-shadow: 0 8px 20px rgba(86, 97, 246, 0.22);
171+
172+
&:hover {
173+
background: #4652ea;
89174
}
90-
&-message {
91-
display: block;
92-
text-align: center;
93-
font-size: 30px;
94-
font-weight: 500;
95-
letter-spacing: 12px;
96-
color: #dddde2;
175+
}
176+
177+
&.secondary {
178+
color: #5661f6;
179+
background: #eef1ff;
180+
181+
&:hover {
182+
background: #e3e7ff;
97183
}
98184
}
99-
&-btn-con {
100-
text-align: center;
101-
padding: 20px 0;
102-
margin-bottom: 40px;
185+
}
186+
187+
@media (max-width: 760px) {
188+
.error404-content {
189+
padding: 0 24px;
190+
}
191+
192+
.error404-body {
193+
grid-template-columns: 1fr;
194+
gap: 28px;
195+
min-height: 0;
196+
padding: 42px 0 56px;
197+
}
198+
199+
.error404-mark {
200+
font-size: 88px;
201+
}
202+
203+
.error404-compass {
204+
width: 76px;
205+
height: 76px;
206+
}
207+
208+
.error404-copy h2 {
209+
font-size: 24px;
103210
}
104211
}
105212
</style>

0 commit comments

Comments
 (0)