marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ux: modernize admin invitations UI

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 09:35:02 +01:00
parent 2043026e63
commit b375a756c0
1 changed files with 17 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/pages/admin/invitations.astro
View file

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