coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Work on mobile layout

Browse Source
This commit is contained in:
Jon Staab
2024-10-09 14:19:27 -07:00
parent 6ef291d755
commit 05b320cd98
16 changed files with 213 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/CardButton.svelte
+14 -13
View File
@@ -1,19 +1,20 @@
<script lang="ts">
import cx from "classnames"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
export let icon
export let title
</script>
<Button on:click class={cx($$props.class, "btn btn-neutral btn-lg h-24 text-left")}>
<div class="flex flex-grow items-center gap-6 py-4">
<Icon class="bg-accent" size={7} {icon} />
<div class="flex flex-grow flex-col gap-1">
<p class="text-bold">{title}</p>
<p class="text-xs"><slot /></p>
<div class="btn btn-neutral btn-lg h-24 text-left w-full">
<div class="flex gap-6 flex-row justify-between items-center w-full {$$props.class}">
<div class="flex gap-6 items-center">
<div class="w-12 center">
<slot name="icon" />
</div>
<div class="flex flex-grow flex-col gap-1">
<p class="text-bold"><slot name="title" /></p>
<p class="text-xs"><slot name="info" /></p>
</div>
</div>
<div class="w-12 center">
<Icon size={7} icon="alt-arrow-right" />
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
</Button>
</div>
src/lib/components/Page.svelte
+1 -1
View File
@@ -1,3 +1,3 @@
<div class="max-h-screen flex-grow overflow-auto bg-base-200">
<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-12 sm:pb-0">
<slot />
</div>
src/lib/components/PrimaryNavItem.svelte
+7 -2
View File
@@ -1,14 +1,18 @@
<script lang="ts">
import {page} from '$app/stores'
import Button from "@lib/components/Button.svelte"
export let title = ""
export let href = ""
$: active = href && $page.route?.id?.startsWith(href)
</script>
{#if href}
<a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
class="avatar cursor-pointer rounded-full p-1 {$$props.class} hover:bg-base-300 transition-colors"
class:bg-base-300={active}
class:tooltip={title}
data-tip={title}>
<slot />
@@ -17,7 +21,8 @@
{:else}
<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
class="avatar cursor-pointer rounded-full p-1 {$$props.class} hover:bg-base-300 transition-colors"
class:bg-base-300={active}
class:tooltip={title}
data-tip={title}>
<slot />