forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
wip: facets grid
+95
-17
+45
src/_components/facets/grid.vto
+45
src/_components/facets/grid.vto
···
1
+
<ul class="grid">
2
+
{{ for index, item of items }}
3
+
<li data-uri="{{ item.url |> facetOrThemeURI }}" data-name="{{item.title}}">
4
+
<div style="position: relative;">
5
+
<a href="{{ item.url |> facetLoaderURL }}">
6
+
{{item.title}}
7
+
</a>
8
+
<button
9
+
class="button--fixed button--transparent"
10
+
popovertarget="facet-menu-{{id}}-{{index}}"
11
+
style="anchor-name: --facet-anchor-{{id}}-{{index}}; position: absolute; right: 0; top: 50%; transform: translateY(-50%);"
12
+
>
13
+
<i class="ph-fill ph-dots-three-circle"></i>
14
+
</button>
15
+
</div>
16
+
<div class="list-description">
17
+
{{item.desc |> md(true)}}
18
+
</div>
19
+
20
+
<!-- Dropdown Menu -->
21
+
<div
22
+
id="facet-menu-{{id}}-{{index}}"
23
+
class="dropdown"
24
+
style="position-anchor: --facet-anchor-{{id}}-{{index}}"
25
+
popover
26
+
>
27
+
<a href="{{ item.url |> facetLoaderURL }}">
28
+
<span class="with-icon">
29
+
<i class="ph-fill ph-globe"></i> Open
30
+
</span>
31
+
</a>
32
+
<a rel="save">
33
+
<span class="with-icon">
34
+
<i class="ph-fill ph-download"></i> Save
35
+
</span>
36
+
</a>
37
+
<a rel="fork">
38
+
<span class="with-icon">
39
+
<i class="ph-fill ph-cursor-text"></i> Edit
40
+
</span>
41
+
</a>
42
+
</div>
43
+
</li>
44
+
{{ /for }}
45
+
</ul>
+5
-5
src/_data/facets.yaml
+5
-5
src/_data/facets.yaml
···
10
10
Automatically put tracks into the queue.
11
11
- url: "facets/tools/export-import/index.html"
12
12
title: "Tools / Export & Import"
13
-
category: User data
13
+
category: Data
14
14
desc: >
15
15
Export all data as a JSON snapshot, or restore from a previously exported file.
16
16
- url: "facets/tools/split-view/index.html"
17
17
title: "Tools / Split View"
18
-
category: Miscellaneous
18
+
category: "Misc"
19
19
desc: >
20
20
Arrange multiple facets side-by-side in a resizable split-panel layout.
21
21
- url: "facets/tools/v3-import/index.html"
22
22
title: "Tools / V3.x Import"
23
-
category: User data
23
+
category: Data
24
24
desc: >
25
25
Import data from Diffuse v3.
26
26
- url: "themes/webamp/browser/facet/index.html"
···
30
30
Collection browser + search in a retro, win98, look.
31
31
- url: "themes/webamp/configurators/input/facet/index.html"
32
32
title: "Webamp / Input Configurator"
33
-
category: Audio input
33
+
category: Data
34
34
desc: >
35
35
Windows 98 styled input configurator where you can add music sources.
36
36
- url: "themes/webamp/configurators/output/facet/index.html"
37
37
title: "Webamp / Output Configurator"
38
-
category: User data
38
+
category: Data
39
39
desc: >
40
40
Windows 98 styled output configurator where you can manage your data storage.
+1
-1
src/_includes/layouts/facets-category.vto
+1
-1
src/_includes/layouts/facets-category.vto
+1
src/styles/diffuse/colors.css
+1
src/styles/diffuse/colors.css
+25
-3
src/styles/diffuse/page.css
+25
-3
src/styles/diffuse/page.css
···
165
165
}
166
166
167
167
& > a:not(:last-child) {
168
-
border-bottom: 1px solid oklch(from currentColor l c h / 0.05);
168
+
border-bottom: 1px solid var(--border-color);
169
169
}
170
170
171
171
i {
···
199
199
}
200
200
201
201
/**
202
+
* Grid
203
+
*/
204
+
205
+
.grid {
206
+
display: grid;
207
+
gap: var(--space-2xs);
208
+
grid-template-columns: repeat(auto-fill, minmax(min(var(--container-xs), 100%), 1fr));
209
+
list-style: none;
210
+
max-width: 100%;
211
+
padding: 0;
212
+
213
+
li::marker {
214
+
content: none;
215
+
}
216
+
217
+
li {
218
+
border: 1px solid var(--border-color);
219
+
padding: var(--space-md);
220
+
}
221
+
}
222
+
223
+
/**
202
224
* Headers
203
225
*/
204
226
···
351
373
}
352
374
353
375
.divider {
354
-
background-color: oklch(from currentColor l c h / 0.05);
376
+
background-color: var(--border-color);
355
377
height: stretch;
356
378
width: 1px;
357
379
}
···
462
484
463
485
nav {
464
486
align-items: center;
465
-
border-bottom: 1px solid oklch(from currentColor l c h / 0.05);
487
+
border-bottom: 1px solid var(--border-color);
466
488
display: flex;
467
489
flex-wrap: wrap;
468
490
gap: var(--space-xs);