mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ux: modernize admin invitations UI
This commit is contained in:
parent
2043026e63
commit
b375a756c0
1 changed files with 17 additions and 42 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue