a fork of iceshrimp.net but a tweaked frontend to my personal liking. waow
fediverse
social-media
social
iceshrimp
fedi
[backend/razor] Update banner appearance in user public preview
+29
-5
+4
-2
Iceshrimp.Backend/Pages/UserPreview.razor
+4
-2
Iceshrimp.Backend/Pages/UserPreview.razor
···
18
18
{
19
19
@if (_user.BannerUrl != null)
20
20
{
21
-
<img class="banner" src="@_user.BannerUrl" draggable="false"/>
21
+
<div class="banner">
22
+
<img class="banner" src="@_user.BannerUrl" alt="@_user.Username's banner" draggable="false"/>
23
+
</div>
22
24
}
23
25
<div class="user">
24
26
<div class="user-details @(_user.BannerUrl != null ? "above-banner" : "")">
25
27
<UserComponent User="_user" Large/>
26
28
</div>
27
-
<div class="data badge-feed">
29
+
<div class="badge-feed">
28
30
@if (_badges.Count != 0)
29
31
{
30
32
<div class="badges">
+25
-3
Iceshrimp.Backend/Pages/UserPreview.razor.css
+25
-3
Iceshrimp.Backend/Pages/UserPreview.razor.css
···
7
7
}
8
8
9
9
.banner {
10
-
margin-top: 1em;
10
+
position: relative;
11
11
width: 100%;
12
+
height: auto;
13
+
object-fit: cover;
12
14
aspect-ratio: 21/9;
13
-
object-fit: cover;
15
+
margin: 1rem auto -5.5rem auto;
14
16
border-top-left-radius: 1rem;
15
17
border-top-right-radius: 1rem;
16
18
}
17
19
20
+
.banner::after {
21
+
content: "";
22
+
display: block;
23
+
position: absolute;
24
+
top: 0;
25
+
left: 0;
26
+
width: 100%;
27
+
height: 100%;
28
+
margin: 1rem auto 0 auto;
29
+
background: linear-gradient(transparent 60%, color-mix(in srgb, var(--dark-color) 65%, transparent));
30
+
border-top-left-radius: 1rem;
31
+
border-top-right-radius: 1rem;
32
+
z-index: 1;
33
+
}
34
+
18
35
.banner + .user {
19
-
margin-top: -7.5rem;
20
36
border-top-left-radius: 0;
21
37
border-top-right-radius: 0;
38
+
}
39
+
40
+
.user-details.above-banner {
41
+
position: relative;
42
+
z-index: +2;
22
43
}
23
44
24
45
/* Add shadow to text if banner is visible */
···
51
72
gap: 0.5rem;
52
73
align-items: start;
53
74
justify-content: space-between;
75
+
padding-top: 0.5rem;
54
76
}
55
77
56
78
.badges, .feeds {