archive/healthchecks_healthchecks
0
0
Fork 0
mirror of https://github.com/healthchecks/healthchecks.git synced 2025-04-03 12:25:31 +00:00
Code Issues Projects Releases Wiki Activity

Improve styling of the project switcher

Browse source
This commit is contained in:
Pēteris Caune 2023-03-10 11:50:41 +02:00
parent bad4b9adbf
commit 4d552efd67
No known key found for this signature in database
GPG key ID: E28D7679E9A9EDE2
4 changed files with 40 additions and 26 deletions
hc/accounts
models.py
static
css
base.css
js
projects_menu.js
templates
base.html

2
hc/accounts/models.py
View file

@ -12,7 +12,7 @@ from django.contrib.auth.hashers import check_password, make_password
from django.contrib.auth.models import User
from django.core.signing import BadSignature, TimestampSigner
from django.db import models
from django.db.models import Count, Q
from django.db.models import Q
from django.db.models.functions import Lower
from django.urls import reverse
from django.utils.timezone import now

22
static/css/base.css
View file

@ -40,19 +40,31 @@ body {
font-size: small;
}
@media (min-width: 768px) {
#nav-main-sections > #nav-project {
margin-left: -30px;
}
#project-menu {
padding: 0;
}
#nav-main-sections > #nav-project > a {
#project-menu > .dropdown > a {
display: block;
padding: 30px 15px;
font-size: 18px;
text-transform: none;
font-weight: bold;
color: var(--text-color);
}
#project-menu > .dropdown > a:hover {
padding-bottom: 25px;
border-bottom: 5px solid var(--border-muted);
}
#project-menu > .dropdown > a:hover,
#project-menu > .dropdown > a:active,
#project-menu > .dropdown > a:focus,
#project-menu > .dropdown > a:target {
text-decoration: none;
}
#global-links > li > a {
font-size: small;
}

5
static/js/projects_menu.js
View file

@ -13,11 +13,12 @@ $(function() {
url: base + "/projects/menu/",
timeout: 2000,
success: function(data) {
$("#nav-project li.project-item").remove();
$("#project-menu li.project-item").remove();
$("#projects-divider").after(data);
}
});
}
$("#nav-project").on("mouseenter click", refreshMenu);
$("#project-menu").on("mouseenter", refreshMenu);
$("#project-menu > .dropdown").on("show.bs.dropdown", refreshMenu);
});

37
templates/base.html
View file

@ -80,9 +80,25 @@
<span class="icon-bar"></span>
</button>
{% if request.user.is_authenticated and project %}
<div id="project-menu" class="navbar-brand">
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
{{ project }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id="base-url" href="{% url 'hc-index' %}">All Projects</a></li>
<li id="projects-divider" role="separator" class="divider"></li>
<li role="separator" class="divider"></li>
<li>
<a href="#" data-toggle="modal" data-target="#add-project-modal">New Project&hellip;</a>
</li>
</ul>
</div>
</div>
{% else %}
<a id="base-url" class="navbar-brand" href="{% url 'hc-index' %}">
{% if request.user.is_authenticated and project %}
{% else %}
<img
id="logo"
height="50"
@ -92,27 +108,12 @@
src="{% static 'img/logo.png' %}"
{% endif %}
alt="{{ site_name }}">
{% endif %}
</a>
{% endif %}
</div>
<div id="navbar" class="navbar-collapse collapse">
{% if project %}
<ul id="nav-main-sections" class="nav navbar-nav">
<li id="nav-project" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
{{ project }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="{% url 'hc-index' %}">All Projects</a></li>
<li id="projects-divider" role="separator" class="divider"></li>
<li role="separator" class="divider"></li>
<li>
<a href="#" data-toggle="modal" data-target="#add-project-modal">New Project&hellip;</a>
</li>
</ul>
</li>
<li {% if page == 'checks' %} class="active" {% endif %}>
<a href="{% url 'hc-checks' project.code %}">
{% trans "Checks" %}