fs
9a78a81af8
The first pass had admin/users sharing the address book profile partial, which surfaced Contact/Address/Organization/About tabs that ignored the admin-specific context. Separates the admin quick-view so it mirrors the edit-page tab structure while staying read-only. - `UserProfileViewService::buildAdminProfile()` extends the base profile with `admin_extras` (active, email_verified_at, last_login_at, last_login_provider, created, modified). - `templates/partials/app-admin-user-profile.phtml` is the admin-only render path: Master data · Organization · Security · About. Status badge under the name; timestamps locale-formatted. - `pages/admin/users/view-fragment($id).php` / `(none).phtml` switched to the admin service method + partial. - Drawer CSS aligns the aside with the main section's inline padding so the content strip does not visually step in/out. Address book is unchanged — still uses `buildProfile()` + the base partial. Two i18n keys added (`Login provider`). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
135 lines
3.4 KiB
CSS
135 lines
3.4 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;
|
|
/* Match the inline padding of `section > *` (from app-details.css) so the
|
|
aside block aligns visually with the main content above it. */
|
|
padding: calc(var(--app-spacing) * 1.5) calc(var(--app-spacing) * 2) 0;
|
|
margin-top: calc(var(--app-spacing) * 1.5);
|
|
}
|
|
}
|