ux: modernize admin invitations UI

This commit is contained in:
Marco Allegretti 2026-01-30 09:35:02 +01:00
parent 2043026e63
commit b375a756c0

View file

@ -9,16 +9,18 @@ import { API_BASE as apiBase } from '../../lib/api';
<div class="admin-container">
<AdminNav currentPage="/admin/invitations" />
<main class="admin-main">
<header class="admin-header">
<h1>Invitation Management</h1>
<p>Create and manage invitation codes for user registration</p>
<main class="admin-content">
<header class="ui-page-header">
<div class="ui-page-title">
<h1>Invitation Management</h1>
<p class="ui-subtitle">Create and manage invitation codes for user registration</p>
</div>
</header>
<section class="create-section">
<h2>Create Invitation</h2>
<form id="create-form" class="create-form">
<div class="form-row">
<form id="create-form" class="create-form ui-form ui-card ui-card-soft ui-card-pad-md">
<div class="form-grid">
<div class="form-group">
<label for="email">Email (optional)</label>
<input type="email" id="email" placeholder="Restrict to specific email" />
@ -32,7 +34,9 @@ import { API_BASE as apiBase } from '../../lib/api';
<input type="number" id="expires_hours" value="168" min="1" max="8760" />
</div>
</div>
<button type="submit" class="ui-btn ui-btn-primary">Create Invitation</button>
<div class="form-actions">
<button type="submit" class="ui-btn ui-btn-primary">Create Invitation</button>
</div>
</form>
</section>
@ -140,7 +144,7 @@ import { API_BASE as apiBase } from '../../lib/api';
}
container.innerHTML = data.map(inv => `
<div class="invitation-item ${inv.is_active ? '' : 'inactive'}" data-id="${inv.id}">
<div class="invitation-item ui-card ui-card-soft ui-card-pad-md ${inv.is_active ? '' : 'inactive'}" data-id="${inv.id}">
<div class="inv-main">
<code class="inv-code">${inv.code}</code>
<div class="inv-meta">
@ -214,26 +218,12 @@ import { API_BASE as apiBase } from '../../lib/api';
min-height: calc(100vh - 60px);
}
.admin-main {
.admin-content {
flex: 1;
padding: 2rem;
max-width: 1000px;
}
.admin-header {
margin-bottom: 2rem;
}
.admin-header h1 {
margin: 0 0 0.5rem;
font-size: 1.75rem;
}
.admin-header p {
color: var(--color-text-muted);
margin: 0;
}
.create-section, .list-section {
margin-bottom: 2rem;
}
@ -263,28 +253,17 @@ import { API_BASE as apiBase } from '../../lib/api';
cursor: pointer;
}
.create-form {
background: var(--color-surface);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid var(--color-border);
}
.form-row {
display: grid;
.create-form .form-grid {
grid-template-columns: 2fr 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
.create-form .form-group label {
font-size: 0.875rem;
font-weight: 500;
}
.form-group input {
.create-form .form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
@ -304,10 +283,6 @@ import { API_BASE as apiBase } from '../../lib/api';
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
}
.invitation-item.inactive {
@ -376,7 +351,7 @@ import { API_BASE as apiBase } from '../../lib/api';
flex-direction: column;
}
.form-row {
.create-form .form-grid {
grid-template-columns: 1fr;
}