Skip to content

Commit c9626a4

Browse files
DerGooglerDerGoogler
committed
improve downloads page
1 parent f9640e3 commit c9626a4

File tree

3 files changed

+426
-31
lines changed

3 files changed

+426
-31
lines changed

‎docs/components/download/AssetCard.vue‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<script setup>
2+
import { toFormattedFileSize } from "../../helper/toFormattedFileSize";
3+
import { VPLink } from "vitepress/theme";
4+
import { useData } from "vitepress";
5+
6+
const { lang } = useData();
7+
8+
const props = defineProps({
9+
asset: Object,
10+
});
11+
12+
const getLastUpdated = (timestamp) => {
13+
if (!timestamp) {
14+
return "Invalid date";
15+
}
16+
17+
return Intl.DateTimeFormat(lang, {
18+
year: "numeric",
19+
day: "2-digit",
20+
month: "long",
21+
hour12: true,
22+
}).format(new Date(timestamp));
23+
};
24+
</script>
25+
26+
<template>
27+
<VPLink :class="$style.feature" decoration="none" :href="props.asset.browser_download_url" target="_blank">
28+
<article :class="$style.box">
29+
<h2 :class="$style.title" :id="props.asset.id">{{ props.asset.name }}</h2>
30+
<ul :class="$style.moduleMetaContainer">
31+
<li :class="$style.moduleMeta">
32+
<svg
33+
:class="$style.moduleMetaIcon"
34+
xmlns="http://www.w3.org/2000/svg"
35+
width="24"
36+
height="24"
37+
viewBox="0 0 24 24"
38+
fill="none"
39+
stroke="currentColor"
40+
stroke-width="2"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
class="icon icon-tabler icons-tabler-outline icon-tabler-file"
44+
>
45+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
46+
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
47+
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
48+
</svg>
49+
{{ props.asset.content_type }}
50+
</li>
51+
<li :class="$style.moduleMeta">
52+
<svg
53+
:class="$style.moduleMetaIcon"
54+
xmlns="http://www.w3.org/2000/svg"
55+
width="24"
56+
height="24"
57+
viewBox="0 0 24 24"
58+
fill="none"
59+
stroke="currentColor"
60+
stroke-width="2"
61+
stroke-linecap="round"
62+
stroke-linejoin="round"
63+
class="icon icon-tabler icons-tabler-outline icon-tabler-download"
64+
>
65+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
66+
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
67+
<path d="M7 11l5 5l5 -5" />
68+
<path d="M12 4l0 12" />
69+
</svg>
70+
{{ props.asset.download_count }}
71+
</li>
72+
<li :class="$style.moduleMeta">
73+
<svg :class="$style.moduleMetaIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
74+
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
75+
<path d="M6 20.735A2 2 0 0 1 5 19V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-1" />
76+
<path
77+
d="M11 17a2 2 0 0 1 2 2v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2a2 2 0 0 1 2-2m0-12h-1m3 2h-1m-1 2h-1m3 2h-1m-1 2h-1m3 2h-1"
78+
/>
79+
</g>
80+
</svg>
81+
{{ toFormattedFileSize(props.asset.size) }}
82+
</li>
83+
<li :class="$style.moduleMeta">
84+
<svg :class="$style.moduleMetaIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
85+
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
86+
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0" />
87+
<path d="M12 7v5l3 3" />
88+
</g>
89+
</svg>
90+
{{ getLastUpdated(props.asset.created_at) }}
91+
</li>
92+
</ul>
93+
</article>
94+
</VPLink>
95+
</template>
96+
97+
<style module>
98+
.item {
99+
padding: 8px;
100+
width: 100%;
101+
}
102+
103+
.feature {
104+
user-select: none;
105+
cursor: pointer;
106+
text-decoration: none !important;
107+
display: block;
108+
border: 1px solid var(--vp-c-bg-soft);
109+
border-radius: 12px;
110+
height: 100%;
111+
background-color: var(--vp-c-bg-soft);
112+
transition: border-color 0.25s, background-color 0.25s;
113+
}
114+
115+
.feature:hover {
116+
border-color: var(--vp-badge-tip-text);
117+
}
118+
119+
.box {
120+
display: flex;
121+
flex-direction: column;
122+
padding: 24px;
123+
height: 100%;
124+
}
125+
126+
.title {
127+
margin: unset !important;
128+
padding-top: unset !important;
129+
border-top: unset !important;
130+
color: initial !important;
131+
line-height: 24px !important;
132+
font-size: 16px !important;
133+
font-weight: 600 !important;
134+
}
135+
136+
.author {
137+
flex-grow: 1;
138+
line-height: 24px;
139+
font-size: 13px;
140+
font-weight: 500;
141+
color: var(--vp-badge-tip-text);
142+
}
143+
144+
.details {
145+
flex-grow: 1;
146+
padding-top: 8px;
147+
line-height: 24px;
148+
font-size: 14px;
149+
font-weight: 500;
150+
color: var(--vp-c-text-2);
151+
}
152+
153+
.moduleCover {
154+
border-radius: 12px 12px 0px 0px;
155+
width: 100%;
156+
height: 100%;
157+
aspect-ratio: 2.048;
158+
object-fit: cover;
159+
}
160+
161+
.moduleMeta {
162+
align-items: center;
163+
align-self: end;
164+
display: flex;
165+
line-height: 20px;
166+
word-break: break-word;
167+
}
168+
169+
.moduleMetaIcon {
170+
flex-shrink: 0;
171+
width: 20px;
172+
line-height: 20px;
173+
margin-right: 4px;
174+
height: 20px;
175+
}
176+
177+
.moduleMetaContainer {
178+
color: var(--vp-c-text-3);
179+
margin: 0px !important;
180+
padding: 0px !important;
181+
padding-top: 20px !important;
182+
}
183+
</style>

0 commit comments

Comments
 (0)