mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ux: modernize admin roles UI
This commit is contained in:
parent
60df68b9dd
commit
9fa20b3cef
1 changed files with 21 additions and 63 deletions
|
|
@ -10,9 +10,11 @@ import { API_BASE } from '../../lib/api';
|
|||
<AdminNav currentPage="/admin/roles" />
|
||||
|
||||
<main class="admin-content">
|
||||
<header class="page-header">
|
||||
<h1>Role Management</h1>
|
||||
<p class="subtitle">Manage platform roles and permissions</p>
|
||||
<header class="ui-page-header">
|
||||
<div class="ui-page-title">
|
||||
<h1>Role Management</h1>
|
||||
<p class="ui-subtitle">Manage platform roles and permissions</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="roles-section">
|
||||
|
|
@ -38,51 +40,12 @@ import { API_BASE } from '../../lib/api';
|
|||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.admin-nav {
|
||||
width: 200px;
|
||||
background: var(--bg-secondary);
|
||||
padding: 1.5rem;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.admin-nav a {
|
||||
display: block;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-nav a:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.admin-nav a.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.roles-section, .permissions-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
|
@ -98,10 +61,6 @@ import { API_BASE } from '../../lib/api';
|
|||
}
|
||||
|
||||
.role-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.role-header {
|
||||
|
|
@ -132,16 +91,19 @@ import { API_BASE } from '../../lib/api';
|
|||
font-size: 0.7rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.role-badge.system {
|
||||
background: var(--accent-color);
|
||||
background: var(--color-primary);
|
||||
border-color: transparent;
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.role-description {
|
||||
color: var(--text-secondary);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
|
@ -155,10 +117,10 @@ import { API_BASE } from '../../lib/api';
|
|||
.perm-tag {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.permissions-grid {
|
||||
|
|
@ -168,17 +130,13 @@ import { API_BASE } from '../../lib/api';
|
|||
}
|
||||
|
||||
.permission-category {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.permission-category h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.9rem;
|
||||
text-transform: capitalize;
|
||||
color: var(--accent-color);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.permission-list {
|
||||
|
|
@ -193,13 +151,13 @@ import { API_BASE } from '../../lib/api';
|
|||
|
||||
.permission-item code {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -235,7 +193,7 @@ import { API_BASE } from '../../lib/api';
|
|||
const roles = await res.json();
|
||||
|
||||
container.innerHTML = roles.map(r => `
|
||||
<div class="role-card">
|
||||
<div class="role-card ui-card ui-card-soft ui-card-pad-md">
|
||||
<div class="role-header">
|
||||
<div class="role-name">
|
||||
${r.color ? `<span class="role-color" style="background: ${r.color}"></span>` : ''}
|
||||
|
|
@ -243,7 +201,7 @@ import { API_BASE } from '../../lib/api';
|
|||
${r.is_system ? '<span class="role-badge system">System</span>' : ''}
|
||||
${r.is_default ? '<span class="role-badge">Default</span>' : ''}
|
||||
</div>
|
||||
<span style="color: var(--text-secondary); font-size: 0.85rem">Priority: ${r.priority}</span>
|
||||
<span style="color: var(--color-text-muted); font-size: 0.85rem">Priority: ${r.priority}</span>
|
||||
</div>
|
||||
<p class="role-description">${r.description || 'No description'}</p>
|
||||
<div class="role-permissions">
|
||||
|
|
@ -284,7 +242,7 @@ import { API_BASE } from '../../lib/api';
|
|||
});
|
||||
|
||||
container.innerHTML = Object.entries(byCategory).map(([cat, perms]) => `
|
||||
<div class="permission-category">
|
||||
<div class="permission-category ui-card ui-card-soft ui-card-pad-md">
|
||||
<h4>${cat}</h4>
|
||||
<div class="permission-list">
|
||||
${perms.map(p => `
|
||||
|
|
|
|||
Loading…
Reference in a new issue