[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Make queue titles sticky
+58
-42
+6
src/app.css
+6
src/app.css
+52
-40
src/components/Queue.svelte
+52
-40
src/components/Queue.svelte
···
32
32
}
33
33
})
34
34
35
-
let show_history = false
35
+
// let show_history = false
36
36
// $: items = getQueue($queue, show_history)
37
37
// $: up_next_index = $queue.past.length + ($queue.current ? 1 : 0)
38
38
···
216
216
217
217
<aside transition:fly={{ x: '100%', duration: 150, opacity: 1 }}>
218
218
<div class="shadow" />
219
-
<div class="content" bind:this={scroll_container}>
220
-
<h4 class="row">History</h4>
221
-
<VirtualListBlock
222
-
items={$queue.past}
223
-
let:item
224
-
get_key={(i) => i.qId}
225
-
item_height={54}
226
-
{scroll_container}
227
-
>
228
-
<div class="row">
229
-
<QueueItemComponent id={item.id} />
230
-
</div>
231
-
</VirtualListBlock>
219
+
<div class="content relative -mt-px border-l" bind:this={scroll_container}>
220
+
<div class="relative">
221
+
{#if $queue.past.length}
222
+
<h4 class="sticky top-0 z-1 border-y bg-[hsl(226,35%,11%)]/50 py-2 backdrop-blur-md">
223
+
History
224
+
</h4>
225
+
<VirtualListBlock
226
+
items={$queue.past}
227
+
let:item
228
+
get_key={(i) => i.qId}
229
+
item_height={54}
230
+
{scroll_container}
231
+
>
232
+
<div class="row">
233
+
<QueueItemComponent id={item.id} />
234
+
</div>
235
+
</VirtualListBlock>
236
+
{/if}
237
+
</div>
232
238
233
-
<h4 class="row">Up Next</h4>
234
-
<VirtualListBlock
235
-
items={$queue.userQueue}
236
-
let:item
237
-
get_key={(i) => i.qId}
238
-
item_height={54}
239
-
{scroll_container}
240
-
>
241
-
<div class="row">
242
-
<QueueItemComponent id={item.id} />
243
-
</div>
244
-
</VirtualListBlock>
239
+
<div class="relative">
240
+
<h4 class="sticky top-0 z-1 border-y bg-[hsl(226,35%,11%)]/50 py-2 backdrop-blur-md">
241
+
Up Next
242
+
</h4>
243
+
<VirtualListBlock
244
+
items={$queue.userQueue}
245
+
let:item
246
+
get_key={(i) => i.qId}
247
+
item_height={54}
248
+
{scroll_container}
249
+
>
250
+
<div class="row">
251
+
<QueueItemComponent id={item.id} />
252
+
</div>
253
+
</VirtualListBlock>
254
+
</div>
245
255
246
-
<h4 class="row">Autoplay</h4>
247
-
<VirtualListBlock
248
-
items={$queue.autoQueue}
249
-
let:item
250
-
get_key={(i) => i.qId}
251
-
item_height={54}
252
-
{scroll_container}
253
-
id="autoplay"
254
-
>
255
-
<div class="row">
256
-
<QueueItemComponent id={item.id} />
257
-
</div>
258
-
</VirtualListBlock>
256
+
<div class="relative">
257
+
<h4 class="sticky top-0 z-1 border-y bg-[hsl(226,35%,11%)]/50 py-2 backdrop-blur-md">
258
+
Autoplay
259
+
</h4>
260
+
<VirtualListBlock
261
+
items={$queue.autoQueue}
262
+
let:item
263
+
get_key={(i) => i.qId}
264
+
item_height={54}
265
+
{scroll_container}
266
+
>
267
+
<div class="row">
268
+
<QueueItemComponent id={item.id} />
269
+
</div>
270
+
</VirtualListBlock>
271
+
</div>
259
272
</div>
260
273
</aside>
261
274
···
283
296
background-color: #000000
284
297
pointer-events: all
285
298
overflow-y: scroll
286
-
border-left: 1px solid var(--border-color)
287
299
.row
288
300
height: 54px
289
301
display: flex