Switch to new Design

This commit is contained in:
Kevin Heyer 2025-09-08 08:10:30 +02:00
parent ff134eee9a
commit ee78caa3d1
3 changed files with 172 additions and 142 deletions

82
.gitignore vendored
View file

@ -1,5 +1,79 @@
.venv
.startserver.sh
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class
# Distribution / packaging
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
*.egg-info/
.installed.cfg
*.egg
# Django stuff:
*.log
*.pot
*.pyc
*.sqlite3
db.sqlite3
media/
staticfiles/
static/
# If you are using WhiteNoise for static file management
static_root/
# Django migrations (optional nur ignorieren wenn du sie nicht versionieren willst)
# **/migrations/
# PyInstaller
*.manifest
*.spec
# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.py,cover
.hypothesis/
# Environments
.env
sb.sqlite3
__pycache__
.venv
env/
venv/
ENV/
env.bak/
venv.bak/
# IDE / Editor stuff
.vscode/
.idea/
*.swp
*.swo
*.sublime-project
*.sublime-workspace
# System files
.DS_Store
Thumbs.db
db.sqlite3

View file

@ -1,53 +1,45 @@
html, body {
height: 100%;
}
.sidebar {
position: fixed;
top: 60px;
left: 0;
width: 220px;
height: calc(100% - 60px);
padding: 1rem;
border-right: 1px solid #ddd;
overflow-y: auto;
/* Topbar-Farbe erzwingen (Bulma überschreibt sonst mit weiß) */
.navbar.topbar-nav {
background-color: #d6801e !important; /* Orange wie im Screenshot */
box-shadow: none;
}
.content {
margin-left: 220px;
padding: 2rem;
padding-top: 80px;
/* 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;
}
.navbar.is-fixed-top {
z-index: 1000;
/* Dropdown-Pfeil in lila */
.navbar.topbar-nav .navbar-link::after {
border-color: #6b2bbd; /* lila */
}
@media (max-width: 768px) {
.sidebar {
position: relative;
width: 100%;
height: auto;
border-right: none;
padding-top: 0;
}
.content {
margin-left: 0;
padding-top: 2rem;
/* Lila Logo-Kachel links */
.logo {
background: #5a2a82 !important;
color: #fff;
}
.logo .logo-text {
color: #fff;
font-weight: 700;
}
/**
Breadcrumps
**/
/* 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; }
.breadcrumb {
margin-bottom: 20px;
}
/* Inhalt darunter */
.content { background: #fafafa; min-height: calc(100vh - 3.25rem); }
.home-icon { font-size: 20px; display: inline-block; margin: 10px; }
.content li{
margin-top: 5px !important;
}
.content li+li {
margin: 0 !important;
}
/* Dropdown optisch näher am Screenshot */
.navbar-dropdown { border-top: none; box-shadow: 0 8px 16px rgba(0,0,0,.1); }

View file

@ -3,104 +3,68 @@
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Risiko Management</title>
<link rel="stylesheet" href="{% static '/css/bulma.min.css' %}">
<link rel="stylesheet" href="{% static '/css/design.css' %}">
<link rel="stylesheet" href="{% static '/css/fontawesome.min.css' %}">
<link rel="stylesheet" href="{% static '/css/print.css' %}" media="print">
<meta name="description" content="Effizientes Risiko Management für Unternehmen: Analysieren, bewerten und steuern Sie Risiken sicher und zuverlässig.">
<link rel="icon" href="favicon.ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
<link rel="stylesheet" href="{% static 'css/design.css' %}">
<link rel="stylesheet" href="{% static 'css/fontawesome.min.css' %}">
<link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
</head>
<body>
<!-- User Navbar -->
<nav class="navbar is-fixed-top has-shadow">
<header class="topbar">
<nav class="navbar topbar-nav" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<strong>ISO27001 Management</strong>
<a class="navbar-item logo" href="/risks/index">
<strong class="logo-text">R</strong>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<!-- Burger Menu für Mobile -->
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNavbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<div id="mainNavbar" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Profil
</a>
<div class="navbar-dropdown is-right">
<a class="navbar-item" href="#">Einstellungen</a>
<a class="navbar-item" href="#">Benachrichtigungen</a>
<hr class="navbar-divider">
<a class="navbar-item" href="#">Abmelden</a>
<a class="navbar-link">Allgemein</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/risks/index">Dashboard</a>
<a class="navbar-item" href="/risks/stats">Statistiken</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Risikomanagement</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/risks/risks">Risikoanalyse</a>
<a class="navbar-item" href="/risks/controls">Maßnahmen</a>
<a class="navbar-item" href="/risks/incidents">Vorfälle</a>
</div>
</div>
</div>
</div>
<div class="navbar-end">
<div class="actions">
<input type="text" placeholder="Suchen" class="search">
<div class="profile">KG</div>
<span class="icon"></span>
</div>
</div>
</nav>
</header>
<!-- Sidebar -->
<aside class="menu sidebar">
<p class="menu-label">Allgemein</p>
<ul class="menu-list">
<li><a class="{% if request.path == '/risks/' %}is-active{% endif %}" href="/risks/">Dashboard</a></li>
<li><a class="{% if request.path == '/risks/stats' %}is-active{% endif %}" href="/risks/stats">Statistiken</a></li>
</ul>
<p class="menu-label">Risikomanagement</p>
<ul class="menu-list">
<li><a class="{% if request.path == '/risks/risks' %}is-active{% endif %}" href="/risks/risks">Risiken</a></li>
<li><a class="{% if request.path == '/risks/controls' %}is-active{% endif %}" href="/risks/controls">Maßnahmen</a></li>
<li><a class="{% if request.path == '/risks/incidents' %}is-active{% endif %}" href="/risks/incidents">Vorfälle</a></li>
</ul>
<p class="menu-label">Verwaltung</p>
<ul class="menu-list">
<li><a href="/admin">Adminbereich</a></li>
</ul>
</aside>
<!-- Content -->
<main class="content">
{% block breadcrumbs %}
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li>
<div class="home-icon">
<a href="{% url 'risks:index' %}">
<span class="icon is-small">
<i class="fas fa-home" aria-hidden="true"></i>
<i class="fas fa-home" aria-hidden="true" style="color: #6b2bbd"></i>
</span>
</a>
</li>
{% block crumbs %}
{% if title %} &rsaquo; {{ title }}{% endif %}
{% endblock %}
</ul>
</nav>
{% endblock %}
</div>
{% block content %}{% endblock %}
</main>
<!-- Bulma Navbar Burger Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</body>
</html>