Skip to content

Commit abdb129

Browse files
TapawingoTapawingo
committed
Make UI responsive
1 parent 5ad2fa8 commit abdb129

2 files changed

Lines changed: 227 additions & 29 deletions

File tree

‎index.html‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="html">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>Tac Net discord bot</title>
67
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Special+Elite&display=swap">
78
<link rel="stylesheet" href="styles.css">
@@ -22,10 +23,14 @@
2223
</iframe>
2324
</div>
2425
<div class="content">
25-
<span class="page-title">
26-
<img src="favicon.png" alt="Tacnet icon">
26+
<header class="page-title">
27+
<img src="favicon.png" alt="Tac Net icon">
2728
<h1>Tac Net Discord Bot</h1>
28-
</span>
29+
<button id="invites-open" type="button" class="invites-toggle" aria-controls="invites-panel" aria-expanded="false">
30+
<iconify-icon icon="line-md:plus-circle"></iconify-icon>
31+
Bot invites
32+
</button>
33+
</header>
2934
<div class="content-body">
3035
<div>
3136
<h2><iconify-icon icon="line-md:question-circle"></iconify-icon>What is it</h2>
@@ -76,8 +81,13 @@ <h2><iconify-icon inline icon="line-md:document-code"></iconify-icon>Commands</h
7681
</div>
7782
</div>
7883
</div>
79-
<div class="invites">
80-
<h1><iconify-icon inline icon="line-md:discord"></iconify-icon>Bot invites</h1>
84+
<aside class="invites" id="invites-panel" aria-label="Bot invites">
85+
<div class="invites-heading">
86+
<h1><iconify-icon inline icon="line-md:discord"></iconify-icon>Bot invites</h1>
87+
<button id="invites-close" type="button" class="invites-close" aria-label="Close bot invites">
88+
<iconify-icon icon="line-md:close"></iconify-icon>
89+
</button>
90+
</div>
8191

8292
<a class="invite-card" target="_blank" href="https://discord.com/oauth2/authorize?client_id=1533606850900000869&permissions=3146752&integration_type=0&scope=bot+applications.commands">
8393
<img src="radio_net_pfp.png" alt="Radio Net">
@@ -127,14 +137,22 @@ <h3>Relay Echo <span class="bot-hint optional">OPTIONAL</span></h3>
127137
</div>
128138
<iconify-icon icon="line-md:external-link"></iconify-icon>
129139
</a>
130-
</div>
140+
</aside>
131141
</body>
132142

133143
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
134144
<script>
135145
const modal = document.querySelector('.video-modal');
136146
const openModalButton = document.getElementById('modal-open');
137147
const closeModalButton = document.getElementById('modal-close');
148+
const invitesPanel = document.getElementById('invites-panel');
149+
const openInvitesButton = document.getElementById('invites-open');
150+
const closeInvitesButton = document.getElementById('invites-close');
151+
152+
const setInvitesOpen = (isOpen) => {
153+
invitesPanel.classList.toggle('active', isOpen);
154+
openInvitesButton.setAttribute('aria-expanded', String(isOpen));
155+
};
138156

139157
openModalButton.addEventListener('click', () => {
140158
modal.classList.add('active');
@@ -144,9 +162,13 @@ <h3>Relay Echo <span class="bot-hint optional">OPTIONAL</span></h3>
144162
modal.classList.remove('active');
145163
});
146164

