brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds dark mode

Browse Source
This commit is contained in:
Christian Beutel
2024-02-22 01:00:09 +01:00
parent a24662a56e
commit 442e13b7c7
27 changed files with 240 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/lib/components/base/dropdown.svelte
View File

@@ -36,19 +36,17 @@
<div class="dropdown relative">
<button
class="flex items-center justify-center"
class="btn-icon flex items-center justify-center"
on:click={toggleMenu}
type="button"
>
<slot>
<i
class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full"
></i>
<i class="fa fa-ellipsis-vertical text-{size}"></i>
</slot>
</button>
{#if isOpen}
<ul
class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden text-black mt-1"
class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden mt-2"
class:none={isOpen}
style="z-index: 1001"
>
@@ -56,7 +54,7 @@
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li
class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
tabindex="0"
on:mouseup|stopPropagation={() => handleItemClick(item)}
on:keydown|stopPropagation={() => handleItemClick(item)}

2
web/src/lib/components/base/modal.svelte
View File

@@ -28,7 +28,7 @@
</h3>
<button
type="button"
class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
class="rounded-full btn-icon"
on:click={closeModal}
>
<i class="fa fa-close"></i>

10
web/src/lib/components/base/radio_group.svelte
View File

@@ -17,7 +17,7 @@
function handleRadioChange(radioIndex: number) {
selected = radioIndex;
dispatch('change', items[selected])
dispatch("change", items[selected]);
}
</script>
@@ -29,13 +29,9 @@
type="radio"
checked={i == selected}
value={item.value}
class="w-4 h-4 text-primary accent-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
class="w-4 h-4 accent-input-background border-input-border focus:ring-input-border-focus focus:ring-2"
on:change={() => handleRadioChange(i)}
/>
<label
for="{name}-radio-{i}"
class="ms-2 text-sm text-gray-900 dark:text-gray-300"
>{item.text}</label
>
<label for="{name}-radio-{i}" class="ms-2 text-sm">{item.text}</label>
</div>
{/each}

8
web/src/lib/components/base/search.svelte
View File

@@ -54,13 +54,13 @@
}
</script>
<div class="relative text-gray-600 {extraClasses}">
<div class="relative {extraClasses}">
<span class="absolute top-1/2 -translate-y-1/2 left-0 pl-4">
<i class="fa fa-search" class:text-xl={large}></i>
</span>
{#if value.length > 0}
<button
class="absolute top-1/2 -translate-y-1/2 right-0 h-6 w-6 mr-2 hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
class="btn-icon absolute top-1/2 -translate-y-1/2 right-0 mr-2"
on:click={clear}
in:fade={{ duration: 150 }}
out:fade={{ duration: 150 }}
@@ -84,7 +84,7 @@
{#if dropDownOpen}
<ul
class="menu absolute bg-white border rounded-xl shadow-md overflow-hidden text-black w-full"
class="menu absolute bg-menu-background border border-input-border rounded-xl shadow-md overflow-hidden w-full"
class:none={!dropDownOpen}
style="z-index: 1001"
>
@@ -92,7 +92,7 @@
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li
class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
tabindex="0"
on:mousedown|stopPropagation={() => handleItemClick(item)}
on:keydown|stopPropagation={() => handleItemClick(item)}

2
web/src/lib/components/base/select.svelte
View File

@@ -29,7 +29,7 @@
{/if}
<select
{name}
class="bg-gray-50 h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-gray-200 rounded-md focus:outline-primary transition-colors"
class="bg-input-background h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-input-border rounded-md focus:outline-input-border-focus transition-colors"
bind:value
on:change={(e) => onChange(e.target)}
>

3
web/src/lib/components/base/slider.svelte
View File

@@ -37,6 +37,9 @@
<div class="my-4" id="slider" bind:this={sliderContainer}></div>
<style>
:global(.noUi-target) {
@apply border border-input-border shadow-none;
}
:global(.noUi-horizontal) {
height: 6px;
}

4
web/src/lib/components/base/text_field.svelte
View File

@@ -7,7 +7,7 @@
export let icon: string = "";
export let extraClasses: string = "";
export let type: "text" | "password" | "search" = "text";
export let autocomplete: "on" | "off" = "on"
export let autocomplete: "on" | "off" = "on";
function typeAction(node: HTMLInputElement) {
node.type = type;
}
@@ -25,7 +25,7 @@
{/if}
<input
{name}
class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full {extraClasses}"
class="bg-input-background border border-input-border rounded-md p-3 transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full {extraClasses}"
class:border-red-400={error.length > 0}
class:bg-red-50={error.length > 0}
{autocomplete}

2
web/src/lib/components/base/textarea.svelte
View File

@@ -15,7 +15,7 @@
{/if}
<textarea
{name}
class="bg-gray-50 border rounded-md p-3 resize-none transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
class="bg-input-background border border-input-border rounded-md p-3 resize-none transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full"
{rows}
{placeholder}
class:border-red-400={error.length > 0}

10
web/src/lib/components/base/toggle.svelte
View File

@@ -6,9 +6,15 @@
</script>
<label class="relative my-2 inline-flex items-center cursor-pointer">
<input {name} bind:checked={value} type="checkbox" class="sr-only peer" value="1"/>
<input
{name}
bind:checked={value}
type="checkbox"
class="sr-only peer"
value="1"
/>
<div
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-400 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"
class="w-11 h-6 bg-input-background peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-border-focus rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-input-background"
></div>
<span class="ms-3 text-sm font-medium">{label}</span>
</label>

75
web/src/lib/components/earth.svelte
View File

@@ -4,17 +4,35 @@ Command: npx @threlte/gltf@2.0.1 static/models/earth.glb
-->
<script lang="ts">
import { DirectionalLight, Group, PointLight } from "three";
import { theme } from "$lib/stores/theme_store";
import { T, forwardEventHandlers } from "@threlte/core";
import { useGltf } from "@threlte/extras";
import { backIn, backInOut, backOut, cubicInOut } from "svelte/easing";
import { tweened } from "svelte/motion";
import { Group } from "three";
export const ref = new Group();
export let rotation: number = 0;
const gltf = useGltf("/models/earth.glb");
const gltf = useGltf("/models/earth2.glb");
const component = forwardEventHandlers();
const sunXRotation = tweened(0, {
duration: 1500,
easing: backInOut
});
const sunLightIntensitiy = tweened(2.5, {
duration: 500,
});
const moonLightIntensitiy = tweened(2.5, {
duration: 500,
});
$: sunLightIntensitiy.set($theme == "light" ? 2.5 : 0.1);
$: moonLightIntensitiy.set($theme == "dark" ? 2.5 : 0.1);
$: sunXRotation.set($theme == "light" ? 0 : -Math.PI);
</script>
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
@@ -88,18 +106,47 @@ Command: npx @threlte/gltf@2.0.1 static/models/earth.glb
<!-- /Airplane -->
<!-- Sun -->
<T.Mesh
geometry={gltf.nodes.Icosphere007.geometry}
material={gltf.materials["Material.009"]}
position={[0.5, 2, -0.5]}
scale={0.88}
>
<T.PointLight position={[2, 0, 0]} color="#ffffff" intensity={4.5}
></T.PointLight>
<T.DirectionalLight color="#f4de51" intensity={2.5} castShadow
></T.DirectionalLight>
</T.Mesh>
<T.Group rotation={[$sunXRotation, 0, 0]}>
<T.Mesh
geometry={gltf.nodes.Icosphere007.geometry}
material={gltf.materials["Material.009"]}
position={[0, 2, 0]}
scale={0.88}
>
<T.PointLight position={[0, 0.4, 0]} color="#fff4ab" intensity={0.15}
></T.PointLight>
<T.PointLight position={[0, 0, 0.4]} color="#fff4ab" intensity={0.15}
></T.PointLight>
<T.PointLight position={[0, -0.4, 0]} color="#fff4ab" intensity={0.15}
></T.PointLight>
<T.DirectionalLight
position={[0, -0.5, 0]}
color="#ffffff"
intensity={$sunLightIntensitiy}
castShadow
></T.DirectionalLight>
</T.Mesh>
<T.Mesh
geometry={gltf.nodes.Moon01.geometry}
material={gltf.materials["Material.011"]}
position={[0, -2, 0]}
rotation={[Math.PI / 2, 0, Math.PI]}
scale={0.055}
>
<T.PointLight position={[0, 0.4, 0]} color="#a2cbf5" intensity={0.15}
></T.PointLight>
<T.PointLight position={[-3, 0, 0.4]} color="#a2cbf5" intensity={0.05}
></T.PointLight>
<T.PointLight position={[0, -0.4, 0]} color="#a2cbf5" intensity={0.15}
></T.PointLight>
<T.DirectionalLight
position={[0, -0.5, 0]}
color="#a2cbf5"
intensity={$moonLightIntensitiy}
castShadow
></T.DirectionalLight>
</T.Mesh>
</T.Group>
<!-- /Sun -->
<T.Group scale={1} rotation.y={rotation}>
<!-- Earth -->

2
web/src/lib/components/footer.svelte
View File

@@ -2,7 +2,7 @@
import LogoTextLight from "./logo/logo_text_light.svelte";
</script>
<footer class="bg-primary text-white w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8 p-12 mt-12 rounded-t-3xl">
<footer class="bg-footer-background text-white w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8 p-12 mt-12 rounded-t-3xl">
<LogoTextLight></LogoTextLight>
<div>
<h5 class="font-semibold">Resources</h5>

22
web/src/lib/components/nav_bar.svelte
View File

@@ -5,6 +5,8 @@
import { tweened } from "svelte/motion";
import Dropdown from "./base/dropdown.svelte";
import { cubicOut } from "svelte/easing";
import { theme, toggleTheme } from "$lib/stores/theme_store";
import LogoTextLight from "./logo/logo_text_light.svelte";
const navBarItems = [
{ text: "Home", value: "/" },
@@ -49,16 +51,22 @@
</script>
<nav class="flex justify-between items-center p-6">
<a href="/" data-sveltekit-preload-data="tap"><LogoText></LogoText></a>
<a href="/" data-sveltekit-preload-data="tap">
{#if $theme == "light"}
<LogoText></LogoText>
{:else}
<LogoTextLight></LogoTextLight>
{/if}
</a>
{#if $currentUser}
<menu class="flex gap-8 relative py-1 px-2">
<div
class="absolute h-full w-16 bg-slate-400 rounded-xl opacity-20 top-0"
class="absolute h-full w-16 bg-menu-background rounded-xl top-0 z-0"
style="width: {$indicatorWidth}px; left: {$indicatorPosition}px"
></div>
{#each navBarItems as item}
<a
class="font-semibold"
class="font-semibold z-10"
on:click={(e) => setActiveItem(e.target)}
href={item.value}
data-sveltekit-preload-data="tap">{item.text}</a
@@ -66,6 +74,12 @@
{/each}
</menu>
<div class="flex gap-6 items-center">
<button
class="btn-icon fa-regular fa-{$theme === 'light'
? 'sun'
: 'moon'}"
on:click={() => toggleTheme()}
></button>
<a class="btn-primary btn-large" href="/trail/edit/new"
><i class="fa fa-plus mr-2"></i>New Trail</a
>
@@ -74,7 +88,7 @@
on:change={(e) => handleDropdownClick(e.detail)}
>
<img
class="w-12 h-h12 rounded-full"
class="rounded-full"
src="https://api.dicebear.com/7.x/initials/svg?seed={$currentUser.username}&backgroundType=gradientLinear"
alt=""
/>

15
web/src/lib/components/scene.svelte
View File

@@ -1,11 +1,20 @@
<script lang="ts">
import { theme } from "$lib/stores/theme_store";
import { T, useTask } from "@threlte/core";
import { tweened } from "svelte/motion";
import Earth from "./earth.svelte";
let rotation = 0;
useTask((delta) => {
rotation += delta/4;
rotation += delta / 4;
});
const ambientIntensitiy = tweened(1.2, {
duration: 500,
});
$: ambientColor = $theme == "light" ? "#ffffff" : "#4c7fe6";
$: ambientIntensitiy.set($theme == "light" ? 1.2 : 0);
</script>
<T.PerspectiveCamera
@@ -16,6 +25,6 @@
}}
/>
<T.AmbientLight color="#ffffff" intensity={1.1} />
<T.AmbientLight color={ambientColor} intensity={$ambientIntensitiy} />
<Earth rotation={rotation}></Earth>
<Earth {rotation}></Earth>

2
web/src/lib/components/trail/trail_card.svelte
View File

@@ -35,7 +35,7 @@
</script>
<div
class="trail-card rounded-2xl border sm:w-72 cursor-pointer"
class="trail-card rounded-2xl border border-input-border sm:w-72 cursor-pointer"
on:mouseenter
on:mouseleave
role="listitem"

3
web/src/lib/components/trail/trail_list_item.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import { goto } from "$app/navigation";
import type { Trail } from "$lib/models/trail";
import { trails_delete, trails_index } from "$lib/stores/trail_store";
import { currentUser } from "$lib/stores/user_store";
import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
@@ -29,7 +28,7 @@
</script>
<li
class="flex gap-8 p-4 rounded-xl border cursor-pointer hover:bg-gray-100 transition-colors"
class="flex gap-8 p-4 rounded-xl border border-input-border cursor-pointer hover:bg-secondary-hover transition-colors"
>
<div class="shrink-0">
<img