kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fe): exclude all footers - maximize screen real estate

Browse Source 
Changes:
  • PageLayout: .ks-page__footer { display: none; }
  • AppShellLayout: .ks-shell__footer { display: none; }
  • AGENTS.md: Enhanced footer policy (all levels excluded)

Policy: Single-screen principle
  ✓ NO page-level footers (PageLayout #footer)
  ✓ NO global footers (AppShellLayout footer)
  ✓ All controls → header/command-bar/summary
  ✓ Maximize content area (recover ~48-64px per page)
  ✓ Mobile-friendly (bottom footer = hard to reach)

Structure preserved (v-if, grid-areas) for backward compatibility.
CSS hiding allows future restoration if needed.

Reference: Session 2026-08-16, responsive design + content-first UX

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-16 00:24:59 +09:00
parent 2c934f866c
commit 2b4f043989
3 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+19 -10
View File
@@ -260,17 +260,21 @@ pnpm dev
5. **Grid layouts:** `align-items: start;` (NOT center/stretch) to prevent column stretching at different heights
6. **Max-width constraint:** Wrap pages in `.page-wrapper { max-width: var(--ks-content-max); margin: 0 auto; }` to prevent 2560px+ distortion
#### Page Structure Rule: NO Page Footers
**CRITICAL:** Footer sections must NOT exist in PageLayout. All footer functionality (buttons, status, actions) must be moved to:
- **Primary actions:** `<template #actions>` (header right side) — e.g., Help, AI Suggest
- **Command bar:** `<template #commandBar>` — e.g., Save, Reset, Approve buttons
- **Status info:** `<template #summary>` — e.g., Watermark, Owner, System status
#### Page Structure Rule: NO Footers (Global or Page-Level)
**CRITICAL:** Footers are EXCLUDED at all levels:
1. **Page-level footers** (PageLayout #footer slot) — ❌ FORBIDDEN
2. **Global footers** (AppShellLayout footer) — ❌ REMOVED
3. **All footer functionality** must be relocated to:
- **Primary actions:** `<template #actions>` (header right side) — e.g., Help, AI Suggest
- **Command bar:** `<template #commandBar>` — e.g., Save, Reset, Approve buttons
- **Status info:** `<template #summary>` — e.g., Watermark, Owner, System status
**Rationale:**
- Footers waste viewport space at bottom (max ~48px with padding)
- Single-screen principle: all interactive controls should be in view without scrolling
- Mobile UX: footer buttons are hard to reach (thumb-friendly buttons are top/sides)
- Information density: header/command-bar can convey status without extra rows
**Design Principle: Maximize Screen Real Estate**
- Footers waste ~48-64px of viewport height (non-recoverable on mobile)
- Single-screen principle: ALL controls must be visible without scrolling
- Mobile UX: bottom footer is hardest to reach (thumb-friendly zone = top 60%, sides)
- Information density: header/command-bar/summary can convey all necessary context
- Content-first: Every pixel should serve user goal, not chrome
**Example Migration:**
```vue
@@ -291,6 +295,11 @@ pnpm dev
</PageLayout>
```
**Implementation:**
- PageLayout: `<template #footer>` must be removed (do not use)
- AppShellLayout: Global footer completely removed
- All pages: Design with content ending at viewport edge (no footer gap)
#### Height Propagation Chain (Single-Screen Principle)
```
PageLayout (.ks-page__content)