Refactor risk management application with enhanced localization, user authentication, and UI improvements
- Added verbose names for Incident and ResidualRisk models for better clarity in admin interface.
- Updated impact choices for ResidualRisk and Risk models to ensure consistency and clarity.
- Implemented gettext_lazy for translatable strings in models and choices.
- Enhanced the Risk, ResidualRisk, Control, AuditLog, and Incident models with Meta options for better admin representation.
- Added login required decorators to views for improved security.
- Introduced new CSS variables and classes for better visual representation of risk levels.
- Created custom template tags for dynamic CSS class assignment based on risk likelihood and impact.
- Improved dashboard and statistics views with user authentication checks.
- Updated templates for risks, controls, incidents, and admin interface to include edit and delete options for staff users.
- Added new login and logout templates for user authentication.
- Enhanced list views for risks, controls, and incidents to include action buttons for staff users.
- Improved overall UI/UX with Bulma CSS framework for a more modern look and feel.
2025-09-09 14:25:59 +02:00
|
|
|
/* Base palette */
|
|
|
|
|
:root{
|
|
|
|
|
--c-verylow:#22c55e; --c-verylow-100:#dcfce7; --c-verylow-300:#86efac; --c-verylow-inv:#fff;
|
|
|
|
|
--c-low:#84cc16; --c-low-100:#ecfccb; --c-low-300:#bef264; --c-low-inv:#111;
|
|
|
|
|
--c-mid:#eab308; --c-mid-100:#fef9c3; --c-mid-300:#fde047; --c-mid-inv:#111;
|
|
|
|
|
--c-high:#f97316; --c-high-100:#ffedd5; --c-high-300:#fbbf24; --c-high-inv:#111;
|
|
|
|
|
--c-veryhigh:#dc2626; --c-veryhigh-100:#fee2e2;--c-veryhigh-300:#fca5a5; --c-veryhigh-inv:#fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Helpers (wie Bulma) */
|
|
|
|
|
.has-text-control-verylow{color:var(--c-verylow)!important}
|
|
|
|
|
.has-text-control-low{color:var(--c-low)!important}
|
|
|
|
|
.has-text-control-mid{color:var(--c-mid)!important}
|
|
|
|
|
.has-text-control-high{color:var(--c-high)!important}
|
|
|
|
|
.has-text-control-veryhigh{color:var(--c-veryhigh)!important}
|
|
|
|
|
|
|
|
|
|
.has-background-control-verylow{background:var(--c-verylow)!important;color:var(--c-verylow-inv)!important}
|
|
|
|
|
.has-background-control-low{background:var(--c-low)!important;color:var(--c-low-inv)!important}
|
|
|
|
|
.has-background-control-mid{background:var(--c-mid)!important;color:var(--c-mid-inv)!important}
|
|
|
|
|
.has-background-control-high{background:var(--c-high)!important;color:var(--c-high-inv)!important}
|
|
|
|
|
.has-background-control-veryhigh{background:var(--c-veryhigh)!important;color:var(--c-veryhigh-inv)!important}
|
|
|
|
|
|
|
|
|
|
/* Buttons */
|
|
|
|
|
.button.is-control-verylow{background:var(--c-verylow);border-color:transparent;color:var(--c-verylow-inv)}
|
|
|
|
|
.button.is-control-low{background:var(--c-low);border-color:transparent;color:var(--c-low-inv)}
|
|
|
|
|
.button.is-control-mid{background:var(--c-mid);border-color:transparent;color:var(--c-mid-inv)}
|
|
|
|
|
.button.is-control-high{background:var(--c-high);border-color:transparent;color:var(--c-high-inv)}
|
|
|
|
|
.button.is-control-veryhigh{background:var(--c-veryhigh);border-color:transparent;color:var(--c-veryhigh-inv)}
|
|
|
|
|
.button.is-control-verylow:hover{filter:brightness(.92)}
|
|
|
|
|
.button.is-control-low:hover{filter:brightness(.92)}
|
|
|
|
|
.button.is-control-mid:hover{filter:brightness(.92)}
|
|
|
|
|
.button.is-control-high:hover{filter:brightness(.92)}
|
|
|
|
|
.button.is-control-veryhigh:hover{filter:brightness(.92)}
|
|
|
|
|
.button.is-control-verylow.is-light{background:var(--c-verylow-100);color:var(--c-verylow)}
|
|
|
|
|
.button.is-control-low.is-light{background:var(--c-low-100);color:var(--c-low)}
|
|
|
|
|
.button.is-control-mid.is-light{background:var(--c-mid-100);color:var(--c-mid)}
|
|
|
|
|
.button.is-control-high.is-light{background:var(--c-high-100);color:var(--c-high)}
|
|
|
|
|
.button.is-control-veryhigh.is-light{background:var(--c-veryhigh-100);color:var(--c-veryhigh)}
|
|
|
|
|
|
|
|
|
|
/* Tags */
|
|
|
|
|
.tag.is-control-verylow{background:var(--c-verylow);color:var(--c-verylow-inv)}
|
|
|
|
|
.tag.is-control-low{background:var(--c-low);color:var(--c-low-inv)}
|
|
|
|
|
.tag.is-control-mid{background:var(--c-mid);color:var(--c-mid-inv)}
|
|
|
|
|
.tag.is-control-high{background:var(--c-high);color:var(--c-high-inv)}
|
|
|
|
|
.tag.is-control-veryhigh{background:var(--c-veryhigh);color:var(--c-veryhigh-inv)}
|
|
|
|
|
.tag.is-control-verylow.is-light{background:var(--c-verylow-100);color:var(--c-verylow)}
|
|
|
|
|
.tag.is-control-low.is-light{background:var(--c-low-100);color:var(--c-low)}
|
|
|
|
|
.tag.is-control-mid.is-light{background:var(--c-mid-100);color:var(--c-mid)}
|
|
|
|
|
.tag.is-control-high.is-light{background:var(--c-high-100);color:var(--c-high)}
|
|
|
|
|
.tag.is-control-veryhigh.is-light{background:var(--c-veryhigh-100);color:var(--c-veryhigh)}
|
|
|
|
|
|
|
|
|
|
/* Notifications */
|
|
|
|
|
.notification.is-control-verylow{background:var(--c-verylow-100);border-left:4px solid var(--c-verylow);color:#111}
|
|
|
|
|
.notification.is-control-low{background:var(--c-low-100);border-left:4px solid var(--c-low);color:#111}
|
|
|
|
|
.notification.is-control-mid{background:var(--c-mid-100);border-left:4px solid var(--c-mid);color:#111}
|
|
|
|
|
.notification.is-control-high{background:var(--c-high-100);border-left:4px solid var(--c-high);color:#111}
|
|
|
|
|
.notification.is-control-veryhigh{background:var(--c-veryhigh-100);border-left:4px solid var(--c-veryhigh);color:#111}
|
|
|
|
|
|
|
|
|
|
/* Messages */
|
|
|
|
|
.message.is-control-verylow .message-header{background:var(--c-verylow);color:var(--c-verylow-inv)}
|
|
|
|
|
.message.is-control-low .message-header{background:var(--c-low);color:var(--c-low-inv)}
|
|
|
|
|
.message.is-control-mid .message-header{background:var(--c-mid);color:var(--c-mid-inv)}
|
|
|
|
|
.message.is-control-high .message-header{background:var(--c-high);color:var(--c-high-inv)}
|
|
|
|
|
.message.is-control-veryhigh .message-header{background:var(--c-veryhigh);color:var(--c-veryhigh-inv)}
|
|
|
|
|
.message.is-control-verylow .message-body{border-color:var(--c-verylow-300)}
|
|
|
|
|
.message.is-control-low .message-body{border-color:var(--c-low-300)}
|
|
|
|
|
.message.is-control-mid .message-body{border-color:var(--c-mid-300)}
|
|
|
|
|
.message.is-control-high .message-body{border-color:var(--c-high-300)}
|
|
|
|
|
.message.is-control-veryhigh .message-body{border-color:var(--c-veryhigh-300)}
|
|
|
|
|
|
|
|
|
|
/* Progress (optional) */
|
|
|
|
|
.progress.is-control-verylow::-webkit-progress-value{background:var(--c-verylow)}
|
|
|
|
|
.progress.is-control-low::-webkit-progress-value{background:var(--c-low)}
|
|
|
|
|
.progress.is-control-mid::-webkit-progress-value{background:var(--c-mid)}
|
|
|
|
|
.progress.is-control-high::-webkit-progress-value{background:var(--c-high)}
|
|
|
|
|
.progress.is-control-veryhigh::-webkit-progress-value{background:var(--c-veryhigh)}
|
|
|
|
|
.progress.is-control-verylow::-moz-progress-bar{background:var(--c-verylow)}
|
|
|
|
|
.progress.is-control-low::-moz-progress-bar{background:var(--c-low)}
|
|
|
|
|
.progress.is-control-mid::-moz-progress-bar{background:var(--c-mid)}
|
|
|
|
|
.progress.is-control-high::-moz-progress-bar{background:var(--c-high)}
|
|
|
|
|
.progress.is-control-veryhigh::-moz-progress-bar{background:var(--c-veryhigh)}
|
|
|
|
|
|
|
|
|
|
|
2025-09-08 08:10:30 +02:00
|
|
|
/* Topbar-Farbe erzwingen (Bulma überschreibt sonst mit weiß) */
|
|
|
|
|
.navbar.topbar-nav {
|
|
|
|
|
background-color: #d6801e !important; /* Orange wie im Screenshot */
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
2025-09-07 20:52:19 +02:00
|
|
|
|
2025-09-08 08:10:30 +02:00
|
|
|
/* Textfarben in der Topbar */
|
|
|
|
|
.navbar.topbar-nav .navbar-item,
|
|
|
|
|
.navbar.topbar-nav .navbar-link {
|
|
|
|
|
color: #111;
|
|
|
|
|
}
|
|
|
|
|
.navbar.topbar-nav .navbar-item:hover,
|
|
|
|
|
.navbar.topbar-nav .navbar-link:hover {
|
|
|
|
|
background-color: rgba(0,0,0,.04);
|
|
|
|
|
color: #111;
|
|
|
|
|
}
|
2025-09-07 20:52:19 +02:00
|
|
|
|
2025-09-08 08:10:30 +02:00
|
|
|
/* Dropdown-Pfeil in lila */
|
|
|
|
|
.navbar.topbar-nav .navbar-link::after {
|
|
|
|
|
border-color: #6b2bbd; /* lila */
|
|
|
|
|
}
|
Add FontAwesome webfonts and update templates for Risiko Management
- Added FontAwesome webfont files: fa-brands-400.woff2, fa-regular-400.woff2, fa-solid-900.woff2, and fa-v4compatibility.woff2.
- Updated base.html to include FontAwesome stylesheet.
- Renamed the application title from "Risiko Management" to "ISO27001 Management".
- Enhanced navigation menu with dynamic active states for Dashboard, Statistics, Risks, Controls, and Incidents.
- Created new templates for dashboard, controls, incidents, risks, and statistics with breadcrumb navigation.
2025-09-07 23:07:56 +02:00
|
|
|
|
2025-09-08 08:10:30 +02:00
|
|
|
/* Lila Logo-Kachel links */
|
|
|
|
|
.logo {
|
|
|
|
|
background: #5a2a82 !important;
|
|
|
|
|
color: #fff;
|
Add FontAwesome webfonts and update templates for Risiko Management
- Added FontAwesome webfont files: fa-brands-400.woff2, fa-regular-400.woff2, fa-solid-900.woff2, and fa-v4compatibility.woff2.
- Updated base.html to include FontAwesome stylesheet.
- Renamed the application title from "Risiko Management" to "ISO27001 Management".
- Enhanced navigation menu with dynamic active states for Dashboard, Statistics, Risks, Controls, and Incidents.
- Created new templates for dashboard, controls, incidents, risks, and statistics with breadcrumb navigation.
2025-09-07 23:07:56 +02:00
|
|
|
|
|
|
|
|
}
|
2025-09-08 08:10:30 +02:00
|
|
|
.logo .logo-text {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: 700;
|
Add FontAwesome webfonts and update templates for Risiko Management
- Added FontAwesome webfont files: fa-brands-400.woff2, fa-regular-400.woff2, fa-solid-900.woff2, and fa-v4compatibility.woff2.
- Updated base.html to include FontAwesome stylesheet.
- Renamed the application title from "Risiko Management" to "ISO27001 Management".
- Enhanced navigation menu with dynamic active states for Dashboard, Statistics, Risks, Controls, and Incidents.
- Created new templates for dashboard, controls, incidents, risks, and statistics with breadcrumb navigation.
2025-09-07 23:07:56 +02:00
|
|
|
}
|
|
|
|
|
|
2025-09-08 08:10:30 +02:00
|
|
|
/* Rechte Seite: Suche + Profil */
|
|
|
|
|
.actions { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
|
|
|
|
|
.search { border: 1px solid #c7c7c7; border-radius: 4px; padding: 4px 8px; font-size: 14px; }
|
|
|
|
|
.profile { background: #3c7d74; color: #fff; width: 28px; height: 28px; border-radius: 9999px;
|
|
|
|
|
display: flex; align-items: center; justify-content: center; font-weight: 700; }
|
|
|
|
|
|
|
|
|
|
/* Inhalt darunter */
|
|
|
|
|
.content { background: #fafafa; min-height: calc(100vh - 3.25rem); }
|
|
|
|
|
.home-icon { font-size: 20px; display: inline-block; margin: 10px; }
|
|
|
|
|
|
|
|
|
|
/* Dropdown optisch näher am Screenshot */
|
feat: Enhance Risk Management Module
- Updated Risk model to include description, created_at, and updated_at fields.
- Modified RiskSerializer to include created_at and updated_at in serialized output.
- Improved logging in signals for Risk and Control models, including serialization of values.
- Added new template tags for CIA label mapping.
- Refactored URL patterns for better clarity and added detail views for risks, controls, and incidents.
- Implemented list and detail views for risks, controls, and incidents with filtering options.
- Enhanced CSS for better UI/UX, including breadcrumbs and table styling.
- Created new templates for displaying individual risks, controls, and incidents with detailed information.
2025-09-08 15:03:12 +02:00
|
|
|
.navbar-dropdown { border-top: none; box-shadow: 0 8px 16px rgba(0,0,0,.1); }
|
|
|
|
|
|
|
|
|
|
/* Breadcrumbs */
|
|
|
|
|
.top-breadcrumb { padding: 10px 0;}
|
|
|
|
|
|
|
|
|
|
.breadcrumb {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
background-color: #f0ebeb;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content li{
|
|
|
|
|
margin-top: 5px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content li+li {
|
|
|
|
|
margin: 0 !important;
|
2025-09-09 21:34:03 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* DARK MODE */
|
|
|
|
|
|
|
|
|
|
/* static/css/custom.css */
|
|
|
|
|
body.dark-mode {
|
|
|
|
|
background-color: #121212;
|
|
|
|
|
color: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body.dark-mode .box {
|
|
|
|
|
background-color: #1e1e1e;
|
|
|
|
|
color: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Optional: Buttons, Links etc. anpassen */
|
|
|
|
|
body.dark-mode a {
|
|
|
|
|
color: #bb86fc;
|
2025-09-10 10:49:14 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ticket-Button (ID links, Text rechts) */
|
|
|
|
|
.risk-chip{
|
|
|
|
|
--chip-w: 260px;
|
|
|
|
|
--chip-id-w: 40px;
|
|
|
|
|
width: var(--chip-w);
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
box-shadow: 0 4px 14px rgba(0,0,0,.08);
|
|
|
|
|
background: var(--chip-bg, #eee);
|
|
|
|
|
color: var(--chip-fg, #111);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.risk-chip{
|
|
|
|
|
display:inline-flex;
|
|
|
|
|
flex-direction:column; /* <— neu */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.risk-chip .chip-head{
|
|
|
|
|
padding:.35rem .6rem;
|
|
|
|
|
font-size:.75rem;
|
|
|
|
|
font-weight:700;
|
|
|
|
|
text-transform:uppercase;
|
|
|
|
|
letter-spacing:.02em;
|
|
|
|
|
color:var(--chip-fg);
|
|
|
|
|
background:rgba(0,0,0,.10);
|
|
|
|
|
border-bottom:1px solid rgba(0,0,0,.12);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.risk-chip .chip-main{
|
|
|
|
|
display:flex;
|
|
|
|
|
align-items:stretch;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* linke ID-Spalte mit leichter Textur */
|
|
|
|
|
.risk-chip .chip-id{
|
|
|
|
|
flex: 0 0 var(--chip-id-w);
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: rgba(0,0,0,.06);
|
|
|
|
|
}
|
|
|
|
|
.risk-chip .chip-id::after{
|
|
|
|
|
content:"";
|
|
|
|
|
position: absolute; inset:0;
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient( to right, rgba(255,255,255,.15), rgba(0,0,0,.08) 60% ),
|
|
|
|
|
repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px);
|
|
|
|
|
mix-blend-mode: soft-light;
|
|
|
|
|
opacity:.6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* rechte Text-Spalte */
|
|
|
|
|
.risk-chip .chip-label{
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
padding: .5rem .75rem;
|
|
|
|
|
line-height: 1.25;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-left: 1px solid rgba(0,0,0,.08);
|
|
|
|
|
min-height: 2.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Farbzuteilung aus deinen Custom-Klassen */
|
|
|
|
|
.risk-chip.is-control-verylow { --chip-bg: var(--c-verylow); --chip-fg: var(--c-verylow-inv); }
|
|
|
|
|
.risk-chip.is-control-low { --chip-bg: var(--c-low); --chip-fg: var(--c-low-inv); }
|
|
|
|
|
.risk-chip.is-control-mid { --chip-bg: var(--c-mid); --chip-fg: var(--c-mid-inv); }
|
|
|
|
|
.risk-chip.is-control-high { --chip-bg: var(--c-high); --chip-fg: var(--c-high-inv); }
|
|
|
|
|
.risk-chip.is-control-veryhigh{ --chip-bg: var(--c-veryhigh); --chip-fg: var(--c-veryhigh-inv); }
|
|
|
|
|
|
|
|
|
|
/* Responsiv: auf schmalen Screens volle Breite */
|
|
|
|
|
@media (max-width: 480px){
|
|
|
|
|
.risk-chip{ width: 100%; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1215px) {
|
|
|
|
|
.risk-chip { --chip-w: 100%; width: var(--chip-w); }
|
2025-09-10 13:44:03 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Container für Avatar + Badge */
|
|
|
|
|
.avatar-wrap {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-wrap .badge {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -0.35rem;
|
|
|
|
|
right: -0.35rem;
|
|
|
|
|
min-width: 1.25rem;
|
|
|
|
|
height: 1.25rem;
|
|
|
|
|
padding: 0 .25rem;
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
line-height: 1.25rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
box-shadow: 0 0 0 2px #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-wrap .tag.is-medium + .badge {
|
|
|
|
|
min-width: 1.15rem;
|
|
|
|
|
height: 1.15rem;
|
|
|
|
|
font-size: 0.70rem;
|
|
|
|
|
line-height: 1.15rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Dark-Mode/
|
|
|
|
|
.navbar.is-dark .avatar-wrap .badge { box-shadow: 0 0 0 2px hsl(229, 53%, 18%); }
|