diff --git a/src/views/account/CategoryView.vue b/src/views/account/CategoryView.vue index 489e14d..07174d9 100644 --- a/src/views/account/CategoryView.vue +++ b/src/views/account/CategoryView.vue @@ -143,8 +143,10 @@ onBeforeUnmount(() => sortable?.destroy()) - - +
+ + +

≡ 손잡이를 끌어 순서 변경. 각 행의 대분류를 바꾸면 소분류로 묶입니다.

@@ -153,15 +155,20 @@ onBeforeUnmount(() => sortable?.destroy())

@@ -231,11 +238,17 @@ button.danger { } .new-cat { display: flex; + flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } -.new-cat input { +.nc-line { + display: flex; + gap: 0.5rem; +} +.nc-line input { flex: 1; + min-width: 0; } .cat-list { list-style: none; @@ -244,12 +257,33 @@ button.danger { } .cat-row { display: flex; - gap: 0.5rem; - align-items: center; - padding: 0.4rem 0; + flex-direction: column; + gap: 0.35rem; + padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); background: var(--color-background); } +.cat-main { + display: flex; + gap: 0.4rem; + align-items: center; +} +.cat-parent { + display: flex; + align-items: center; + gap: 0.4rem; + padding-left: 1.4rem; + font-size: 0.8rem; + opacity: 0.85; +} +.cat-parent .pl { + flex: 0 0 auto; + opacity: 0.6; +} +.cat-parent .parent-sel { + flex: 1; + min-width: 0; +} .drag-handle { cursor: grab; user-select: none; @@ -265,12 +299,6 @@ button.danger { flex: 1; min-width: 0; } -.parent-sel { - max-width: 40%; -} -.new-cat .parent-sel { - flex: 0 0 auto; -} .cat-row.child { padding-left: 1.2rem; }