mirror of
https://github.com/jlengrand/bugsink.git
synced 2026-03-10 08:01:17 +00:00
4e83a42f39
my chatbot tells me it felt ugly because > bg-yellow-900 [..] is a very saturated, reddish mustard — almost > brown-orange. That’s why it feels so jarring in dark mode: it's too warm, > too saturated, and clashes with a cool-dark UI. [..] Try bg-amber-800 > instead. Tailwind's amber palette is warmer and more muted than yellow, > designed to fit better in dark UIs. No idea if the reasoning is sound, but it "looks good" so I'm pushing ahead.
94 lines
5.4 KiB
HTML
94 lines
5.4 KiB
HTML
{% load static tailwind_tags version add_to_qs %}<!DOCTYPE html>
|
|
<html lang="en" data-theme="{% if user.is_authenticated %}{{ user.theme_preference }}{% else %}dark{% endif %}">
|
|
<!-- version: {% version %} -->
|
|
<head>
|
|
<title>{% block title %}{{ site_title }}{% endblock %}</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
{% tailwind_preload_css %}
|
|
{% tailwind_css %}
|
|
<script>
|
|
// System theme detection and switching
|
|
(function() {
|
|
const html = document.documentElement;
|
|
function applySystemTheme() {
|
|
if (document.documentElement.getAttribute('data-theme') === 'system') {
|
|
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
html.setAttribute('data-theme', isDark ? 'dark' : 'light');
|
|
}
|
|
}
|
|
applySystemTheme();
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applySystemTheme);
|
|
})();
|
|
</script>
|
|
</head>
|
|
|
|
<body class="dark:bg-slate-700 dark:text-slate-100">
|
|
<div id="content">
|
|
<div class="flex pl-4 bg-slate-200 dark:bg-slate-800">
|
|
<a href="/"><img src="{% static 'images/bugsink-logo.png' %}" class="p-2 h-12 w-12 dark:hidden block" alt="Bugsink logo"><img src="{% static 'images/bugsink-logo-dark.png' %}" class="p-2 h-12 w-12 hidden dark:block" alt="Bugsink logo"></a>
|
|
<a href="/"><div class="px-2 py-2 my-2 font-bold hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">{{ site_title }}</div></a>
|
|
|
|
{% if not app_settings.SINGLE_TEAM %}
|
|
<a href="{% url "team_list" %}"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Teams</div></a>
|
|
{% endif %}
|
|
|
|
<a href="{% url "project_list" %}"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Projects</div></a>
|
|
|
|
{% if project %}
|
|
<a href="{% url "issue_list_open" project_pk=project.pk %}{% current_qs %}"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Issues ({{ project.name }})</div></a>
|
|
{% endif %}
|
|
|
|
<div class="ml-auto flex">
|
|
{% if app_settings.USE_ADMIN and user.is_staff %}
|
|
<a href="/admin/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Admin</div></a>
|
|
{% endif %}
|
|
|
|
{% if user.is_superuser %}
|
|
<a href="/users/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Users</div></a>
|
|
<a href="/bsmain/auth_tokens/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Tokens</div></a>
|
|
{% endif %}
|
|
|
|
{% if logged_in_user.is_anonymous %}
|
|
<a href="/accounts/login/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Login</div></a> {# I don't think this is actually ever shown in practice, because you must always be logged in #}
|
|
{% else %}
|
|
<a href="/accounts/preferences/"><div class="px-4 py-2 my-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl">Preferences</div></a>
|
|
<div class="px-4 py-2 my-2 mr-2 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-xl"><form id="logout-form" method="post" action="{% url 'logout' %}">{% csrf_token %}<button type="submit">Log out</button></form></div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% for system_warning in system_warnings %}
|
|
<div class="flex p-4 bg-yellow-100 dark:bg-amber-800 border-b-2 border-yellow-200 dark:border-amber-900">
|
|
<div class="text-slate-800 dark:text-slate-100">
|
|
{{ system_warning.message }}
|
|
</div>
|
|
{% if system_warning.ignore_url %}
|
|
<div class="ml-auto flex" title="Ignore"><form method="post" action="{{ system_warning.ignore_url }}">{% csrf_token %}<input type="hidden" name="next" value="{{ request.path }}"><button type="submit"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg></button></form></div>{# the button adds some undesired padding; leaving it for now #}
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% comment %} {# for use when we introduce a notification system #}
|
|
<div class="flex p-4 bg-yellow-100 dark:bg-amber-800 border-b-2 border-yellow-200 dark:border-yellow-700">
|
|
<div>
|
|
Foo bar baz
|
|
</div>
|
|
|
|
<div class="ml-auto flex" title="Ignore">
|
|
{# heroicon's x-circle #}
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
|
|
|
|
</div>
|
|
</div>
|
|
{% endcomment %}
|
|
|
|
<div>
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|