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

style(fe): centralize filter input standardization in PageLayout

Browse Source 
PageLayout now provides default styles for all filter inputs:
- Height: 34px
- Padding: 0 0.75rem
- Line-height: 34px
- Border-radius: 4px
- Box-sizing: border-box

This eliminates the need for each page to redefine input styles.
Individual pages now only override width constraints (search-input max-width).

Aligns with DRY principle - single source of truth for input styling.

DataQualityPage:
- Added scoped styles for search-input max-width (350px)

Future: Consider extracting filter inputs into dedicated components
(<KsFilterInput>, <KsFilterSelect>) for even better reusability.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-15 23:15:51 +09:00
parent 4ec9af9b7c
commit 1e48b4987d
2 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/ui/layouts/PageLayout.vue
+13
View File
@@ -93,6 +93,19 @@ const showHelp = ref(false)
border: 1px solid var(--ks-color-border);
border-radius: var(--ks-radius-sm);
}
.ks-page__filters input,
.ks-page__filters select {
height: 34px;
padding: 0 0.75rem;
border: 1px solid var(--ks-color-border);
border-radius: 4px;
background-color: var(--ks-color-surface);
color: var(--ks-color-text);
font-size: 13px;
line-height: 34px;
box-sizing: border-box;
font-family: inherit;
}
.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; }