bstein/bstein-dev-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'portal: restyle admin approvals' (#7) from feature/ariadne-integration-portal into master

Browse Source 
Reviewed-on: #7
This commit is contained in:
bstein 2026-01-21 22:25:48 +00:00
commit 58c60d2636
1 changed files with 67 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/views/AccountView.vue
View File

@ -352,19 +352,20 @@
<div v-if="!admin.loading && admin.requests.length === 0" class="muted">No pending requests.</div>
<div v-else class="requests">
<div class="req-head mono">
<span>User</span>
<span>Email</span>
<span>Note</span>
<span>Flags</span>
<span>Decision note</span>
<span></span>
</div>
<div v-for="req in admin.requests" :key="req.username" class="req-row">
<div class="req-summary">
<div class="req-label mono">User</div>
<div class="mono">{{ req.username }}</div>
<div class="req-label mono">Email</div>
<div class="mono">{{ req.email }}</div>
<div class="note">{{ req.note }}</div>
<div v-if="req.request_code" class="req-label mono">Request code</div>
<div v-if="req.request_code" class="mono">{{ req.request_code }}</div>
<div class="req-label mono">Note</div>
<div class="note">{{ req.note || "no note" }}</div>
</div>
<div class="req-flags">
<div class="req-label mono">Flags</div>
<div class="req-flag-grid">
<div v-if="admin.flagsLoading" class="muted">loading flags...</div>
<label v-for="flag in admin.flags" :key="flag" class="flag-pill">
<input
@ -377,7 +378,9 @@
</label>
<div v-if="!admin.flagsLoading && !admin.flags.length" class="muted">no flags</div>
</div>
</div>
<div class="req-note">
<div class="req-label mono">Decision note</div>
<input
v-model="admin.notes[req.username]"
class="input mono"
@ -387,6 +390,8 @@
/>
</div>
<div class="req-actions">
<div class="req-label mono">Decision</div>
<div class="req-action-stack">
<button class="primary" type="button" :disabled="admin.acting[req.username]" @click="approve(req.username)">
approve
</button>
@ -397,6 +402,7 @@
</div>
</div>
</div>
</div>
</section>
<section v-else class="card module">
@ -1065,46 +1071,45 @@ button.primary {
gap: 10px;
}
.req-head {
display: grid;
grid-template-columns: 140px 220px 1fr 220px 200px 140px;
gap: 12px;
color: var(--text-muted);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.req-row {
display: grid;
grid-template-columns: 140px 220px 1fr 220px 200px 140px;
gap: 12px;
align-items: center;
grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(140px, 0.6fr);
gap: 16px;
align-items: start;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.18);
border-radius: 14px;
padding: 10px 12px;
}
.note {
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.req-summary {
display: grid;
gap: 6px;
}
.req-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
.req-label {
color: var(--text-muted);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.req-flags {
display: grid;
gap: 8px;
align-content: start;
}
.req-flag-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.note {
color: var(--text-muted);
}
.flag-pill {
display: inline-flex;
align-items: center;
@ -1130,23 +1135,26 @@ button.primary {
padding: 8px 10px;
}
@media (max-width: 900px) {
.req-head {
display: none;
.req-actions {
display: grid;
gap: 8px;
align-content: start;
}
.req-action-stack {
display: grid;
gap: 8px;
}
@media (max-width: 900px) {
.req-row {
grid-template-columns: 1fr;
gap: 8px;
gap: 12px;
align-items: start;
}
.note {
white-space: normal;
}
.req-actions {
justify-content: flex-start;
}
}
</style>