mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-24 00:16:42 +02:00
refactor(ui): unified bottom-stack container for PillNav, QuickInput, TagStrip
Replace 4 independent position:fixed elements with one flex container that stacks them naturally from bottom to top. Elements push each other automatically — no more hardcoded offsets or z-index conflicts. Stack order (bottom → top): 1. PillNavigation (collapsible) 2. TagStrip (togglable) 3. QuickInputBar + toggle button row Shared-UI changes: - PillNavigation: add positioning='fixed'|'static' prop - QuickInputBar: add positioning='fixed'|'static' prop - TagStrip: add positioning='fixed'|'static' prop - All default to 'fixed' for backward compatibility Layout changes: - Wrap all bottom elements in .bottom-stack (position:fixed, flex-column) - Remove hardcoded bottomOffset calculations - Toggle button is now inline next to QuickInputBar (not separately positioned) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
bed2060ba5
commit
b415567dfa
4 changed files with 154 additions and 85 deletions
|
|
@ -228,6 +228,8 @@
|
|||
onToggleTheme?: () => void;
|
||||
/** Whether dark mode is active */
|
||||
isDark?: boolean;
|
||||
/** Use 'static' when inside a flex container (bottom-stack pattern). Default: 'fixed'. */
|
||||
positioning?: 'fixed' | 'static';
|
||||
/** Whether navigation is collapsed */
|
||||
isCollapsed?: boolean;
|
||||
/** Called when collapsed state changes */
|
||||
|
|
@ -318,6 +320,7 @@
|
|||
onLogout,
|
||||
onToggleTheme,
|
||||
isDark = false,
|
||||
positioning = 'fixed',
|
||||
isCollapsed: externalCollapsed,
|
||||
onCollapsedChange,
|
||||
languageItems = [],
|
||||
|
|
@ -403,6 +406,7 @@
|
|||
{#if !(externalCollapsed ?? false)}
|
||||
<nav
|
||||
class="pill-nav"
|
||||
class:pill-nav-static={positioning === 'static'}
|
||||
style="{primaryColor
|
||||
? `--pill-primary-color: ${primaryColor};`
|
||||
: ''}--pill-nav-bottom: {bottomOffset}"
|
||||
|
|
@ -828,6 +832,12 @@
|
|||
container-name: pillnav;
|
||||
}
|
||||
|
||||
.pill-nav-static {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.pill-nav-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@
|
|||
createHref?: string;
|
||||
/** Whether the filter strip below is visible (adjusts bottom position) */
|
||||
aboveFilterStrip?: boolean;
|
||||
/** Use 'static' when inside a flex container (bottom-stack pattern). Default: 'fixed'. */
|
||||
positioning?: 'fixed' | 'static';
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -48,6 +50,7 @@
|
|||
showCreateButton = true,
|
||||
createHref,
|
||||
aboveFilterStrip = false,
|
||||
positioning = 'fixed',
|
||||
}: Props = $props();
|
||||
|
||||
const resolvedCreateHref = $derived(createHref ?? managementHref + '?new=true');
|
||||
|
|
@ -63,7 +66,11 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="tag-strip-wrapper" class:above-filter-strip={aboveFilterStrip}>
|
||||
<div
|
||||
class="tag-strip-wrapper"
|
||||
class:above-filter-strip={aboveFilterStrip}
|
||||
class:tag-strip-static={positioning === 'static'}
|
||||
>
|
||||
<div class="tag-strip-container">
|
||||
<!-- Clear Filter Button (always rendered to prevent layout shift) -->
|
||||
<button
|
||||
|
|
@ -140,6 +147,12 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 49;
|
||||
}
|
||||
|
||||
.tag-strip-static {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
z-index: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue