proxmoxPanel/core
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): Service Worker WS, mode édition dashboard, sidebar click-to-toggle

Browse source 
- WebSocket via Service Worker (ws.sw.js) : connexions persistantes entre navigations
  Swup, reconnexion exponentielle, protocole WS_SUBSCRIBE/WS_UNSUBSCRIBE/WS_SEND
- WsProxy dans app.js : abstraction SW + fallback WebSocket direct
- proxmoxPage migré vers WsProxy (identique au dashboardPage)
- Dashboard : mode édition toggle — DnD, resize (x1/x2), masquer/afficher widget
  uniquement actifs en mode édition ; preview drag (is-dragging/drag-over)
- Sidebar : suppression bouton hamburger, clic sur sidebar-header pour replier
- pages.css : targets-grid 350px, styles edit mode, widget-size-2, drag preview
- neu.css : sidebar-header cursor pointer, suppression .sidebar-toggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
enzo 2026-03-21 19:09:58 +01:00
parent b6d6355c6c
commit cbfb20505d
11 changed files with 359 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

54
frontend/css/pages.css
View file

@ -196,7 +196,7 @@
.total-badge { font-size: .875rem; font-weight: 600; color: var(--neu-primary); }
.targets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1rem;
}
.target-card { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
@ -548,6 +548,58 @@
gap: .375rem;
}
/* Widget edit mode */
.widget-size-2 { grid-column: span 2; }
@media (max-width: 720px) { .widget-size-2 { grid-column: span 1; } }
.widget.is-dragging { opacity: 0.35; transform: scale(.97); }
.widget.drag-over { outline: 2px dashed var(--neu-primary); transform: scale(1.02); }
.widget-edit-bar {
display: flex;
align-items: center;
gap: .375rem;
padding: .25rem 0 .75rem;
border-bottom: 1px solid var(--neu-border);
margin-bottom: .75rem;
}
.widget-edit-bar-title { flex: 1; font-size: .75rem; font-weight: 600; color: var(--neu-text-muted); text-transform: uppercase; }
.edit-mode-banner {
display: flex;
align-items: center;
gap: .75rem;
padding: .625rem 1rem;
border-radius: var(--neu-radius-sm);
background: rgba(108, 142, 244, 0.1);
border: 1px solid var(--neu-primary);
margin-bottom: 1.25rem;
font-size: .875rem;
color: var(--neu-primary);
}
.edit-mode-banner i { font-size: 1.1rem; }
.widget-add-grid {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.5rem;
}
.widget-add-btn {
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem 1rem;
border-radius: var(--neu-radius-sm);
border: 1px dashed var(--neu-border);
background: transparent;
color: var(--neu-text-muted);
cursor: pointer;
font-size: .875rem;
transition: all .15s;
}
.widget-add-btn:hover { border-color: var(--neu-primary); color: var(--neu-primary); }
/* ── Profil / préférences ────────────────────────────────────────────────────── */
.settings-section {
margin-bottom: 1.25rem;