blob: 9905cd4b2e4f92e6eb6e5c627e647cc02180a265 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<script lang="ts">
import type { Event } from '$lib/Database/events';
import root from '$lib/Utility/root';
import locale from '$stores/locale';
export let event: Event;
export let avatar = false;
</script>
<a href={event.anilist_url} target="_blank">
<div
class="card"
id="user-grid"
style={`background-image: ${event.banner ? `url(${event.banner})` : 'none'}; padding: 0;`}
>
{#if event}
<img src={event.banner} alt="" id="cover-image" />
{/if}
<div class="card" id="user-grid-content">
{#if avatar}
<div id="user-grid-avatar">
<a href={root(`/events/group/${event.group.anilist_username}`)}>
<img src={event.group.avatar} alt="" width="100vw" id="avatar" />
</a>
</div>
{/if}
<div id="user-grid-content-text">
<p>
<a href={event.anilist_url} target="_blank" class="title-text">
{event.title}
</a>
<br />
{$locale().dateFormatter(new Date(event.created_at))}
</p>
<p>{event.description}</p>
</div>
</div>
</div>
</a>
<style>
#user-grid-content {
display: flex;
flex-wrap: wrap;
column-gap: 1.5em;
background-color: rgba(0, 0, 0, 0.468);
color: #d8d8d8;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* .click-item {
margin: 0 0.625rem;
} */
#user-grid-avatar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#avatar {
border-radius: 8px;
}
#user-grid {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#cover-image {
visibility: hidden;
height: 4.5em;
}
.title-text {
font-size: 1.1em;
}
</style>
|