Skip to content

Commit 2a9507a

Browse files
fehmerMiodec
fehmer
and
Miodec
authored
refactor: new discordAvatar handling (@fehmer) (monkeytypegame#6740)
extract discordAvatar loading and caching into a new module. Preparation for the friends list --------- Co-authored-by: Miodec <[email protected]>
1 parent c6d9033 commit 2a9507a

File tree

16 files changed

+202
-332
lines changed

16 files changed

+202
-332
lines changed

‎frontend/src/html/header.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,10 @@ <h1 class="text">
133133
onclick="this.blur();"
134134
router-link
135135
>
136-
<div class="loading hidden">
136+
<div class="spinner">
137137
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
138138
</div>
139-
<div class="user">
140-
<i class="fas fa-fw fa-user"></i>
141-
</div>
142-
<div class="avatar hidden"></div>
139+
<div class="avatar"></div>
143140
<div class="text"></div>
144141
<div class="levelAndBar">
145142
<div class="level" data-balloon-pos="up">1</div>

‎frontend/src/html/pages/account.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,7 @@
1414
<div class="profile">
1515
<div class="details both">
1616
<div class="avatarAndName">
17-
<div class="avatars">
18-
<div class="placeholderAvatar">
19-
<i class="fas fa-user-circle"></i>
20-
</div>
21-
<div class="avatar"></div>
22-
</div>
17+
<div class="avatar"></div>
2318
<div>
2419
<div class="user">
2520
<div class="name">-</div>

‎frontend/src/html/pages/leaderboards.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,12 @@
8484
<td>1</td>
8585
<td>
8686
<div class="avatarNameBadge">
87-
<div class="lbav">
88-
<div class="avatarPlaceholder">
87+
<div class="avatar">
88+
<div class="userIcon">
8989
<i class="fas fa-user-circle"></i>
9090
</div>
9191
</div>
92+
9293
<div class="name">Username</div>
9394
</div>
9495
</td>
@@ -102,8 +103,8 @@
102103
<td>2</td>
103104
<td>
104105
<div class="avatarNameBadge">
105-
<div class="lbav">
106-
<div class="avatarPlaceholder">
106+
<div class="avatar">
107+
<div class="userIcon">
107108
<i class="fas fa-user-circle"></i>
108109
</div>
109110
</div>
@@ -120,11 +121,12 @@
120121
<td>2</td>
121122
<td>
122123
<div class="avatarNameBadge">
123-
<div class="lbav">
124-
<div class="avatarPlaceholder">
124+
<div class="avatar">
125+
<div class="userIcon">
125126
<i class="fas fa-user-circle"></i>
126127
</div>
127128
</div>
129+
128130
<div class="name">Username</div>
129131
</div>
130132
</td>

‎frontend/src/html/pages/profile.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,10 @@
2020
<div class="profile">
2121
<div class="details none">
2222
<div class="avatarAndName">
23-
<div class="avatars">
24-
<div class="placeholderAvatar">
23+
<div class="avatar">
24+
<div class="userIcon">
2525
<i class="fas fa-user-circle"></i>
2626
</div>
27-
<div class="avatar"></div>
2827
</div>
2928
<div>
3029
<div class="user">

‎frontend/src/styles/core.scss‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -370,13 +370,36 @@ key {
370370
}
371371

372372
.avatar {
373+
--size: 1em;
374+
373375
transition: opacity 0.125s, filter 0.125s, webkit-filter 0.125s;
374-
width: 1.25rem;
375-
height: 1.25rem;
376-
border-radius: 100%;
377-
background-position: center center;
378-
background-size: contain;
379-
background-repeat: no-repeat;
376+
width: var(--size);
377+
height: var(--size);
378+
font-size: var(--size);
379+
line-height: var(--size);
380+
display: grid;
381+
place-content: center center;
382+
383+
div {
384+
width: 1em;
385+
height: 1em;
386+
line-height: 1em;
387+
font-size: var(--size);
388+
border-radius: 100%;
389+
background-position: center center;
390+
background-size: contain;
391+
background-repeat: no-repeat;
392+
grid-column: 1/2;
393+
grid-row: 1/2;
394+
place-self: center center;
395+
display: grid;
396+
place-content: center center;
397+
}
398+
399+
.loading {
400+
font-size: 0.8em;
401+
line-height: 0.8em;
402+
}
380403
}
381404

382405
.badge {

‎frontend/src/styles/leaderboards.scss‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -189,25 +189,19 @@
189189

190190
.avatarNameBadge {
191191
display: grid;
192-
grid-template-columns: 1.25em max-content auto;
192+
grid-template-columns: max-content max-content auto;
193193
gap: 0.5em;
194194
place-items: center left;
195-
.avatarPlaceholder {
195+
.avatar .userIcon {
196196
color: var(--sub-color);
197-
border-radius: 100%;
198-
i {
199-
font-size: 1.29em;
200-
}
201197
}
202198
.entryName {
203199
text-decoration: none;
204200
color: var(--text-color);
205201
cursor: pointer;
206202
}
207-
.avatarPlaceholder,
208203
.avatar {
209-
width: 1.25em;
210-
height: 1.25em;
204+
--size: 1.125em;
211205
grid-row: 1/2;
212206
grid-column: 1/2;
213207
}
@@ -255,13 +249,13 @@
255249
}
256250
}
257251
}
258-
}
259-
.loading {
260-
display: grid;
261-
place-items: center;
262-
font-size: 3em;
263-
color: var(--sub-color);
264-
padding: 1em;
252+
& > .loading {
253+
display: grid;
254+
place-items: center;
255+
font-size: 3em;
256+
color: var(--sub-color);
257+
padding: 1em;
258+
}
265259
}
266260
.error {
267261
display: grid;

‎frontend/src/styles/nav.scss‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ nav {
1616
}
1717

1818
.textButton {
19+
position: relative;
1920
.text {
2021
font-size: 0.75em;
2122
align-self: center;
@@ -25,14 +26,16 @@ nav {
2526
}
2627

2728
.icon,
28-
.loading,
29-
.user {
29+
.spinner {
3030
width: 1.25em;
3131
height: 1.25em;
32-
// background: red;
3332
display: grid;
3433
place-content: center center;
3534
}
35+
.spinner {
36+
opacity: 0;
37+
transition: opacity 0.125s;
38+
}
3639
}
3740

3841
.accountButtonAndMenu {
@@ -43,20 +46,18 @@ nav {
4346
gap: 0.33em;
4447
display: grid;
4548
grid-auto-flow: column;
46-
.loading,
47-
.user,
49+
.spinner,
4850
.avatar {
4951
grid-column: 1/2;
5052
grid-row: 1/2;
53+
place-self: center center;
54+
}
55+
56+
.discordImage {
5157
width: 1.25em;
5258
height: 1.25em;
5359
}
5460

55-
// .loading,
56-
// .user {
57-
// // margin-top: 0.1rem;
58-
// }
59-
6061
.levelAndBar {
6162
transition: 0.125s;
6263
}

‎frontend/src/styles/profile.scss‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -345,26 +345,12 @@
345345
gap: 1rem;
346346
align-items: center;
347347
align-self: center;
348-
.avatars {
349-
display: grid;
350-
font-size: 5rem;
351-
line-height: 5rem;
352-
height: 5rem;
353-
.placeholderAvatar {
354-
// font-size: 5rem;
355-
// line-height: 6rem;
356-
margin-left: 0.1rem;
348+
.avatar {
349+
--size: 5rem;
350+
.userIcon,
351+
.loading {
357352
color: var(--sub-color);
358353
}
359-
.avatar {
360-
height: auto;
361-
aspect-ratio: 1/1;
362-
width: 100%;
363-
}
364-
div {
365-
grid-row: 1/2;
366-
grid-column: 1/2;
367-
}
368354
}
369355
.user {
370356
display: flex;

0 commit comments

Comments
 (0)