Rephl3x/Magent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build 2602261442: tidy users and invite layouts

Browse Source
This commit is contained in:
Zak Bearman
2026-02-26 14:42:49 +13:00
parent ec408df2a1
commit 5dfe614d15
6 changed files with 887 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
frontend/app/globals.css
View File

@@ -4129,3 +4129,374 @@ button:hover:not(:disabled) {
flex-basis: 100%;
}
}
/* 1.3 UI layout cleanup: users + invite management */
.user-directory-control-grid {
display: grid;
grid-template-columns: 1.2fr minmax(320px, 0.8fr);
gap: 12px;
margin-top: 12px;
margin-bottom: 12px;
align-items: start;
}
.user-directory-search-panel,
.user-directory-bulk-panel {
display: grid;
gap: 10px;
}
.user-directory-panel-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.user-directory-panel-header h2 {
margin: 0;
font-size: 0.98rem;
letter-spacing: 0.01em;
}
.user-directory-panel-header .lede {
margin: 4px 0 0;
max-width: 46ch;
}
.user-directory-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
align-items: end;
}
.user-directory-search {
width: 100%;
}
.user-directory-search > label {
display: grid;
gap: 6px;
}
.user-directory-search input {
width: 100%;
}
.user-bulk-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.user-bulk-summary {
display: grid;
gap: 4px;
}
.user-bulk-summary strong {
font-size: 0.92rem;
}
.user-bulk-summary span {
color: #9ea7b6;
font-size: 0.82rem;
}
.user-bulk-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.user-directory-list {
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.015);
border-radius: 12px;
overflow: hidden;
}
.user-directory-header {
display: grid;
grid-template-columns: 1.3fr 1.35fr 1fr 1.05fr auto;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: #9ea7b6;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.user-directory-row {
display: grid;
grid-template-columns: 1.3fr 1.35fr 1fr 1.05fr auto;
gap: 10px;
align-items: center;
padding: 13px 14px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
color: inherit;
text-decoration: none;
transition: background-color 120ms ease, border-color 120ms ease;
}
.user-directory-row:first-of-type {
border-top: 0;
}
.user-directory-row:hover {
background: rgba(255, 255, 255, 0.03);
}
.user-directory-cell {
min-width: 0;
display: grid;
gap: 5px;
}
.user-directory-cell--identity .user-directory-title-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.user-directory-cell--identity strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-directory-subtext {
color: #98a1af;
font-size: 0.78rem;
line-height: 1.3;
}
.user-directory-pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.user-directory-stats-inline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 10px;
color: #b8c0cc;
font-size: 0.78rem;
}
.user-directory-stats-inline strong {
color: #eef2f7;
font-weight: 700;
}
.user-directory-row-chevron {
color: #a9b2c2;
font-size: 0.76rem;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 999px;
padding: 4px 10px;
white-space: nowrap;
}
.user-detail-page-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
gap: 14px;
align-items: start;
}
.user-detail-main-column,
.user-detail-side-column {
display: grid;
gap: 14px;
}
.user-detail-panel {
display: grid;
gap: 12px;
}
.user-detail-panel-header {
display: grid;
gap: 6px;
}
.user-detail-panel-header h2 {
margin: 0;
font-size: 0.98rem;
}
.user-detail-panel-header .lede {
margin: 0;
}
.user-detail-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.user-detail-meta-item {
display: grid;
gap: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.015);
border-radius: 10px;
padding: 10px 11px;
}
.user-detail-meta-item .label {
color: #9ea7b6;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.user-detail-meta-item strong {
font-size: 0.9rem;
color: #e7ebf1;
line-height: 1.3;
overflow-wrap: anywhere;
}
.user-detail-control-stack {
display: grid;
gap: 8px;
}
.user-detail-control-stack .toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.015);
}
.user-detail-control-stack > button {
justify-self: start;
}
.user-detail-grid {
gap: 10px;
}
.user-detail-stat {
border-radius: 10px;
}
.invite-admin-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.invite-admin-summary-tile {
min-height: 96px;
}
.admin-segmented {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
margin-bottom: 12px;
}
.admin-segmented button {
border: 1px solid transparent;
background: transparent;
color: #b6bfcb;
padding: 8px 12px;
border-radius: 9px;
font-size: 0.84rem;
font-weight: 600;
}
.admin-segmented button:hover {
background: rgba(255, 255, 255, 0.03);
color: #e3e8ef;
}
.admin-segmented button.is-active {
background: rgba(96, 132, 179, 0.14);
border-color: rgba(96, 132, 179, 0.25);
color: #e7eef9;
}
.invite-admin-bulk-grid {
grid-template-columns: minmax(360px, 1.2fr) minmax(300px, 0.8fr);
}
.admin-panel > h2 + .lede {
margin-top: -2px;
}
@media (max-width: 1180px) {
.user-directory-control-grid {
grid-template-columns: 1fr;
}
.user-detail-page-grid {
grid-template-columns: 1fr;
}
.invite-admin-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.invite-admin-bulk-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.user-bulk-toolbar {
grid-template-columns: 1fr;
align-items: stretch;
}
.user-bulk-actions {
justify-content: flex-start;
}
.user-directory-header {
display: none;
}
.user-directory-row {
grid-template-columns: 1fr;
gap: 8px;
align-items: start;
}
.user-directory-cell {
gap: 6px;
}
.user-directory-row-chevron {
justify-self: start;
}
.user-detail-meta-grid {
grid-template-columns: 1fr;
}
.invite-admin-summary-grid {
grid-template-columns: 1fr;
}
}