Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-27 16:59:37 +02:00
Code Issues Releases Activity

Update theme handling and add theme selection dropdown in Navbar.svelte

Browse source
This commit is contained in:
Sean Morley 2024-04-17 00:15:27 +00:00
parent b76e655e38
commit 5efb2912c0
5 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/AdventureCard.svelte
View file

@ -40,7 +40,7 @@
{#if type === "mylog"} {#if type === "mylog"}
<div <div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden" class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
> >
<div class="card-body"> <div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2> <h2 class="card-title overflow-ellipsis">{name}</h2>
@ -72,7 +72,7 @@
{#if type === "featured"} {#if type === "featured"}
<div <div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden" class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
> >
<div class="card-body"> <div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2> <h2 class="card-title overflow-ellipsis">{name}</h2>
@ -94,7 +94,7 @@
{#if type === "shared"} {#if type === "shared"}
<div <div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden" class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
> >
<div class="card-body"> <div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2> <h2 class="card-title overflow-ellipsis">{name}</h2>
@ -122,7 +122,7 @@
{#if type === "worldtravelregion"} {#if type === "worldtravelregion"}
<div <div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden" class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
> >
<div class="card-body"> <div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2> <h2 class="card-title overflow-ellipsis">{name}</h2>

3
src/lib/components/Navbar.svelte
View file

@ -107,6 +107,9 @@
<form method="POST"> <form method="POST">
<li><button formaction="/?/setTheme&theme=light">Light</button></li> <li><button formaction="/?/setTheme&theme=light">Light</button></li>
<li><button formaction="/?/setTheme&theme=dark">Dark</button></li> <li><button formaction="/?/setTheme&theme=dark">Dark</button></li>
<li><button formaction="/?/setTheme&theme=night">Night</button></li>
<!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> -->
<li><button formaction="/?/setTheme&theme=forest">Forest</button></li>
</form> </form>
</ul> </ul>
</div> </div>

3
src/routes/+page.server.ts
View file

@ -30,7 +30,8 @@ export const actions: Actions = {
}, },
setTheme: async ( { url, cookies }) => { setTheme: async ( { url, cookies }) => {
const theme = url.searchParams.get("theme"); const theme = url.searchParams.get("theme");
if (theme) { // change the theme only if it is one of the allowed themes
if (theme && ["light", "dark", "night", "retro", "forest"].includes(theme)) {
cookies.set("colortheme", theme, { cookies.set("colortheme", theme, {
path: "/", path: "/",
maxAge: 60 * 60 * 24 * 365, maxAge: 60 * 60 * 24 * 365,

2
src/routes/login/+page.svelte
View file

@ -55,7 +55,7 @@
</div> </div>
{#if errors.message} {#if errors.message}
<div class="text-center text-red-500 mt-4"> <div class="text-center text-error mt-4">
{errors.message} {errors.message}
</div> </div>
{/if} {/if}

2
tailwind.config.js
View file

@ -6,6 +6,6 @@ export default {
}, },
plugins: [require("@tailwindcss/typography"), require("daisyui")], plugins: [require("@tailwindcss/typography"), require("daisyui")],
daisyui: { daisyui: {
themes: ["light", "dark"], themes: ["light", "dark", "night", "retro", "forest"],
}, },
}; };