golem15/summercms
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(quick-261016-0fm): bottom save bars no longer cover the sidebar

Browse Source 
AppShell exposes --shell-offset (the rail, plus the section panel when it
shows); the form, settings, My account and preview save bars start there,
so the rail's Settings item stays visible and clickable.
This commit is contained in:
Jakub Zych
2026-10-16 11:41:19 +02:00
parent 5244a37b00
commit 85e52d9336
5 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
admin/src/components/shell/AppShell.vue
View File

@@ -27,10 +27,17 @@ onBeforeUnmount(stopViewport)
const siteURL = `${window.location.origin}/`
const active = computed(() => activeEntry(String(route.params.vendor ?? ''), String(route.params.plugin ?? '')))
// --shell-offset is the width the sidebar occupies (the rail, plus the
// section panel when it shows). Fixed bottom save bars start there, so the
// rail's Settings item is never covered.
const shellOffset = computed(() =>
active.value && !collapsed.value ? 'calc(var(--spacing-rail) + var(--spacing-panel))' : 'var(--spacing-rail)',
)
</script>
<template>
<div class="flex min-h-screen bg-bg text-text">
<div class="flex min-h-screen bg-bg text-text" :style="{ '--shell-offset': shellOffset }">
<PluginRail />
<SectionPanel v-if="active && !collapsed" :entry="active" />
<div class="flex min-w-0 flex-1 flex-col">

2
admin/src/views/AccountView.vue
View File

@@ -422,7 +422,7 @@ async function onSave(): Promise<void> {
/>
<footer
class="fixed inset-x-0 bottom-0 z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5"
class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5"
>
<Button variant="primary" data-action="save" :disabled="busy" @click="onSave">
{{ busy ? t('backend::lang.form.saving') : t('backend::lang.form.save') }}

2
admin/src/views/FormView.vue
View File

@@ -593,7 +593,7 @@ void load()
</template>
<footer
class="fixed inset-x-0 bottom-0 z-30 flex items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
>
<Button
v-if="mode === 'update' && !singleton"

2
admin/src/views/PreviewView.vue
View File

@@ -282,7 +282,7 @@ void load()
</template>
<footer
class="fixed inset-x-0 bottom-0 z-30 flex flex-wrap items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex flex-wrap items-center gap-2.5 border-t border-border bg-surface px-8 py-3.5"
>
<div class="ml-auto flex flex-wrap items-center gap-2.5">
<RecordActions

2
admin/src/views/SettingsFormView.vue
View File

@@ -219,7 +219,7 @@ void load()
</form>
</template>
<footer class="fixed inset-x-0 bottom-0 z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5">
<footer class="fixed right-0 bottom-0 left-[var(--shell-offset,0px)] z-30 flex items-center justify-end gap-2.5 border-t border-border bg-surface px-8 py-3.5">
<Button variant="ghost" to="/settings">{{ t('backend::lang.form.cancel') }}</Button>
<Button variant="primary" data-action="save" :disabled="busy || loading || !schema" @click="onSave">
{{ busy ? t('backend::lang.form.saving') : t('backend::lang.form.save') }}