From 17bb6ed72d9aeb683b1f5d35b6d7f441fc9b27e9 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sun, 16 Aug 2026 00:25:25 +0900 Subject: [PATCH] refactor(fe): centralize footer exclusion to base.css - single source of truth MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changes: • base.css: Add global footer hiding rule (applies to all .ks-page__footer, .ks-shell__footer, footer[class*=ks-]) • PageLayout: Remove individual footer CSS (use global rule) • AppShellLayout: Remove individual footer CSS (use global rule) Benefits: ✓ Single source of truth (base.css) ✓ Easier to maintain and update globally ✓ Consistent behavior across all layouts ✓ Can enable/disable with one change if needed ✓ Structure preserved (v-if, grid-areas intact) Design principle: Single-screen + content-first • All controls in header/command-bar/summary • Recover ~48-64px per page for content • Mobile-friendly (no hard-to-reach footer) Co-Authored-By: Claude Haiku 4.5 --- frontend/src/design-system/base.css | 9 +++++++++ frontend/src/shared/ui/layouts/AppShellLayout.vue | 1 - frontend/src/shared/ui/layouts/PageLayout.vue | 1 - 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/design-system/base.css b/frontend/src/design-system/base.css index 115eabef..bf4947ab 100644 --- a/frontend/src/design-system/base.css +++ b/frontend/src/design-system/base.css @@ -122,3 +122,12 @@ button, .p-button, .ks-button { .p-dialog-footer, .ks-dialog__footer { padding: var(--ks-space-3) var(--ks-space-4) !important; } + +/* Global Footer Exclusion: Single-Screen Principle */ +/* All footers hidden (both page-level and global) to maximize content area */ +/* Structure preserved for backward compatibility; CSS hiding only */ +.ks-page__footer, +.ks-shell__footer, +footer[class*="ks-"] { + display: none !important; /* Maximize viewport for content; all controls → header/command-bar/summary */ +} diff --git a/frontend/src/shared/ui/layouts/AppShellLayout.vue b/frontend/src/shared/ui/layouts/AppShellLayout.vue index e8299a92..9fa3449d 100644 --- a/frontend/src/shared/ui/layouts/AppShellLayout.vue +++ b/frontend/src/shared/ui/layouts/AppShellLayout.vue @@ -22,7 +22,6 @@ const appVersion = import.meta.env.VITE_APP_VERSION ?? '0.1.0' .ks-shell__boundary { padding: var(--ks-space-2) var(--ks-space-3); border: 1px solid #fbbf24; border-radius: var(--ks-radius-sm); color: #fef3c7; } .ks-shell__nav { grid-area: nav; padding: var(--ks-space-4); border-right: 1px solid var(--ks-color-border); background: var(--ks-color-surface); } .ks-shell__main { grid-area: main; min-width: 0; padding: var(--ks-space-6); } -.ks-shell__footer { display: none; /* Footer excluded: maximize content area */ } .ks-skip { position: fixed; left: var(--ks-space-2); top: -4rem; z-index: 1000; padding: var(--ks-space-2); background: var(--ks-color-surface); } .ks-skip:focus { top: var(--ks-space-2); } @media (max-width: 1100px) { .ks-shell { grid-template-columns: 1fr; grid-template-areas: 'header' 'nav' 'main' 'footer'; } .ks-shell__header { align-items: flex-start; flex-direction: column; } .ks-shell__nav { border-right: 0; border-bottom: 1px solid var(--ks-color-neutral-200); } } diff --git a/frontend/src/shared/ui/layouts/PageLayout.vue b/frontend/src/shared/ui/layouts/PageLayout.vue index d60cf45b..6896825e 100644 --- a/frontend/src/shared/ui/layouts/PageLayout.vue +++ b/frontend/src/shared/ui/layouts/PageLayout.vue @@ -109,6 +109,5 @@ const showHelp = ref(false) .ks-page__workspace { min-width: 0; flex: 1; display: grid; min-height: 0; gap: var(--ks-space-4); } .ks-page__workspace.has-aside { grid-template-columns: minmax(0, 1fr) var(--ks-aside-width); } .ks-page__content, .ks-page__aside { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; } -.ks-page__footer { display: none; /* Footer excluded: all controls → header/command-bar/summary */ } @media (max-width: 1100px) { .ks-page__workspace.has-aside { grid-template-columns: 1fr; } }