sixside/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests 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>