Skip to content

Commit dd0bb5b

Browse files
Pazl27Pazl27
committed
small changes
- made podium smaller - little design improvements - display images and fallback initials + color - popup for image and link to user page
1 parent da6c1e6 commit dd0bb5b

4 files changed

Lines changed: 649 additions & 269 deletions

File tree

‎website/src/components/highscore/List.vue‎

Lines changed: 151 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
<script setup lang="ts">
2-
import type { RankedUser } from '@/types' // Passe den Import ggf. an
2+
import { getInitials, getColor } from '@/utils/userUtils'
3+
4+
interface RankedUser {
5+
id: string
6+
username: string
7+
rocket_points: number
8+
imageData?: string
9+
isFriend?: boolean
10+
}
311
412
defineProps<{
513
users: RankedUser[]
@@ -9,42 +17,48 @@ defineProps<{
917
}>()
1018
</script>
1119
<template>
12-
<div class="rest">
20+
<div class="list-container">
1321
<div
14-
class="rest-user"
15-
v-for="(user, idx) in users"
16-
:key="user.id || idx"
17-
@click="openProfile(user)"
22+
class="list-user-card"
23+
v-for="(user, idx) in users"
24+
:key="user.id || idx"
25+
@click="openProfile(user)"
1826
>
19-
<div class="rest-img">
20-
<img
21-
v-if="user.imageUrl"
22-
:src="user.imageUrl"
23-
alt="User Icon"
24-
class="user-avatar"
25-
/>
27+
<div class="list-avatar-col">
2628
<img
27-
v-else
28-
src="/src/assets/icons/user.svg"
29-
alt="Default User Icon"
30-
class="user-avatar"
31-
style="color: lightgray"
29+
v-if="user.imageData"
30+
:src="`data:image/*;base64,${user.imageData}`"
31+
alt="User Icon"
32+
class="list-avatar"
3233
/>
34+
<div
35+
v-else
36+
class="list-avatar list-avatar-initials"
37+
:style="{ backgroundColor: getColor(user.username) }"
38+
>
39+
{{ getInitials(user.username) }}
40+
</div>
3341
</div>
34-
<div class="rest-username">
35-
{{ user.username }}
36-
</div>
37-
<div class="rest-rocketpoints">
38-
{{ user.rocket_points }}
39-
<img
42+
<div class="list-info-col">
43+
<div class="list-username">{{ user.username }}</div>
44+
<div class="list-rocketpoints">
45+
<img
4046
src="/src/assets/icons/rocket.svg"
4147
alt="Rocket"
42-
style="width:1.3em;height:1.3em;vertical-align:middle;margin-right:0.35em;"
43-
/>
48+
class="rocket-icon"
49+
/>
50+
{{ user.rocket_points }}
51+
</div>
4452
</div>
45-
<div class="rest-action">
53+
<div class="list-action-col">
4654
<template v-if="user.isFriend">
47-
<img src="/src/assets/icons/user.svg" alt="Friend Icon" class="friend-icon" />
55+
<span class="friend-badge">
56+
<svg class="friend-badge-icon" viewBox="0 0 20 20" fill="currentColor">
57+
<circle cx="10" cy="10" r="10" fill="#34c759"/>
58+
<path d="M7.5 10.5l2 2 3-3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
59+
</svg>
60+
<span class="friend-badge-label">Friend</span>
61+
</span>
4862
</template>
4963
<template v-else-if="user.username === currentUsername">
5064
<span></span>
@@ -58,82 +72,142 @@ defineProps<{
5872
</template>
5973

6074
<style scoped>
61-
.rest {
75+
.list-container {
6276
width: 100%;
63-
max-width: 34%;
77+
max-width: 420px;
6478
margin-top: 2rem;
79+
display: flex;
80+
flex-direction: column;
81+
gap: 1.1rem;
6582
}
66-
.rest-user {
83+
84+
.list-user-card {
6785
display: flex;
6886
align-items: center;
69-
width: 100%;
70-
background: linear-gradient(#f6fcff 0%, #eafeea 60%, #e6f7fa 100%);
71-
border-radius: 24px;
72-
border: 2px solid #e3f0fb;
87+
background: #f8fafc;
88+
border-radius: 18px;
89+
border: 1.5px solid #e3eaf3;
7390
box-shadow: 0 1px 6px rgba(30,60,114,0.06);
74-
margin-bottom: 1.5rem;
75-
height: 72px;
76-
overflow: hidden;
77-
gap: 12%;
78-
}
79-
.rest-user:hover {
80-
opacity: 0.8;
81-
}
82-
.rest-img,
83-
.rest-username,
84-
.rest-rocketpoints,
85-
.rest-action {
91+
padding: 0.7em 1.2em;
92+
transition: box-shadow 0.18s, transform 0.13s;
93+
cursor: pointer;
94+
min-height: 60px;
95+
gap: 1.2rem;
96+
}
97+
.list-user-card:hover {
98+
box-shadow: 0 4px 16px rgba(30,60,114,0.13);
99+
transform: translateY(-2px) scale(1.02);
100+
background: #f0f6fa;
101+
}
102+
103+
.list-avatar-col {
104+
flex: 0 0 44px;
86105
display: flex;
87106
align-items: center;
88-
height: 100%;
89-
padding: 0.7em 1.2em;
107+
justify-content: center;
90108
}
91-
.user-avatar {
92-
width: 48px;
93-
height: 48px;
109+
.list-avatar {
110+
width: 44px;
111+
height: 44px;
94112
border-radius: 50%;
95113
object-fit: cover;
96-
margin-right: 1em;
97114
background: #f5f5f5;
115+
border: 1.5px solid #e3eaf3;
116+
display: flex;
117+
align-items: center;
118+
justify-content: center;
119+
font-weight: 700;
120+
font-size: 1.15em;
121+
color: #fff;
122+
text-transform: uppercase;
123+
letter-spacing: 0.02em;
124+
user-select: none;
98125
}
99-
.rest-username,
100-
.rest-rocketpoints,
101-
.rest-action {
102-
min-width: 100px;
126+
.list-avatar-initials {
127+
background: #bfc1c2;
128+
border: 1.5px solid #e3eaf3;
103129
}
104-
.rest-rocketpoints {
105-
margin-left: 4rem;
106-
font-weight: bold;
130+
131+
.list-info-col {
132+
flex: 1 1 auto;
133+
display: flex;
134+
flex-direction: column;
135+
justify-content: center;
136+
gap: 0.2em;
107137
}
108-
.rest-username {
109-
margin-left: 2rem;
110-
font-weight: bold;
138+
.list-username {
139+
font-size: 1.08em;
140+
font-weight: 600;
141+
color: #223;
142+
margin-bottom: 0.1em;
143+
}
144+
.list-rocketpoints {
145+
display: flex;
146+
align-items: center;
147+
font-size: 0.98em;
148+
color: #2a5298;
149+
font-weight: 500;
150+
gap: 0.3em;
111151
}
112-
.rest-action {
113-
width: 56px;
114-
text-align: center;
152+
.rocket-icon {
153+
width: 1.1em;
154+
height: 1.1em;
155+
margin-right: 0.15em;
156+
vertical-align: middle;
157+
}
158+
159+
.list-action-col {
160+
flex: 0 0 48px;
161+
display: flex;
162+
align-items: center;
115163
justify-content: center;
116-
padding-left: 0;
117164
}
165+
118166
.add-btn {
119167
background: linear-gradient(90deg, #2196f3 0%, #00bcd4 100%);
120168
color: #fff;
121169
border: none;
122-
border-radius: 24px;
123-
padding: 0.5em 1.5em;
124-
font-weight: bold;
125-
font-size: 1em;
170+
border-radius: 16px;
171+
padding: 0.35em 1.1em;
172+
font-weight: 600;
173+
font-size: 0.98em;
126174
cursor: pointer;
127-
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.18);
175+
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.10);
128176
transition: background 0.2s, transform 0.1s;
129177
}
130178
.add-btn:hover {
131179
background: linear-gradient(90deg, #1976d2 0%, #0097a7 100%);
132-
transform: translateY(-2px) scale(1.04);
180+
transform: translateY(-1px) scale(1.03);
133181
}
134182
.friend-icon {
135-
width: 48px;
136-
height: 48px;
137-
filter: invert(41%) sepia(98%) saturate(1200%) hue-rotate(74deg) brightness(110%) contrast(120%);
183+
display: none;
184+
}
185+
186+
.friend-badge {
187+
display: flex;
188+
align-items: center;
189+
gap: 0.3em;
190+
background: #eaffea;
191+
border-radius: 16px;
192+
padding: 0.2em 0.8em 0.2em 0.4em;
193+
font-size: 0.98em;
194+
font-weight: 600;
195+
color: #218838;
196+
border: 1.5px solid #34c759;
197+
box-shadow: 0 1px 4px rgba(52,199,89,0.08);
198+
}
199+
200+
.friend-badge-icon {
201+
width: 20px;
202+
height: 20px;
203+
margin-right: 0.1em;
204+
flex-shrink: 0;
205+
}
206+
207+
.friend-badge-label {
208+
font-size: 1em;
209+
font-weight: 600;
210+
color: #218838;
211+
letter-spacing: 0.01em;
138212
}
139-
</style>
213+
</style>

0 commit comments

Comments
 (0)