Jens/VacatureRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate ITWorx branding and refine cockpit UX
deploy / deploy (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Jens
2026-07-26 04:13:42 +02:00
parent eea74f97ef
commit 2a32e9fec9
27 changed files with 298 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+8 -6
View File
@@ -5,9 +5,11 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#060e20">
<meta name="theme-color" content="#071327" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f4f7f7" media="(prefers-color-scheme: light)">
<meta name="application-name" content="VacatureRadar · {{ app_brand_name }}">
<title>{% block title %}{{ app_name }}{% endblock %}</title>
<link rel="icon" href="{% static 'favicon.svg' %}" type="image/svg+xml">
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="stylesheet" href="{% static 'css/app.css' %}?v={{ app_version }}">
<script src="{% static 'js/app.js' %}?v={{ app_version }}" defer></script>
{% block extra_head %}{% endblock %}
@@ -19,9 +21,8 @@
<div class="cockpit" data-app-frame>
<aside class="cockpit-sidebar" data-sidebar aria-label="Hoofdnavigatie">
<div class="sidebar-heading">
<a class="cockpit-brand" href="{% url 'dashboard:today' %}" aria-label="VacatureRadar dashboard">
<span class="brand-radar" aria-hidden="true"><svg class="icon"><use href="#icon-radar"></use></svg></span>
<span><strong>VacatureRadar</strong><small>Intelligence cockpit</small></span>
<a class="cockpit-brand" href="{% url 'dashboard:today' %}" aria-label="ITWorx.tech VacatureRadar dashboard">
<span class="brand-lockup"><img class="brand-wordmark" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech"><small>VacatureRadar · intelligence cockpit</small></span>
</a>
<button class="icon-button nav-close mobile-only" type="button" data-nav-close aria-label="Menu sluiten"><svg class="icon"><use href="#icon-close"></use></svg></button>
</div>
@@ -48,7 +49,7 @@
</div>
<div class="sidebar-account">
<span class="avatar" aria-hidden="true">{{ user.first_name|default:user.username|slice:":1"|upper }}</span>
<span><strong>{{ user.get_full_name|default:user.username }}</strong><small>Persoonlijke radar</small></span>
<span><strong>{{ user.get_full_name|default:user.username }}</strong><small>Eigen werkruimte</small></span>
</div>
</aside>
@@ -57,6 +58,7 @@
<header class="cockpit-topbar">
<div class="topbar-start">
<button class="icon-button mobile-only" type="button" data-nav-toggle aria-label="Menu openen" aria-expanded="false"><svg class="icon"><use href="#icon-menu"></use></svg></button>
<div class="workspace-identity desktop-label"><span>{{ app_brand_name }}</span><small>VacatureRadar · {{ page_context_label }}</small></div>
<form class="command-search" method="get" action="{% url 'jobs:list' %}" role="search">
<label class="sr-only" for="global-search">Zoek door vacatures</label>
<svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>
templates/registration/login.html
+5 -4
View File
@@ -4,18 +4,19 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#fbf8ff">
<meta name="theme-color" content="#071327">
<meta name="application-name" content="VacatureRadar · {{ app_brand_name }}">
<title>Inloggen · VacatureRadar</title>
<link rel="icon" href="{% static 'favicon.svg' %}" type="image/svg+xml">
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar logo" width="64" height="64">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Intelligence cockpit</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
<div class="auth-card">
templates/registration/password_reset_complete.html
+3 -3
View File
@@ -5,16 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Wachtwoord gewijzigd · VacatureRadar</title>
<link rel="icon" href="{% static 'favicon.svg' %}" type="image/svg+xml">
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar logo" width="64" height="64">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Intelligence cockpit</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
<div class="auth-card">
templates/registration/password_reset_confirm.html
+3 -3
View File
@@ -5,16 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Nieuw wachtwoord · VacatureRadar</title>
<link rel="icon" href="{% static 'favicon.svg' %}" type="image/svg+xml">
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar logo" width="64" height="64">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Intelligence cockpit</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
<div class="auth-card">
templates/registration/password_reset_done.html
+3 -3
View File
@@ -5,16 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Herstel-link verstuurd · VacatureRadar</title>
<link rel="icon" href="{% static 'favicon.svg' %}" type="image/svg+xml">
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar logo" width="64" height="64">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Intelligence cockpit</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
<div class="auth-card">
templates/registration/password_reset_form.html
+3 -3
View File
@@ -5,16 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Wachtwoord herstellen · VacatureRadar</title>
<link rel="icon" href="{% static 'favicon.svg' %}" type="image/svg+xml">
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar logo" width="64" height="64">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Intelligence cockpit</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
<div class="auth-card">