147-
window.addEventListener('click', (event) => {
148-
if (event.target === modal) {
165+
openInvitesButton.addEventListener('click', () => setInvitesOpen(true));
166+
closeInvitesButton.addEventListener('click', () => setInvitesOpen(false));
167+
168+
window.addEventListener('keydown', (event) => {
169+
if (event.key === 'Escape') {
149170
modal.classList.remove('active');
171+
setInvitesOpen(false);
150172
}
151173
});
152174
</script>

‎styles.css‎

Lines changed: 197 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
html, body {
22
margin: 0;
33
padding: 0;
4-
height: 100%;
4+
min-height: 100%;
55
}
66

77
body {
88
display: flex;
9-
flex-direction: row;
109
background-color: #1a1510;
1110
color: #7a6b5a;
1211
font-family: 'IM Fell English', sans-serif, serif;
13-
overflow: hidden;
12+
min-height: 100vh;
13+
overflow-x: hidden;
1414
}
1515

1616
h1, h2, h3 {
@@ -23,7 +23,6 @@ h1, h2, h3 {
2323
flex-direction: row;
2424
align-items: center;
2525
gap: 10px;
26-
margin-bottom: 10px;
2726
}
2827

2928
.page-title img {
@@ -76,22 +75,24 @@ ul li {
7675

7776
.video-modal {
7877
opacity: 0;
79-
transform: scale(0) translate(-50%, -50%);
80-
position: absolute;
81-
width: 70%;
82-
height: 90%;
78+
pointer-events: none;
79+
transform: translate(-50%, -50%) scale(.96);
80+
position: fixed;
81+
width: min(70%, 1000px);
82+
height: min(90vh, 650px);
8383
top: 50%;
8484
left: 50%;
8585
z-index: 10;
8686
background-color: #2d2416;
8787
border: 1px solid #5c4a3d;
8888
border-radius: 5px;
89-
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
89+
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
9090
}
9191

9292
.video-modal.active {
9393
opacity: 1;
94-
transform: scale(1) translate(-50%, -50%);
94+
pointer-events: auto;
95+
transform: translate(-50%, -50%) scale(1);
9596
}
9697

9798
.video-modal .topbar {
@@ -113,7 +114,7 @@ ul li {
113114
color: #d4c4a8;
114115
font-size: 20px;
115116
cursor: pointer;
116-
transition: all 0.1s ease-in-out;
117+
transition: all .1s ease-in-out;
117118
}
118119

119120
.video-modal .topbar button:hover {
@@ -135,18 +136,14 @@ ul li {
135136

136137
.content {
137138
flex: 1;
138-
padding: 15px;
139-
height: 100%;
140-
overflow: hidden;
139+
min-width: 0;
141140
box-sizing: border-box;
142141
}
143142

144143
.content-body {
145-
flex: 1;
144+
padding: 15px;
146145
display: flex;
147146
flex-direction: column;
148-
height: 100%;
149-
overflow: hidden;
150147
gap: 15px;
151148
}
152149

@@ -183,11 +180,11 @@ iconify-icon {
183180
}
184181

185182
.invites {
183+
flex: 0 0 420px;
186184
width: 420px;
187185
padding: 20px;
188186
background-color: #2d2416;
189187
border-left: 1px solid #5c4a3d;
190-
height: 100%;
191188
box-sizing: border-box;
192189
}
193190

@@ -208,27 +205,28 @@ iconify-icon {
208205
color: #7a6b5a;
209206
border: 1px solid #5c4a3d;
210207
border-radius: 3px;
211-
box-shadow: 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 4px 6px #0006;
208+
box-shadow: 0 4px 6px #0006;
212209
}
213210

214211
.invite-card > img {
215212
width: 42px;
216213
height: auto;
217214
border-radius: 50%;
218-
border: 1px solid #5c4a3d
215+
border: 1px solid #5c4a3d;
219216
}
220217

221218
.invite-card > div {
222219
display: flex;
223220
flex-direction: column;
221+
min-width: 0;
224222
}
225223

226224
.invite-card h3 {
227225
margin: 0;
228226
font-size: 16px;
229227
}
230228

231-
.invite-card .bot-hint {
229+
.invite-card .bot-hint {
232230
font-size: 10px;
233231
font-family: sans-serif, serif;
234232
padding: 2px;
@@ -247,4 +245,182 @@ iconify-icon {
247245

248246
.invite-card:hover {
249247
transform: scale(1.02);
248+
}
249+
250+
@media (max-width: 900px) {
251+
body {
252+
flex-direction: column;
253+
}
254+
255+
.content {
256+
width: 100%;
257+
}
258+
259+
.invites {
260+
flex-basis: auto;
261+
width: 100%;
262+
border-top: 1px solid #5c4a3d;
263+
border-left: 0;
264+
}
265+
266+
.invites h1 {
267+
margin-top: 0;
268+
}
269+
270+
.video-modal {
271+
width: min(90%, 700px);
272+
height: min(75vh, 500px);
273+
}
274+
}
275+
276+
@media (max-width: 540px) {
277+
.content,
278+
.invites {
279+
padding: 12px;
280+
}
281+
282+
.page-title {
283+
align-items: flex-start;
284+
gap: 8px;
285+
}
286+
287+
.page-title img {
288+
width: 32px;
289+
margin-top: 3px;
290+
}
291+
292+
.page-title h1,
293+
.invites h1 {
294+
font-size: 1.5rem;
295+
}
296+
297+
.content-body {
298+
gap: 12px;
299+
}
300+
301+
.content-body div h2 {
302+
padding: 9px;
303+
font-size: 1rem;
304+
flex-wrap: wrap;
305+
}
306+
307+
.demo-video-button {
308+
margin-left: 0;
309+
}
310+
311+
.content div p,
312+
.content li,
313+
.invite-card > div > span {
314+
font-size: .95rem;
315+
line-height: 1.35;
316+
}
317+
318+
.invite-card {
319+
padding: 9px;
320+
gap: 8px;
321+
}
322+
323+
.invite-card > img {
324+
width: 38px;
325+
flex: 0 0 auto;
326+
}
327+
328+
.invite-card h3 {
329+
font-size: .95rem;
330+
}
331+
332+
.invite-card > iconify-icon {
333+
flex: 0 0 auto;
334+
}
335+
336+
.video-modal {
337+
width: calc(100% - 24px);
338+
height: auto;
339+
max-height: calc(100vh - 24px);
340+
aspect-ratio: 16 / 10;
341+
}
342+
}
343+
/* Fixed header and responsive invite drawer */
344+
body {
345+
height: 100dvh;
346+
overflow: hidden;
347+
}
348+
349+
.content {
350+
display: flex;
351+
flex-direction: column;
352+
min-height: 0;
353+
}
354+
355+
.page-title {
356+
flex: 0 0 auto;
357+
}
358+
359+
.content-body {
360+
flex: 1;
361+
min-height: 0;
362+
overflow-y: auto;
363+
padding-right: 4px;
364+
}
365+
366+
.invites {
367+
height: 100dvh;
368+
overflow-y: auto;
369+
}
370+
371+
.invites-toggle,
372+
.invites-close {
373+
display: none;
374+
border: 1px solid #5c4a3d;
375+
border-radius: 3px;
376+
background: transparent;
377+
color: #d4c4a8;
378+
font: inherit;
379+
cursor: pointer;
380+
}
381+
382+
.invites-heading {
383+
display: flex;
384+
align-items: center;
385+
justify-content: space-between;
386+
gap: 8px;
387+
}
388+
389+
@media (max-width: 900px) {
390+
body { flex-direction: row; }
391+
392+
.content {
393+
width: 100%;
394+
height: 100dvh;
395+
}
396+
397+
.invites-toggle {
398+
display: inline-flex;
399+
align-items: center;
400+
gap: 5px;
401+
margin-left: auto;
402+
padding: 6px 8px;
403+
}
404+
405+
.invites {
406+
position: fixed;
407+
z-index: 20;
408+
top: 0;
409+
right: 0;
410+
width: min(100%, 420px);
411+
height: 100dvh;
412+
padding: 20px;
413+
border-top: 0;
414+
border-left: 1px solid #5c4a3d;
415+
box-shadow: -6px 0 16px #0009;
416+
transform: translateX(100%);
417+
transition: transform .25s ease-in-out;
418+
}
419+
420+
.invites.active { transform: translateX(0); }
421+
.invites-close { display: inline-flex; padding: 5px; font-size: 1.2rem; }
422+
}
423+
424+
@media (max-width: 540px) {
425+
.invites-toggle { font-size: .9rem; }
250426
}

0 commit comments

Comments
 (0)