benoit/PTT-Live
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: harmonisation style admin avec app principale et suppression emojis

Browse Source 
Changements de style :
- Utilisation des variables CSS globales (--color-*, --spacing-*)
- Cohérence visuelle avec App.css et index.css
- Suppression emojis du header et boutons (🎛️ ⚠️ ✏️ 🗑️ ✕)
- Remplacement par texte simple ou symboles HTML (×)
- Boutons 'Modifier' et 'Supprimer' au lieu d'icônes

Design system unifié :
- Couleurs : var(--color-primary, --color-surface, etc.)
- Espacements : var(--spacing-xs à --spacing-xl)
- Typographie et transitions cohérentes
- Border radius, padding, hover states alignés

Interface plus professionnelle et accessible sans dépendance externe.
This commit is contained in:
Benoit
2026-05-24 22:25:39 +02:00
parent 8b05946632
commit 2bd0c27a71
2 changed files with 303 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/Admin.css
+297 -214
View File
@@ -1,16 +1,20 @@
/* Admin Interface Styles */ /* Admin Interface - Utilise les mêmes variables que l'app principale */
.admin-container { .admin-container {
min-height: 100vh; width: 100%;
background: #1a1a1a; height: 100vh;
color: #ffffff; display: flex;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; flex-direction: column;
background: var(--color-bg);
color: var(--color-text);
overflow: hidden;
} }
/* Header */
.admin-header { .admin-header {
background: #2a2a2a; background: var(--color-surface);
padding: 1rem 2rem; padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 2px solid #3a3a3a; border-bottom: 1px solid var(--color-border);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -19,71 +23,77 @@
.admin-header h1 { .admin-header h1 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600;
} }
.btn-back { .btn-back {
background: #444; background: var(--color-surface-hover);
color: white; color: var(--color-text-secondary);
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border-radius: 4px; border-radius: 6px;
text-decoration: none; text-decoration: none;
font-size: 0.9rem;
transition: background 0.2s; transition: background 0.2s;
} }
.btn-back:hover { .btn-back:hover {
background: #555; background: var(--color-border);
color: var(--color-text);
} }
/* Tabs */ /* Tabs */
.admin-tabs { .admin-tabs {
background: #2a2a2a; background: var(--color-surface);
padding: 0 2rem; padding: 0 var(--spacing-lg);
display: flex; display: flex;
gap: 1rem; gap: var(--spacing-sm);
border-bottom: 1px solid #3a3a3a; border-bottom: 1px solid var(--color-border);
overflow-x: auto;
} }
.admin-tabs button { .admin-tabs button {
background: none; background: none;
border: none; border: none;
color: #aaa; color: var(--color-text-secondary);
padding: 1rem 1.5rem; padding: var(--spacing-md) var(--spacing-lg);
cursor: pointer; cursor: pointer;
border-bottom: 3px solid transparent; border-bottom: 2px solid transparent;
transition: all 0.2s; transition: all 0.2s;
font-size: 1rem; font-size: 0.95rem;
white-space: nowrap;
} }
.admin-tabs button:hover { .admin-tabs button:hover {
color: #fff; color: var(--color-text);
background: #333; background: var(--color-surface-hover);
} }
.admin-tabs button.active { .admin-tabs button.active {
color: #4CAF50; color: var(--color-primary);
border-bottom-color: #4CAF50; border-bottom-color: var(--color-primary);
} }
/* Content */ /* Content */
.admin-content { .admin-content {
padding: 2rem; flex: 1;
max-width: 1400px; padding: var(--spacing-lg);
margin: 0 auto; overflow-y: auto;
} }
.admin-error { .admin-error {
background: #d32f2f; background: rgba(239, 68, 68, 0.1);
color: white; border: 1px solid var(--color-danger);
padding: 1rem; color: var(--color-danger);
border-radius: 4px; padding: var(--spacing-md);
margin-bottom: 1rem; border-radius: 8px;
margin-bottom: var(--spacing-lg);
} }
.empty-state { .empty-state {
text-align: center; text-align: center;
color: #666; color: var(--color-text-secondary);
padding: 3rem; padding: var(--spacing-xl);
font-size: 1.1rem; font-size: 1rem;
} }
/* Tab Headers */ /* Tab Headers */
@@ -91,249 +101,298 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: var(--spacing-lg);
} }
.tab-header h2 { .tab-header h2 {
margin: 0; margin: 0;
font-size: 1.5rem;
font-weight: 600;
} }
/* Buttons */ /* Buttons */
.btn-primary { .btn-primary {
background: #4CAF50; background: var(--color-primary);
color: white; color: white;
border: none; border: none;
padding: 0.75rem 1.5rem; padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 4px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 0.95rem;
font-weight: 500;
transition: background 0.2s; transition: background 0.2s;
} }
.btn-primary:hover { .btn-primary:hover {
background: #45a049; background: var(--color-primary-hover);
} }
.btn-secondary { .btn-secondary {
background: #666; background: var(--color-surface-hover);
color: white; color: var(--color-text-secondary);
border: none; border: none;
padding: 0.75rem 1.5rem; padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 4px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 0.95rem;
transition: background 0.2s; transition: background 0.2s;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #777; background: var(--color-border);
color: var(--color-text);
} }
.btn-small { .btn-small {
background: #4CAF50; background: var(--color-primary);
color: white; color: white;
border: none; border: none;
padding: 0.4rem 0.8rem; padding: var(--spacing-xs) var(--spacing-md);
border-radius: 4px; border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
}
.btn-danger {
background: #d32f2f;
color: white;
border: none;
padding: 0.4rem 0.8rem;
border-radius: 4px;
cursor: pointer;
}
.btn-danger-small {
background: #d32f2f;
color: white;
border: none;
padding: 0.3rem 0.6rem;
border-radius: 3px;
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
} }
.btn-edit { .btn-small:hover {
background: #2196F3; background: var(--color-primary-hover);
}
.btn-danger {
background: var(--color-danger);
color: white;
border: none; border: none;
padding: 0.4rem 0.6rem; padding: var(--spacing-xs) var(--spacing-md);
border-radius: 3px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 0.85rem;
}
.btn-danger:hover {
background: #dc2626;
}
.btn-danger-small {
background: var(--color-danger);
color: white;
border: none;
padding: 0.3rem var(--spacing-sm);
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
}
.btn-danger-small:hover {
background: #dc2626;
}
.btn-edit {
background: var(--color-primary);
color: white;
border: none;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
}
.btn-edit:hover {
background: var(--color-primary-hover);
} }
.btn-delete { .btn-delete {
background: #d32f2f; background: var(--color-danger);
color: white;
border: none; border: none;
padding: 0.4rem 0.6rem; padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 3px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 0.85rem;
}
.btn-delete:hover {
background: #dc2626;
} }
/* Groups */ /* Groups */
.groups-list { .groups-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem; gap: var(--spacing-lg);
margin-top: 2rem; margin-top: var(--spacing-lg);
} }
.group-card { .group-card {
background: #2a2a2a; background: var(--color-surface);
border: 1px solid #3a3a3a; border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 12px;
padding: 1.5rem; padding: var(--spacing-lg);
transition: border-color 0.2s;
}
.group-card:hover {
border-color: var(--color-primary);
} }
.group-header { .group-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
} }
.group-header h3 { .group-header h3 {
margin: 0 0 0.5rem 0; margin: 0;
font-size: 1.3rem; font-size: 1.25rem;
} font-weight: 600;
.group-id {
color: #888;
font-size: 0.9rem;
} }
.group-actions { .group-actions {
display: flex; display: flex;
gap: 0.5rem; gap: var(--spacing-sm);
}
.group-description {
color: #aaa;
margin: 0 0 1rem 0;
} }
.group-info { .group-info {
display: flex; display: flex;
gap: 1rem; gap: var(--spacing-lg);
color: #888; color: var(--color-text-secondary);
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
} }
.channels-list { .channels-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.channel-badge { .channel-badge {
background: #333; background: var(--color-surface-hover);
padding: 0.4rem 0.8rem; border: 1px solid var(--color-border);
border-radius: 12px; padding: var(--spacing-xs) var(--spacing-md);
border-radius: 6px;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-text-secondary);
} }
/* Group Form */ /* Group Form */
.group-form-container { .group-form-container {
background: #2a2a2a; background: var(--color-surface);
border: 2px solid #4CAF50; border: 1px solid var(--color-primary);
border-radius: 8px; border-radius: 12px;
padding: 2rem; padding: var(--spacing-xl);
margin-bottom: 2rem; margin-bottom: var(--spacing-lg);
} }
.group-form-container h3 { .group-form-container h3 {
margin-top: 0; margin: 0 0 var(--spacing-lg) 0;
font-size: 1.25rem;
font-weight: 600;
} }
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: var(--spacing-lg);
} }
.group-form-container label { .group-form-container label {
display: block; display: block;
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
color: var(--color-text-secondary);
font-size: 0.9rem;
font-weight: 500;
} }
.group-form-container label input, .group-form-container label input,
.group-form-container label select { .group-form-container label select {
display: block; display: block;
width: 100%; width: 100%;
margin-top: 0.5rem; margin-top: var(--spacing-sm);
padding: 0.6rem; padding: var(--spacing-md);
background: #1a1a1a; background: var(--color-bg);
border: 1px solid #444; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 8px;
color: white; color: var(--color-text);
font-size: 1rem; font-size: 1rem;
transition: border-color 0.2s;
}
.group-form-container label input:focus,
.group-form-container label select:focus {
outline: none;
border-color: var(--color-primary);
} }
.channels-section { .channels-section {
margin: 1.5rem 0; margin: var(--spacing-lg) 0;
} }
.channels-header { .channels-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
} }
.channels-header h4 { .channels-header h4 {
margin: 0; margin: 0;
font-size: 1rem;
font-weight: 600;
} }
.channel-item { .channel-item {
display: grid; display: grid;
grid-template-columns: 2fr 80px 80px 50px; grid-template-columns: 2fr 80px 80px 50px;
gap: 0.5rem; gap: var(--spacing-sm);
margin-bottom: 0.5rem; margin-bottom: var(--spacing-sm);
align-items: center; align-items: center;
} }
.channel-item input { .channel-item input {
padding: 0.5rem; padding: var(--spacing-sm);
background: #1a1a1a; background: var(--color-bg);
border: 1px solid #444; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 6px;
color: white; color: var(--color-text);
font-size: 0.9rem; font-size: 0.9rem;
transition: border-color 0.2s;
}
.channel-item input:focus {
outline: none;
border-color: var(--color-primary);
} }
.form-actions { .form-actions {
display: flex; display: flex;
gap: 1rem; gap: var(--spacing-md);
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
/* Users Table */ /* Users Table */
.users-table { .users-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: #2a2a2a; background: var(--color-surface);
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border);
} }
.users-table th { .users-table th {
background: #333; background: var(--color-surface-hover);
padding: 1rem; padding: var(--spacing-md);
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
border-bottom: 2px solid #444; font-size: 0.9rem;
color: var(--color-text-secondary);
border-bottom: 1px solid var(--color-border);
} }
.users-table td { .users-table td {
padding: 1rem; padding: var(--spacing-md);
border-bottom: 1px solid #333; border-bottom: 1px solid var(--color-border);
font-size: 0.9rem;
} }
.users-table tr:last-child td { .users-table tr:last-child td {
@@ -341,56 +400,60 @@
} }
.users-table tr:hover { .users-table tr:hover {
background: #333; background: var(--color-surface-hover);
} }
.group-badge { .group-badge {
background: #4CAF50; background: var(--color-primary);
color: white; color: white;
padding: 0.3rem 0.8rem; padding: 0.25rem var(--spacing-sm);
border-radius: 12px; border-radius: 4px;
font-size: 0.85rem; font-size: 0.8rem;
display: inline-block; display: inline-block;
font-weight: 500;
} }
/* Stats */ /* Stats */
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem; gap: var(--spacing-lg);
margin-bottom: 2rem; margin-bottom: var(--spacing-xl);
} }
.stat-card { .stat-card {
background: #2a2a2a; background: var(--color-surface);
border: 1px solid #3a3a3a; border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 12px;
padding: 1.5rem; padding: var(--spacing-lg);
text-align: center; text-align: center;
} }
.stat-card h3 { .stat-card h3 {
margin: 0 0 1rem 0; margin: 0 0 var(--spacing-md) 0;
font-size: 0.95rem; font-size: 0.9rem;
color: #aaa; color: var(--color-text-secondary);
font-weight: 500; font-weight: 500;
} }
.stat-value { .stat-value {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: bold; font-weight: 700;
color: #4CAF50; color: var(--color-primary);
} }
.audio-stats { .audio-stats {
background: #2a2a2a; background: var(--color-surface);
border-radius: 8px; border: 1px solid var(--color-border);
padding: 1.5rem; border-radius: 12px;
margin-top: 2rem; padding: var(--spacing-lg);
margin-top: var(--spacing-xl);
} }
.audio-stats h3 { .audio-stats h3 {
margin-top: 0; margin: 0 0 var(--spacing-lg) 0;
font-size: 1.25rem;
font-weight: 600;
} }
.stats-table { .stats-table {
@@ -399,92 +462,97 @@
} }
.stats-table th { .stats-table th {
background: #333; background: var(--color-surface-hover);
padding: 0.8rem; padding: var(--spacing-md);
text-align: left; text-align: left;
border-bottom: 2px solid #444; font-size: 0.9rem;
color: var(--color-text-secondary);
border-bottom: 1px solid var(--color-border);
} }
.stats-table td { .stats-table td {
padding: 0.8rem; padding: var(--spacing-md);
border-bottom: 1px solid #333; border-bottom: 1px solid var(--color-border);
vertical-align: top; vertical-align: top;
font-size: 0.9rem;
} }
.stats-table code { .stats-table code {
display: block; display: block;
background: #1a1a1a; background: var(--color-bg);
padding: 0.5rem; padding: var(--spacing-sm);
border-radius: 4px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.8rem;
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;
font-family: 'Monaco', 'Menlo', monospace;
} }
/* Logs */ /* Logs */
.logs-container { .logs-container {
background: #1a1a1a; background: var(--color-surface);
border: 1px solid #3a3a3a; border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 12px;
padding: 1rem; padding: var(--spacing-md);
max-height: 70vh; max-height: 70vh;
overflow-y: auto; overflow-y: auto;
font-family: 'Monaco', 'Menlo', monospace; font-family: 'Monaco', 'Menlo', monospace;
} }
.log-entry { .log-entry {
padding: 0.6rem; padding: var(--spacing-sm);
margin-bottom: 0.3rem; margin-bottom: var(--spacing-xs);
border-left: 3px solid #666; border-left: 3px solid var(--color-border);
background: #2a2a2a; background: var(--color-bg);
border-radius: 3px; border-radius: 4px;
display: grid; display: grid;
grid-template-columns: 180px 80px 1fr; grid-template-columns: 180px 80px 1fr;
gap: 1rem; gap: var(--spacing-md);
align-items: start; align-items: start;
font-size: 0.9rem;
}
.log-entry.log-debug {
border-left-color: #2196F3;
}
.log-entry.log-info {
border-left-color: #4CAF50;
}
.log-entry.log-warn {
border-left-color: #FF9800;
}
.log-entry.log-error {
border-left-color: #d32f2f;
}
.log-timestamp {
color: #888;
font-size: 0.85rem; font-size: 0.85rem;
} }
.log-entry.log-debug {
border-left-color: var(--color-primary);
}
.log-entry.log-info {
border-left-color: var(--color-success);
}
.log-entry.log-warn {
border-left-color: var(--color-warning);
}
.log-entry.log-error {
border-left-color: var(--color-danger);
}
.log-timestamp {
color: var(--color-text-secondary);
font-size: 0.8rem;
}
.log-level { .log-level {
font-weight: bold; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.75rem;
} }
.log-entry.log-debug .log-level { .log-entry.log-debug .log-level {
color: #2196F3; color: var(--color-primary);
} }
.log-entry.log-info .log-level { .log-entry.log-info .log-level {
color: #4CAF50; color: var(--color-success);
} }
.log-entry.log-warn .log-level { .log-entry.log-warn .log-level {
color: #FF9800; color: var(--color-warning);
} }
.log-entry.log-error .log-level { .log-entry.log-error .log-level {
color: #d32f2f; color: var(--color-danger);
} }
.log-message { .log-message {
@@ -493,19 +561,19 @@
.log-meta { .log-meta {
grid-column: 3; grid-column: 3;
background: #1a1a1a; background: var(--color-surface);
padding: 0.5rem; padding: var(--spacing-sm);
border-radius: 3px; border-radius: 4px;
font-size: 0.8rem; font-size: 0.75rem;
color: #888; color: var(--color-text-secondary);
display: block; display: block;
margin-top: 0.3rem; margin-top: var(--spacing-xs);
} }
/* Responsive */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.admin-content { .admin-content {
padding: 1rem; padding: var(--spacing-md);
} }
.groups-list { .groups-list {
@@ -526,7 +594,7 @@
.log-entry { .log-entry {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0.5rem; gap: var(--spacing-xs);
} }
.log-meta { .log-meta {
@@ -534,11 +602,26 @@
} }
.users-table { .users-table {
font-size: 0.85rem; font-size: 0.8rem;
} }
.users-table th, .users-table th,
.users-table td { .users-table td {
padding: 0.6rem; padding: var(--spacing-sm);
}
}
@media (max-width: 640px) {
.admin-header h1 {
font-size: 1.2rem;
}
.admin-tabs {
padding: 0 var(--spacing-md);
}
.admin-tabs button {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.85rem;
} }
} }
client/src/Admin.jsx
+6 -6
View File
@@ -232,8 +232,8 @@ function Admin() {
return ( return (
<div className="admin-container"> <div className="admin-container">
<header className="admin-header"> <header className="admin-header">
<h1>🎛️ PTT Live - Administration</h1> <h1>PTT Live - Administration</h1>
<a href="/" className="btn-back">← Retour client</a> <a href="/" className="btn-back">← Retour</a>
</header> </header>
<nav className="admin-tabs"> <nav className="admin-tabs">
@@ -266,7 +266,7 @@ function Admin() {
<main className="admin-content"> <main className="admin-content">
{error && ( {error && (
<div className="admin-error"> <div className="admin-error">
⚠️ {error} {error}
</div> </div>
)} )}
@@ -343,7 +343,7 @@ function Admin() {
min="0" min="0"
/> />
<button type="button" onClick={() => removeChannel(index)} className="btn-danger"> <button type="button" onClick={() => removeChannel(index)} className="btn-danger">
✕ ×
</button> </button>
</div> </div>
))} ))}
@@ -368,10 +368,10 @@ function Admin() {
<h3>{group.name}</h3> <h3>{group.name}</h3>
<div className="group-actions"> <div className="group-actions">
<button onClick={() => startEditGroup(group)} className="btn-edit"> <button onClick={() => startEditGroup(group)} className="btn-edit">
✏️ Modifier
</button> </button>
<button onClick={() => handleDeleteGroup(group.id)} className="btn-delete"> <button onClick={() => handleDeleteGroup(group.id)} className="btn-delete">
🗑️ Supprimer
</button> </button>
</div> </div>
</div> </div>