Improve styling of the project switcher

hc/accounts/models.py

@@ -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

static/css/base.css

@@ -40,19 +40,31 @@ body {
     font-size: small;
 }
 
-@media (min-width: 768px) {
+#project-menu {
-    #nav-main-sections > #nav-project {
+    padding: 0;
-        margin-left: -30px;
-    }
 }
 
-#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;
 }

static/js/projects_menu.js

@@ -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);
 });

templates/base.html

@@ -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" %}