mirror of
https://github.com/bretzel-app/crumbs.git
synced 2026-10-14 12:28:18 +02:00
feat: add floating action button for creating notes on mobile
Show a fixed FAB at bottom-right on mobile instead of the inline button that scrolls out of view. Desktop keeps the inline button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
448c2127d5
commit
b6150cafed
@@ -55,7 +55,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if filter === 'all' && !tag}
|
{#if filter === 'all' && !tag}
|
||||||
<div class="mx-auto mb-6 max-w-xl">
|
<div class="mx-auto mb-6 hidden max-w-xl md:block">
|
||||||
<button
|
<button
|
||||||
onclick={() => (showNewNote = true)}
|
onclick={() => (showNewNote = true)}
|
||||||
class="flex w-full items-center gap-3 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] px-4 py-3 text-left text-sm text-[var(--text-muted)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
|
class="flex w-full items-center gap-3 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] px-4 py-3 text-left text-sm text-[var(--text-muted)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
|
||||||
@@ -65,6 +65,14 @@
|
|||||||
Add a crumb...
|
Add a crumb...
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
onclick={() => (showNewNote = true)}
|
||||||
|
class="fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-sm border border-[var(--border)] bg-[var(--primary)] text-white shadow-[var(--card-shadow)] transition-colors hover:bg-[var(--primary-hover)] md:hidden"
|
||||||
|
aria-label="Add a crumb"
|
||||||
|
data-testid="new-note-fab"
|
||||||
|
>
|
||||||
|
<Plus class="h-5 w-5" />
|
||||||
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if filter === 'all'}
|
{#if filter === 'all'}
|
||||||
|
|||||||
Reference in New Issue
Block a user