Skip to content

Commit bc0de0c

Browse files
Alexius-HuangAlexius-Huang
committed
Minor fix responsive design
1 parent 770592d commit bc0de0c

File tree

3 files changed

+101
-64
lines changed

3 files changed

+101
-64
lines changed

‎public/css/index.css

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -205,68 +205,6 @@ a { text-decoration: none; }
205205
line-height: 24pt;
206206
color: white
207207
}
208-
.list-modal-wrapper {
209-
opacity: 0;
210-
position: fixed;
211-
width: 100vw;
212-
height: 100vh;
213-
top: 0;
214-
left: 0;
215-
z-index: 3;
216-
background-color: rgba(0, 0, 0, 0.3);
217-
transition: .25s;
218-
pointer-events: none;
219-
}
220-
.list-modal-wrapper.open {
221-
transition: .25s;
222-
opacity: 1;
223-
pointer-events: auto;
224-
}
225-
.list-modal-wrapper > .list-modal {
226-
text-align: center;
227-
position: absolute;
228-
width: 400pt;
229-
height: 175pt;
230-
background-color:#F9DE7F;
231-
color: #666;
232-
top: 0;
233-
bottom: 0;
234-
left: 0;
235-
right: 0;
236-
margin: auto;
237-
}
238-
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
239-
position: absolute;
240-
width: 400pt;
241-
height: 50pt;
242-
bottom: 0;
243-
padding-top: 10pt;
244-
}
245-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
246-
vertical-align: bottom;
247-
width: 75pt;
248-
height: 30pt;
249-
line-height: 30pt;
250-
font-size: 15pt;
251-
border: none;
252-
color: white;
253-
transition: .25s;
254-
margin: 0 5pt;
255-
}
256-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm,
257-
.list-item > span#edit-form > button#confirm {
258-
background-color: #79D1C3;
259-
}
260-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm:hover,
261-
.list-item > span#edit-form > button#confirm:hover {
262-
background-color: #67C0A1;
263-
transition: .25s;
264-
}
265-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel,
266-
.list-item > span#edit-form > button#cancel {
267-
background-color: #ff6a80;
268-
}
269-
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel:hover,
270208
.list-item > span#edit-form > button#cancel:hover {
271209
background-color: #dd4960;
272210
transition: .25s;

‎public/css/list-modal.css

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.list-modal-wrapper {
2+
opacity: 0;
3+
position: fixed;
4+
width: 100vw;
5+
height: 100vh;
6+
top: 0;
7+
left: 0;
8+
z-index: 3;
9+
background-color: rgba(0, 0, 0, 0.3);
10+
transition: .25s;
11+
pointer-events: none;
12+
}
13+
.list-modal-wrapper.open {
14+
transition: .25s;
15+
opacity: 1;
16+
pointer-events: auto;
17+
}
18+
.list-modal-wrapper > .list-modal {
19+
text-align: center;
20+
position: absolute;
21+
height: 175pt;
22+
background-color:#F9DE7F;
23+
color: #666;
24+
top: 0;
25+
bottom: 0;
26+
left: 0;
27+
right: 0;
28+
margin: auto;
29+
}
30+
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
31+
position: absolute;
32+
height: 50pt;
33+
bottom: 0;
34+
padding-top: 10pt;
35+
}
36+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
37+
vertical-align: bottom;
38+
width: 75pt;
39+
height: 30pt;
40+
line-height: 30pt;
41+
font-size: 15pt;
42+
border: none;
43+
color: white;
44+
transition: .25s;
45+
margin: 0 5pt;
46+
}
47+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm,
48+
.list-item > span#edit-form > button#confirm {
49+
background-color: #79D1C3;
50+
}
51+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-confirm:hover,
52+
.list-item > span#edit-form > button#confirm:hover {
53+
background-color: #67C0A1;
54+
transition: .25s;
55+
}
56+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel,
57+
.list-item > span#edit-form > button#cancel {
58+
background-color: #ff6a80;
59+
}
60+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button#modal-cancel:hover {
61+
background-color: #dd4960;
62+
transition: .25s;
63+
}
64+
65+
@media screen and (max-width: 767px) {
66+
.list-modal-wrapper > .list-modal {
67+
width: 100%;
68+
}
69+
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
70+
width: 100%;
71+
}
72+
.list-modal-wrapper > .list-modal > h2 {
73+
font-size: 16pt;
74+
}
75+
.list-modal-wrapper > .list-modal > h3 {
76+
font-size: 14pt;
77+
}
78+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
79+
font-size: 12pt;
80+
}
81+
}
82+
@media screen and (min-width: 768px) {
83+
.list-modal-wrapper > .list-modal {
84+
width: 450pt;
85+
}
86+
.list-modal-wrapper > .list-modal > .list-modal-btn-group {
87+
width: 450pt;
88+
}
89+
.list-modal-wrapper > .list-modal > h2 {
90+
font-size: 20pt;
91+
}
92+
.list-modal-wrapper > .list-modal > h3 {
93+
font-size: 18pt;
94+
}
95+
.list-modal-wrapper > .list-modal > .list-modal-btn-group > button {
96+
font-size: 16pt;
97+
}
98+
}

‎public/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1">
1010
<title>Goby Sample Web App</title>
1111
<link rel="stylesheet" href="/css/index.css" />
12-
<link rel="stylesheet" href="/css/caption.css">
12+
<link rel="stylesheet" href="/css/caption.css" />
1313
<link rel="stylesheet" href="/css/mc-embed-signup.css" />
1414
<link rel="stylesheet" href="/css/navbar.css" />
15-
<link rel="stylesheet" href="/css/code-tab.css">
15+
<link rel="stylesheet" href="/css/code-tab.css" />
1616
<link rel="stylesheet" href="/css/code-style/tomorrow-night-blue.css" id="code-style" />
17+
<link rel="stylesheet" href="/css/list-modal.css" />
1718
<script src="/js/index.js"></script>
1819
</head>
1920
<body>

0 commit comments

Comments
 (0)