tokono.ma
A music player that connects to your cloud/distributed storage.
feat(facets): improved your-collection view
+47
-61
src/facets/you.js
+47
-61
src/facets/you.js
···
34
34
keyed(
35
35
c.id,
36
36
html`
37
-
<li>
38
-
<div
39
-
style="display: flex; align-items: center; gap: var(--space-xs); justify-content: space-between; position: relative;"
40
-
>
37
+
<li class="grid-item">
38
+
<div class="grid-item__contents">
39
+
<div>
40
+
<a
41
+
href="facets/l/?id=${c
42
+
.id}"
43
+
style="display: inline-block; padding: var(--space-3xs) 0"
44
+
>
45
+
${c.name}
46
+
</a>
47
+
</div>
48
+
<div class="list-description">
49
+
<div>
50
+
${c.description?.trim().length
51
+
? unsafeHTML(
52
+
marked.parse(c.description, { async: false }),
53
+
)
54
+
: nothing}
55
+
</div>
56
+
<div>
57
+
${c.uri && !c.html
58
+
? html`
59
+
<span class="with-icon">
60
+
<i class="ph-fill ph-binoculars"></i>
61
+
<span>Tracking the original <a href="${c
62
+
.uri}">URI</a></span>
63
+
</span>
64
+
`
65
+
: html`
66
+
<span class="with-icon">
67
+
<i class="ph-fill ph-code-simple"></i>
68
+
<span>Custom code</span>
69
+
</span>
70
+
`}
71
+
</div>
72
+
</div>
73
+
</div>
74
+
75
+
<div class="grid-item__menu">
41
76
<a
42
-
href="facets/l/?id=${c
43
-
.id}"
44
-
style="display: inline-block; padding: var(--space-3xs) 0"
77
+
class="button button--transparent"
78
+
title="Edit"
79
+
href="facets/build/?id=${encodeURIComponent(c.id)}"
45
80
>
46
-
${c.name}
81
+
<i class="ph-fill ph-code-block"></i>
47
82
</a>
83
+
<hr />
48
84
<button
49
85
class="button--transparent"
50
-
popovertarget="facet-menu-col-${c.id}"
51
-
style="anchor-name: --facet-anchor-col-${c
52
-
.id}; font-size: var(--fs-base); padding: var(--space-3xs) 0;"
86
+
title="Delete"
87
+
@click="${deleteFacet({ id: c.id })}"
53
88
>
54
-
<i class="ph-fill ph-dots-three-circle"></i>
89
+
<i class="ph-fill ph-skull"></i>
55
90
</button>
56
-
</div>
57
-
<div class="list-description">
58
-
<div>
59
-
${c.description?.trim().length
60
-
? unsafeHTML(
61
-
marked.parse(c.description, { async: false }),
62
-
)
63
-
: nothing}
64
-
</div>
65
-
<div>
66
-
${c.uri && !c.html
67
-
? html`
68
-
<span class="with-icon">
69
-
<i class="ph-fill ph-binoculars"></i>
70
-
<span>Tracking the original <a href="${c
71
-
.uri}">URI</a></span>
72
-
</span>
73
-
`
74
-
: html`
75
-
<span class="with-icon">
76
-
<i class="ph-fill ph-code"></i>
77
-
<span>Custom code</span>
78
-
</span>
79
-
`}
80
-
</div>
81
-
</div>
82
-
83
-
<!-- Dropdown Menu -->
84
-
<div
85
-
id="facet-menu-col-${c.id}"
86
-
class="dropdown"
87
-
style="position-anchor: --facet-anchor-col-${c.id}"
88
-
popover
89
-
>
90
-
<a href="facets/l/?id=${c.id}">
91
-
<span class="with-icon">
92
-
<i class="ph-fill ph-globe"></i> Open
93
-
</span>
94
-
</a>
95
-
<a @click="${() => editFacet(c)}">
96
-
<span class="with-icon">
97
-
<i class="ph-fill ph-cursor-text"></i> Edit
98
-
</span>
99
-
</a>
100
-
<a @click="${deleteFacet({ id: c.id })}">
101
-
<span class="with-icon">
102
-
<i class="ph-fill ph-eraser"></i> Delete
103
-
</span>
104
-
</a>
105
91
</div>
106
92
</li>
107
93
`,
+31
-1
src/styles/diffuse/page.css
+31
-1
src/styles/diffuse/page.css
···
224
224
content: none;
225
225
}
226
226
227
-
li {
227
+
.grid-item {
228
228
border: 1px solid var(--border-color);
229
+
display: flex;
230
+
}
231
+
232
+
.grid-item__contents {
233
+
flex: 1;
229
234
padding: var(--space-md);
235
+
}
236
+
237
+
.grid-item__menu {
238
+
border-left: 1px solid var(--border-color);
239
+
display: flex;
240
+
flex-direction: column;
241
+
justify-content: space-evenly;
242
+
243
+
hr {
244
+
background: var(--border-color);
245
+
border: 0;
246
+
height: 1px;
247
+
margin: 0;
248
+
padding: 0;
249
+
}
250
+
}
251
+
252
+
.grid-item__menu button,
253
+
.grid-item__menu .button {
254
+
--button-bg-opacity: 0.3;
255
+
align-items: center;
256
+
border-radius: 0;
257
+
display: flex;
258
+
flex: 1;
259
+
justify-content: center;
230
260
}
231
261
}
232
262