diff --git a/src/app.css b/src/app.css index e0e22de..782e6f9 100644 --- a/src/app.css +++ b/src/app.css @@ -9,17 +9,6 @@ img { max-height: 100%; } -/* Hide scrollbar for Chrome, Safari and Opera */ -.no-scrollbar::-webkit-scrollbar { - display: none; -} - -/* Hide scrollbar for IE, Edge and Firefox */ -.no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ -} - /* Default scrollbar for Chrome, Safari, Edge and Opera */ ::-webkit-scrollbar { width: 20px; diff --git a/src/routes/(app)/library/albums/albumCard.svelte b/src/lib/components/media/albumCard.svelte similarity index 98% rename from src/routes/(app)/library/albums/albumCard.svelte rename to src/lib/components/media/albumCard.svelte index c477b9f..ac28e42 100644 --- a/src/routes/(app)/library/albums/albumCard.svelte +++ b/src/lib/components/media/albumCard.svelte @@ -23,7 +23,7 @@ } -
+
+
+ {#if showSearchbar} + + + + + (event.key === 'Enter' ? search() : null)} + /> + (searchInput.value = '')}> + + + + {/if} +
+
+ goto('/user')}> + + + {#if !showSearchbar} + (miniSearchOpen = true)}> + + + {/if} +
+ {:else} + (miniSearchOpen = false)}> + + + (event.key === 'Enter' ? search() : null)} + /> + (searchInput.value = '')}> + + + {/if} + + + diff --git a/src/lib/components/util/scrollingText.svelte b/src/lib/components/util/scrollingText.svelte index 7780b5b..f2f4f7b 100644 --- a/src/lib/components/util/scrollingText.svelte +++ b/src/lib/components/util/scrollingText.svelte @@ -1,8 +1,7 @@ + + +
diff --git a/src/lib/components/util/slider.svelte b/src/lib/components/util/slider.svelte index 3bf6fe8..f3c338c 100644 --- a/src/lib/components/util/slider.svelte +++ b/src/lib/components/util/slider.svelte @@ -3,8 +3,10 @@ export let value = 0 export let max = 100 + export let thickness: 'thick' | 'thin' = 'thick' - const dispatch = createEventDispatcher() + const seekingDispatch = createEventDispatcher<{ seeking: { value: number } }>() + const seekedDispatch = createEventDispatcher<{ seeked: { value: number } }>() let sliderThumb: HTMLSpanElement, sliderTrail: HTMLSpanElement @@ -26,7 +28,7 @@
handleKeyPress(event.key)} > dispatch('seeking', { value: event.currentTarget.value })} - on:change={(event) => dispatch('seeked', { value: event.currentTarget.value })} + on:input={(event) => seekingDispatch('seeking', { value: Number(event.currentTarget.value) })} + on:change={(event) => seekedDispatch('seeked', { value: Number(event.currentTarget.value) })} type="range" - class="absolute z-10 h-1 w-full" + class="absolute z-10 {thickness === 'thick' ? 'h-1' : 'h-0.5'} w-full" step="any" min="0" {max} @@ -48,8 +50,8 @@ aria-hidden="true" aria-disabled="true" /> - - + +
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte index 9205dda..1a738fa 100644 --- a/src/routes/(app)/+page.svelte +++ b/src/routes/(app)/+page.svelte @@ -1,15 +1,68 @@ -
+
{#await data.recommendations} {:then recommendations} - +
+ {#each recommendations.filter((item) => item.type === 'album') as album} + + {/each} +
{/await}
+ + diff --git a/src/routes/(app)/library/+layout.svelte b/src/routes/(app)/library/+layout.svelte index a5fa4a5..3873070 100644 --- a/src/routes/(app)/library/+layout.svelte +++ b/src/routes/(app)/library/+layout.svelte @@ -1,13 +1,11 @@
diff --git a/src/routes/(app)/library/albums/+page.svelte b/src/routes/(app)/library/albums/+page.svelte index 4a2a1f6..b500257 100644 --- a/src/routes/(app)/library/albums/+page.svelte +++ b/src/routes/(app)/library/albums/+page.svelte @@ -2,7 +2,7 @@ import type { PageServerData } from './$types' import { itemDisplayState } from '$lib/stores' import Loader from '$lib/components/util/loader.svelte' - import AlbumCard from './albumCard.svelte' + import AlbumCard from '$lib/components/media/albumCard.svelte' import ListItem from '$lib/components/media/listItem.svelte' export let data: PageServerData diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index 3ae318f..cfa39e8 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -2,13 +2,8 @@ import type { LayoutServerLoad } from './$types' export const ssr = false -export const load: LayoutServerLoad = ({ url, locals }) => { - const { pathname, search } = url +export const load: LayoutServerLoad = ({ locals }) => { return { - url: { - pathname, - search, - }, user: locals.user, } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 27d8e62..e2765a5 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,15 +2,14 @@ import '../app.css' import '@fortawesome/fontawesome-free/css/all.min.css' import AlertBox from '$lib/components/util/alertBox.svelte' - import { newestAlert, backgroundImage, pageWidth } from '$lib/stores' + import { newestAlert, backgroundImage } from '$lib/stores' import { fade } from 'svelte/transition' let alertBox: AlertBox $: if ($newestAlert && alertBox) alertBox.addAlert(...$newestAlert) - -
+
{#key $backgroundImage} diff --git a/tailwind.config.js b/tailwind.config.js index a0a105f..4b35b0f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,5 @@ const defaultTheme = require('tailwindcss/defaultTheme') +const plugin = require('tailwindcss/plugin') /** @type {import('tailwindcss').Config} */ export default { @@ -17,5 +18,19 @@ export default { }, }, }, - plugins: [], + plugins: [ + plugin(function ({ addUtilities }) { + addUtilities({ + /* Hide scrollbar for Chrome, Safari and Opera */ + '.no-scrollbar::-webkit-scrollbar': { + display: 'none', + }, + /* Hide scrollbar for IE, Edge and Firefox */ + '.no-scrollbar': { + '-ms-overflow-style': 'none' /* IE and Edge */, + 'scrollbar-width': 'none' /* Firefox */, + }, + }) + }), + ], }