[FEAT] UI V3 — flotta: chrome top-nav + design system su 32 pagine app
Migrazione UI dal V2 (Bootstrap Italia, sidebar) al V3 (top-nav mega-menu navy/oro, Inter+Lucide self-host) fedele ai mockup docs/mockup Ui/. - 32 pagine app convertite (incl. admin/*): head Inter+v3.css, chrome topnav-v3, contenuti in card V3, dati REALI preservati (id/data-* intatti), i18n/help/FAB reali invariati, nessun CDN esterno. - v3.css: aggiunti widget condivisi (modal/toast/form/btn-variant/spinner/ progress/tag/badge) + utility (.btn base, .text-muted, .sr-only) + alias variabili V2->token V3, così modali/form/toast di common.js funzionano ovunque senza style.css. - maintenance.html: finestra estesa a ~12:15. - docs/UI_V3_FLEET_BRIEF.md: ricetta operativa della flotta. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
b0fc190704
commit
a4150b5389
+75
-53
@@ -3,52 +3,54 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Matrice RACI - NIS2 Agile</title>
|
||||
<link rel="stylesheet" href="/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
|
||||
<link rel="stylesheet" href="/css/style.css?v=20260618">
|
||||
<title>Matrice RACI · NIS2 Agile</title>
|
||||
<!-- UI V3: Inter self-host + design system v3.css. No external CDN, no Bootstrap Italia. -->
|
||||
<link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
|
||||
<link rel="stylesheet" href="/css/v3.css?v=20260627">
|
||||
<style>
|
||||
.raci-intro { background:#eff6ff; border-left:4px solid var(--primary,#2563eb); padding:14px 18px; border-radius:8px; margin-bottom:16px; font-size:.92rem; line-height:1.6; }
|
||||
.raci-note { font-size:.82rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px 12px; margin:0 0 18px; }
|
||||
/* V3+ page-specific (componenti non coperti da v3.css): tab interni, matrice RACI, link m2m. Token V3. */
|
||||
.raci-intro { background:#EFF4FB; border-left:4px solid var(--c-blue); padding:14px 18px; border-radius:10px; margin-bottom:14px; font-size:13.5px; line-height:1.6; color:var(--ink); }
|
||||
.raci-note { font-size:12.5px; color:#9A6418; background:#FBF1E2; border:1px solid #f3d9a8; border-radius:10px; padding:10px 12px; margin:0 0 18px; }
|
||||
.cmp-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
|
||||
.cmp-tab { flex:1 1 200px; min-width:160px; padding:10px 12px; border:1.5px solid var(--gray-200,#e5e7eb); border-radius:10px; background:#fff; cursor:pointer; font-size:.85rem; font-weight:600; text-align:center; }
|
||||
.cmp-tab.active { border-color:var(--primary,#2563eb); background:#eff6ff; color:var(--primary,#2563eb); }
|
||||
.cmp-tab { flex:1 1 200px; min-width:160px; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font:inherit; font-size:13px; font-weight:600; text-align:center; color:var(--ink); }
|
||||
.cmp-tab.active { border-color:var(--c-blue); background:#EFF4FB; color:var(--c-blue); }
|
||||
.cmp-panel { display:none; }
|
||||
.cmp-panel.active { display:block; }
|
||||
.cmp-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
|
||||
.cmp-toolbar select { padding:8px 10px; border:1px solid var(--gray-200,#e5e7eb); border-radius:8px; font-size:.88rem; }
|
||||
.cmp-empty { text-align:center; padding:34px 16px; color:var(--gray-500,#6b7280); }
|
||||
.gap-role-sub { font-size:.82rem; color:var(--gray-500,#6b7280); }
|
||||
.cmp-toolbar select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink); }
|
||||
.cmp-empty { text-align:center; padding:34px 16px; color:var(--muted); }
|
||||
.gap-role-sub { font-size:12px; color:var(--muted); }
|
||||
/* Matrice RACI */
|
||||
.raci-matrix-wrap { overflow-x:auto; border:1px solid var(--gray-200,#e5e7eb); border-radius:10px; }
|
||||
.raci-matrix { border-collapse:collapse; font-size:.84rem; min-width:100%; }
|
||||
.raci-matrix th, .raci-matrix td { padding:8px 10px; border-bottom:1px solid var(--gray-100,#f3f4f6); border-right:1px solid var(--gray-100,#f3f4f6); text-align:center; vertical-align:middle; }
|
||||
.raci-matrix thead th { background:var(--gray-50,#f9fafb); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500,#6b7280); position:sticky; top:0; }
|
||||
.raci-matrix-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:11px; }
|
||||
.raci-matrix { border-collapse:collapse; font-size:13px; min-width:100%; }
|
||||
.raci-matrix th, .raci-matrix td { padding:9px 11px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:center; vertical-align:middle; }
|
||||
.raci-matrix thead th { background:#FAFCFE; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; position:sticky; top:0; }
|
||||
.raci-matrix thead th.raci-grp { text-align:left; }
|
||||
.raci-matrix th.raci-rolehead { text-align:left; font-weight:700; color:var(--gray-700,#374151); background:#fff; position:sticky; left:0; z-index:2; min-width:180px; }
|
||||
.raci-matrix thead th.raci-corner { position:sticky; left:0; z-index:3; background:var(--gray-50,#f9fafb); text-align:left; }
|
||||
.raci-matrix th.raci-rolehead { text-align:left; font-weight:700; color:var(--ink); background:#fff; position:sticky; left:0; z-index:2; min-width:180px; }
|
||||
.raci-matrix thead th.raci-corner { position:sticky; left:0; z-index:3; background:#FAFCFE; text-align:left; }
|
||||
.raci-objhead { font-weight:600; min-width:130px; }
|
||||
.raci-objhead .raci-objtype { display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-400,#9ca3af); }
|
||||
.raci-cell-sel { width:100%; padding:5px 6px; border:1px solid var(--gray-200,#e5e7eb); border-radius:6px; font-size:.82rem; background:#fff; cursor:pointer; }
|
||||
.raci-cell-sel.has-r { background:#dcfce7; border-color:#86efac; color:#166534; font-weight:700; }
|
||||
.raci-cell-sel.has-a { background:#fee2e2; border-color:#fca5a5; color:#991b1b; font-weight:700; }
|
||||
.raci-cell-sel.has-c { background:#fef9c3; border-color:#fde047; color:#854d0e; font-weight:700; }
|
||||
.raci-cell-sel.has-i { background:#e0f2fe; border-color:#7dd3fc; color:#075985; font-weight:700; }
|
||||
.raci-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; margin:12px 2px 0; color:var(--gray-600,#4b5563); }
|
||||
.raci-objhead .raci-objtype { display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9aa8ba; }
|
||||
.raci-cell-sel { width:100%; padding:6px 7px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12.5px; background:#fff; color:var(--ink); cursor:pointer; }
|
||||
.raci-cell-sel.has-r { background:#E6F4EC; border-color:#86efac; color:#166534; font-weight:700; }
|
||||
.raci-cell-sel.has-a { background:#FBE9E9; border-color:#fca5a5; color:#991b1b; font-weight:700; }
|
||||
.raci-cell-sel.has-c { background:#FEF9C3; border-color:#fde047; color:#854d0e; font-weight:700; }
|
||||
.raci-cell-sel.has-i { background:#E0F2FE; border-color:#7dd3fc; color:#075985; font-weight:700; }
|
||||
.raci-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; margin:14px 2px 0; color:var(--muted); }
|
||||
.raci-legend span b { display:inline-block; width:18px; text-align:center; border-radius:4px; margin-right:4px; }
|
||||
.raci-legend .l-r b { background:#dcfce7; color:#166534; }
|
||||
.raci-legend .l-a b { background:#fee2e2; color:#991b1b; }
|
||||
.raci-legend .l-c b { background:#fef9c3; color:#854d0e; }
|
||||
.raci-legend .l-i b { background:#e0f2fe; color:#075985; }
|
||||
.raci-legend .l-r b { background:#E6F4EC; color:#166534; }
|
||||
.raci-legend .l-a b { background:#FBE9E9; color:#991b1b; }
|
||||
.raci-legend .l-c b { background:#FEF9C3; color:#854d0e; }
|
||||
.raci-legend .l-i b { background:#E0F2FE; color:#075985; }
|
||||
/* Link m2m */
|
||||
.raci-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; background:#f9fafb; border:1px solid var(--gray-100,#f3f4f6); border-radius:10px; padding:12px; margin-bottom:14px; }
|
||||
.raci-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; background:#FAFCFE; border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:14px; }
|
||||
.raci-inline .fld { display:flex; flex-direction:column; gap:3px; }
|
||||
.raci-inline .fld label { font-size:.72rem; font-weight:600; color:var(--gray-500,#6b7280); }
|
||||
.raci-inline select { padding:8px 10px; border:1px solid var(--gray-200,#e5e7eb); border-radius:8px; font-size:.88rem; min-width:200px; }
|
||||
.raci-linklist { width:100%; border-collapse:collapse; font-size:.88rem; }
|
||||
.raci-linklist th, .raci-linklist td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--gray-100,#f3f4f6); }
|
||||
.raci-linklist th { font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500,#6b7280); }
|
||||
.raci-linklist .btn { padding:4px 9px; font-size:.76rem; }
|
||||
.raci-arrow { color:var(--gray-400,#9ca3af); padding:0 6px; }
|
||||
.raci-inline .fld label { font-size:11px; font-weight:700; color:var(--muted); }
|
||||
.raci-inline select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink); min-width:200px; }
|
||||
.raci-linklist { width:100%; border-collapse:collapse; font-size:13.5px; }
|
||||
.raci-linklist th, .raci-linklist td { text-align:left; padding:10px 11px; border-bottom:1px solid var(--line); }
|
||||
.raci-linklist th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
|
||||
.raci-arrow { color:#9aa8ba; padding:0 6px; }
|
||||
.savehint { font-size:12px; color:var(--muted); }
|
||||
</style>
|
||||
<!-- PWA:start -->
|
||||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
@@ -65,17 +67,24 @@
|
||||
<!-- PWA:end -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar" id="sidebar"></aside>
|
||||
<main class="main-content">
|
||||
<header class="content-header">
|
||||
<h2 data-i18n="raci.title">Matrice RACI</h2>
|
||||
<div class="content-header-actions">
|
||||
<span class="savehint" id="raci-hint" role="status" aria-live="polite"></span>
|
||||
</div>
|
||||
</header>
|
||||
<div id="topnav"></div>
|
||||
|
||||
<div class="content-body">
|
||||
<main class="wrap">
|
||||
<nav class="crumb" aria-label="breadcrumb">
|
||||
<i data-lucide="home" class="ic"></i><a href="dashboard.html">Home</a>
|
||||
<i data-lucide="chevron-right" class="ic"></i><span>Struttura interna</span>
|
||||
<i data-lucide="chevron-right" class="ic"></i><span data-i18n="raci.title">Matrice RACI</span>
|
||||
</nav>
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h1 data-i18n="raci.title">Matrice RACI</h1>
|
||||
<p class="sub">Responsabilità R/A/C/I dei ruoli e collegamenti tra oggetti</p>
|
||||
</div>
|
||||
<span class="savehint" id="raci-hint" role="status" aria-live="polite"></span>
|
||||
</div>
|
||||
|
||||
<div class="stack">
|
||||
<section class="card card-pad">
|
||||
<div class="raci-intro">
|
||||
<strong>Matrice RACI & collegamenti.</strong>
|
||||
Collega i ruoli dell'organigramma agli oggetti del sistema (inventario, procedure, rischi, fornitori) assegnando le responsabilità <strong>R</strong>esponsible / <strong>A</strong>ccountable / <strong>C</strong>onsulted / <strong>I</strong>nformed. Gestisci inoltre i collegamenti molti-a-molti fra procedure, inventario, rischi e misure.
|
||||
@@ -123,20 +132,33 @@
|
||||
<label id="raci-blabel" for="raci-bside">Lato B</label>
|
||||
<select id="raci-bside"></select>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm" onclick="raciAddLink()">Aggiungi collegamento</button>
|
||||
<button class="btn-primary" onclick="raciAddLink()">Aggiungi collegamento</button>
|
||||
</div>
|
||||
<div id="raci-links"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Scripts V3. raci.js si auto-inizializza su DOMContentLoaded (checkAuth/loadSidebar/I18n/Help). -->
|
||||
<script src="/js/api.js?v=20260625d"></script>
|
||||
<script src="/js/common.js?v=20260624g"></script>
|
||||
<script src="/vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
|
||||
<script src="/js/common-bi.js?v=20260625d"></script>
|
||||
<script src="/js/common.js?v=20260627v3"></script>
|
||||
<script src="/vendor/lucide/lucide.min.js"></script>
|
||||
<script src="/js/topnav-v3.js?v=20260627"></script>
|
||||
<script src="/js/i18n.js?v=20260631"></script>
|
||||
<script src="/js/help.js?v=20260625d"></script>
|
||||
<script src="/js/raci.js?v=20260619"></script>
|
||||
<script src="/js/raci.js?v=20260627"></script>
|
||||
<script>
|
||||
function v3Icons() { if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} } }
|
||||
v3Icons();
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
v3Icons();
|
||||
var root = document.querySelector('main.wrap');
|
||||
if (root && window.MutationObserver) {
|
||||
var mo = new MutationObserver(function () { v3Icons(); });
|
||||
mo.observe(root, { childList: true, subtree: true });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user