From bee4c903ec058f749a3fa3b87f198bbcc1747f65 Mon Sep 17 00:00:00 2001 From: Eclypsed Date: Sat, 27 Jan 2024 01:38:04 -0500 Subject: [PATCH] Navbars are still messed up --- src/lib/components/util/iconButton.svelte | 38 ++++++ src/lib/components/util/navbarFoot.svelte | 75 +++++++++++ src/lib/components/util/navbarSide.svelte | 6 +- src/lib/components/util/slider.svelte | 52 ++++++++ src/lib/components/util/toggle.svelte | 29 ++++ src/lib/components/util/volumeSlider.svelte | 50 +++++++ src/lib/server/users.db | Bin 32768 -> 32768 bytes src/lib/stores.ts | 6 +- src/routes/(app)/+layout.svelte | 141 +++++++------------- src/routes/(app)/user/+page.svelte | 33 ++++- src/routes/+layout.server.ts | 4 +- src/routes/+layout.svelte | 2 +- src/routes/settings/+layout.svelte | 22 +++ src/routes/settings/+page.svelte | 5 + src/routes/settings/navMenu.svelte | 20 +++ 15 files changed, 380 insertions(+), 103 deletions(-) create mode 100644 src/lib/components/util/iconButton.svelte create mode 100644 src/lib/components/util/slider.svelte create mode 100644 src/lib/components/util/toggle.svelte create mode 100644 src/lib/components/util/volumeSlider.svelte create mode 100644 src/routes/settings/+layout.svelte create mode 100644 src/routes/settings/+page.svelte create mode 100644 src/routes/settings/navMenu.svelte diff --git a/src/lib/components/util/iconButton.svelte b/src/lib/components/util/iconButton.svelte new file mode 100644 index 0000000..9847e6b --- /dev/null +++ b/src/lib/components/util/iconButton.svelte @@ -0,0 +1,38 @@ + + + + + diff --git a/src/lib/components/util/navbarFoot.svelte b/src/lib/components/util/navbarFoot.svelte index e69de29..2c73c21 100644 --- a/src/lib/components/util/navbarFoot.svelte +++ b/src/lib/components/util/navbarFoot.svelte @@ -0,0 +1,75 @@ + + + + +
+ {#each navTabs as tabData} + {#if currentPathname === tabData.pathname} + + {:else} + + {/if} + {/each} + {#if navTabs.some((tab) => tab.pathname === currentPathname)} +
+ {/if} +
+ + diff --git a/src/lib/components/util/navbarSide.svelte b/src/lib/components/util/navbarSide.svelte index 4c4226e..5d12667 100644 --- a/src/lib/components/util/navbarSide.svelte +++ b/src/lib/components/util/navbarSide.svelte @@ -19,10 +19,10 @@ type PageTransitionDirection = 'up' | 'down' let direction: PageTransitionDirection = 'down' - const calculateDirection = (newPage: string, currentPage: string): void => { + const calculateDirection = (newPage: string, currentPage: string): PageTransitionDirection => { const newPageIndex = navTabs.findIndex((tab) => tab.pathname === newPage) const currentPageIndex = navTabs.findIndex((tab) => tab.pathname === currentPage) - newPageIndex > currentPageIndex ? (direction = 'down') : (direction = 'up') + return newPageIndex > currentPageIndex ? 'down' : 'up' } let activeTab: HTMLButtonElement, indicatorBar: HTMLDivElement, tabList: HTMLDivElement @@ -56,7 +56,7 @@ + + diff --git a/src/lib/components/util/volumeSlider.svelte b/src/lib/components/util/volumeSlider.svelte new file mode 100644 index 0000000..89d599d --- /dev/null +++ b/src/lib/components/util/volumeSlider.svelte @@ -0,0 +1,50 @@ + + +
+ (muted = !muted)}> + + +
+ +
+
+ + diff --git a/src/lib/server/users.db b/src/lib/server/users.db index 4716b4ed139070e084cef7ffece5623b9e2802b3..f24c00c3b51bfc7f3be290ee61e7c5d645ec390e 100644 GIT binary patch delta 156 zcmZo@U}|V!+Avc-J=G$~BrPpTH#ylLS=YqK#6TA)V5pmxXpoX(YLIM{WMuA_nVgZI zlUS@`l&E58pb}wj8IT_AUsRUqpHr1wUgT=zl;!Rpnj7eq>*(h0U2IZOm{VY!oge7x a25q2#y2mk;pk1*;0 delta 156 zcmZo@U}|V!+Avc--Pk-OInmTo*UT`*NY^AK#aK7dGAUWtI3+RF(8R*b+}zy4FEcqK zKPRzR#VAq5&_KmBrQFmj%|9$Pxi~pED%mk5E!;n|G~LM9KP56dMbF(az|_eyG$SCu bzsgZBH#EG&$tS6DlfqqoWg_faWDo!V%)c+c diff --git a/src/lib/stores.ts b/src/lib/stores.ts index af7c353..dca61bd 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -1,11 +1,11 @@ import { writable, type Writable } from 'svelte/store' import type { AlertType } from '$lib/components/util/alert.svelte' -export const pageWidth: Writable = writable(0) +export const pageWidth: Writable = writable() -export const newestAlert: Writable<[AlertType, string] | null> = writable(null) +export const newestAlert: Writable<[AlertType, string]> = writable() -export const currentlyPlaying = writable(null) +export const currentlyPlaying = writable() const youtubeMusicBackground: string = 'https://www.gstatic.com/youtube/media/ytm/images/sbg/wsbg@4000x2250.png' // Default Youtube music background export const backgroundImage: Writable = writable(youtubeMusicBackground) diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte index 8263a4b..60953d0 100644 --- a/src/routes/(app)/+layout.svelte +++ b/src/routes/(app)/+layout.svelte @@ -1,11 +1,12 @@ - -
- { - event.detail.direction === 'up' ? (direction = 1) : (direction = -1) - goto(event.detail.pathname) - }} - /> -
- {#key data.urlPathname} -
- -
- {/key} -
-
- -
-
- - + +
+{:else}
- {#key data.urlPathname} + {#key currentPathname}
{/key}
- -
- {#each contentTabs as tabData} - {#if data.urlPathname === tabData.pathname} - - {:else} - - {/if} - {/each} - {#if contentTabs.some((tab) => tab.pathname === data.urlPathname)} -
- {/if} -
+ + { + event.detail.direction === 'right' ? (directionMultiplier = 1) : (directionMultiplier = -1) + currentPathname = event.detail.pathname + goto(currentPathname) + }} + />
-{/if} --> +{/if} diff --git a/src/routes/(app)/user/+page.svelte b/src/routes/(app)/user/+page.svelte index d4cb541..85ac96f 100644 --- a/src/routes/(app)/user/+page.svelte +++ b/src/routes/(app)/user/+page.svelte @@ -1 +1,32 @@ -

Welcome to the User Page!

+ + +
+
+
+
+ +
+
+
{data.user.username}
+
Other info about the user
+
+
+
+ goto('/settings')} halo={true}> + + + + + +
+
+
+
This is where things like history would go
+
+
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index 12a06fd..b7a309f 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -1,5 +1,5 @@ import type { LayoutServerLoad } from './$types' -export const load: LayoutServerLoad = ({ url, locals }) => { - return { urlPathname: url.pathname, user: locals.user } +export const load: LayoutServerLoad = ({ locals }) => { + return { user: locals.user } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b1d414d..27d8e62 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,7 +6,7 @@ import { fade } from 'svelte/transition' let alertBox: AlertBox - $: if ($newestAlert !== null && alertBox) alertBox.addAlert(...$newestAlert) + $: if ($newestAlert && alertBox) alertBox.addAlert(...$newestAlert) diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte new file mode 100644 index 0000000..5b07c2d --- /dev/null +++ b/src/routes/settings/+layout.svelte @@ -0,0 +1,22 @@ + + +
+

+ history.back()}> + + + Account +

+
+ +
+
+ + diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte new file mode 100644 index 0000000..6634b68 --- /dev/null +++ b/src/routes/settings/+page.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/routes/settings/navMenu.svelte b/src/routes/settings/navMenu.svelte new file mode 100644 index 0000000..ebc602d --- /dev/null +++ b/src/routes/settings/navMenu.svelte @@ -0,0 +1,20 @@ + + +