fs
811588290c
Introduces a reusable core detail-drawer primitive that slides in from the right and loads any view via a `*-fragment(none).phtml` endpoint. Bundles the address book list overhaul that is its first consumer. Core additions: - `app-detail-drawer.js` — generic drawer with stepper, focus trap, body scroll-lock, URL-hash deep-linking, session-expiry detection - `app-fragment-init.js` — auto-wires tabs/lookups/confirm/file-upload/ fslightbox inside injected HTML; consumers do not re-initialize components - `app-focus-trap.js` — shared focus-trap + refcounted scroll-lock, used by both filter-drawer and detail-drawer - `getHtml()` in `app-http.js` + `SessionExpiredError`; drawer reloads the page on auth redirect instead of rendering the login form in the panel - `DetailDrawerFragmentContractTest` enforces that every `initDetailDrawer` consumer ships matching `*-fragment($id).php` + `*-fragment(none).phtml` Address book list: - Grid collapses from 9 columns to 4 (identity / context / phone / actions) with a two-line identity cell (avatar + name + email) - Tenant register tabs above the grid using the `app-list-tabs` partial; tenant filter wired via hidden toolbar field so grid.js forwards it on every data fetch - Profile body extracted to a shared partial so the full-page view and the new drawer fragment share the same markup - New i18n keys for the drawer/list labels Also refactors `app-filter-drawer` to reuse the shared focus-trap and scroll-lock instead of maintaining its own copy, and documents the detail-drawer convention in CLAUDE.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
133 lines
3.2 KiB
CSS
133 lines
3.2 KiB
CSS
@layer components {
|
|
/* Detail drawer — slide-in overlay panel for row detail view. */
|
|
|
|
html.app-detail-drawer-open {
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
.app-detail-drawer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2050;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.app-detail-drawer[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.app-detail-drawer-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.3);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
opacity: 0;
|
|
transition: opacity 0.18s ease;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.app-detail-drawer.is-open .app-detail-drawer-backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
.app-detail-drawer-panel {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(720px, 100vw);
|
|
height: 100%;
|
|
background: var(--app-card-background-color, #fff);
|
|
border-left: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.35));
|
|
box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
|
|
transform: translateX(100%);
|
|
transition: transform 0.22s ease;
|
|
pointer-events: auto;
|
|
outline: none;
|
|
}
|
|
|
|
.app-detail-drawer.is-open .app-detail-drawer-panel {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.app-detail-drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.25));
|
|
background: var(--app-card-background-color, #fff);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.app-detail-drawer-stepper,
|
|
.app-detail-drawer-actions {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.app-detail-drawer-stepper[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.app-detail-drawer-header button,
|
|
.app-detail-drawer-header a {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.app-detail-drawer-body {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
padding: 1rem 1.25rem 2rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.app-detail-drawer-loading,
|
|
.app-detail-drawer-error {
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
color: var(--app-color-muted, #6b7280);
|
|
}
|
|
|
|
.app-detail-drawer-error {
|
|
color: var(--app-color-danger, #b91c1c);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.app-detail-drawer-panel {
|
|
width: 100vw;
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
/* Inside the drawer, force single-column layout for any .app-details-container
|
|
regardless of viewport width (the grid rule in app-details.css triggers on
|
|
viewport ≥968px, which is wrong for a 720px drawer). Any page that uses the
|
|
standard details container gets stacked main + aside automatically. */
|
|
.app-detail-drawer .app-details-container,
|
|
.app-detail-drawer .app-details-container:has(> aside) {
|
|
display: block;
|
|
grid-template-columns: none;
|
|
min-height: 0;
|
|
}
|
|
|
|
.app-detail-drawer .app-details-container > section {
|
|
width: 100%;
|
|
}
|
|
|
|
.app-detail-drawer .app-details-container > aside {
|
|
border-left: none;
|
|
border-top: 1px solid var(--app-border);
|
|
min-height: 0;
|
|
padding: calc(var(--app-spacing) * 1.5) 0 0;
|
|
margin-top: calc(var(--app-spacing) * 1.5);
|
|
}
|
|
}
|