fix: 手机编辑配方 overlay 合适宽度 + 屏蔽 tab 滑动
All checks were successful
Test / unit-test (push) Successful in 7s
Test / build-check (push) Successful in 4s
PR Preview / teardown-preview (pull_request) Has been skipped
Test / e2e-test (push) Successful in 3m1s
PR Preview / test (pull_request) Successful in 6s
PR Preview / deploy-preview (pull_request) Successful in 17s
All checks were successful
Test / unit-test (push) Successful in 7s
Test / build-check (push) Successful in 4s
PR Preview / teardown-preview (pull_request) Has been skipped
Test / e2e-test (push) Successful in 3m1s
PR Preview / test (pull_request) Successful in 6s
PR Preview / deploy-preview (pull_request) Successful in 17s
移动端下 .overlay-panel 内边距从 24px 缩小到 16px,配合标题 字号、容器外边距和 ratio 提示换行调整,使编辑配方弹层在手机 上视觉更紧凑。 另外把 .overlay 加入 onSwipeEnd 的 modal 选择器,编辑弹层 打开时不再被左右滑动误触切换 tab。
This commit is contained in:
@@ -196,7 +196,7 @@ function onSwipeEnd() {
|
|||||||
// Carousel area excluded
|
// Carousel area excluded
|
||||||
if (swipeStartTarget.value?.closest?.('[data-no-tab-swipe]')) return
|
if (swipeStartTarget.value?.closest?.('[data-no-tab-swipe]')) return
|
||||||
// Skip when modal/overlay is open
|
// Skip when modal/overlay is open
|
||||||
if (document.querySelector('.modal-overlay, .detail-overlay, .dialog-overlay')) return
|
if (document.querySelector('.modal-overlay, .detail-overlay, .dialog-overlay, .overlay')) return
|
||||||
|
|
||||||
const tabs = visibleTabs.value.map(t => t.key)
|
const tabs = visibleTabs.value.map(t => t.key)
|
||||||
const currentIdx = tabs.indexOf(ui.currentSection)
|
const currentIdx = tabs.indexOf(ui.currentSection)
|
||||||
|
|||||||
@@ -2483,5 +2483,22 @@ watch(() => recipeStore.recipes, () => {
|
|||||||
.manage-toolbar {
|
.manage-toolbar {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
.overlay-panel {
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
max-height: calc(100vh - 32px);
|
||||||
|
}
|
||||||
|
.overlay-header {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.overlay-header h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.ratio-hint {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.editor-section {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user