refactor(ui): replace modal dialogs with toast/sheet components
Remove DialogVant/NotifyVant and add Toast and Sheet components with useToast, useReveal, and usePageTransition composables. Rework Navigation, RegisterView, and styles across both apps; rebuild dist assets. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
148b99c4a6
commit
c05352d6fd
@@ -607,3 +607,50 @@ input:focus-visible {
|
||||
width: 100%;
|
||||
height: 40vh
|
||||
}
|
||||
|
||||
// Floating "island" bottom sheet: an ant Drawer (placement="bottom") that
|
||||
// sits inset from the screen edges with rounded corners all round, instead
|
||||
// of a full-width sheet glued to the bottom. Add `island-sheet` to the
|
||||
// Drawer's class. Global because the drawer is teleported to <body>, out of
|
||||
// reach of a view's scoped styles.
|
||||
.ant-drawer-bottom.island-sheet {
|
||||
--island-gap: 12px;
|
||||
|
||||
.ant-drawer-content-wrapper {
|
||||
left: var(--island-gap);
|
||||
right: var(--island-gap);
|
||||
bottom: calc(var(--island-gap) + env(safe-area-inset-bottom, 0px));
|
||||
width: auto !important;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
// Closed, ant parks the sheet at translateY(100%) inline — that would
|
||||
// leave the gap's worth of sheet peeking up, so push it fully off-screen.
|
||||
&:not(.ant-drawer-open) .ant-drawer-content-wrapper {
|
||||
transform: translateY(calc(100% + var(--island-gap) + 40px + env(safe-area-inset-bottom, 0px))) !important;
|
||||
}
|
||||
|
||||
&.ant-drawer-open .ant-drawer-content-wrapper {
|
||||
box-shadow:
|
||||
0 24px 48px -18px rgba(20, 22, 26, 0.35),
|
||||
0 2px 8px rgba(20, 22, 26, 0.08) !important;
|
||||
}
|
||||
|
||||
.ant-drawer-content {
|
||||
border-radius: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Grab handle, so it still reads as a sheet that can be pulled down.
|
||||
.ant-drawer-body::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 38px;
|
||||
height: 4px;
|
||||
margin: 10px auto 0;
|
||||
border-radius: 4px;
|
||||
background: @hairline;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user