From a1766826151f4839de5e3a61f50fa0741489d5af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniele=20Vigan=C3=B2?= <daniele@vigano.me>
Date: Mon, 18 Sep 2023 20:21:41 +0200
Subject: [PATCH] Improve header html code

---
 ram/portal/templates/base.html           | 36 ++++++------
 ram/portal/templates/includes/login.html | 74 +++++++++++++-----------
 2 files changed, 59 insertions(+), 51 deletions(-)
diff --git a/ram/portal/templates/base.html b/ram/portal/templates/base.html
index 048bfc3..e77e1d3 100644
--- a/ram/portal/templates/base.html
+++ b/ram/portal/templates/base.html
@@ -126,31 +126,31 @@
   </head>
   <body>
     <header>
-      <div class="navbar bg-body-tertiary shadow-sm">
-        <div class="container">
-          <a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center">
-            <svg class="me-2" width="26" height="16" enable-background="new 0 0 26 26" version="1" viewBox="0 0 26 16" xmlns="http://www.w3.org/2000/svg">
-              <path d="m2.8125 0.0010991a1.0001 1.0001 0 0 0-0.8125 1c0 0.55455-0.44545 1-1 1a1.0001 1.0001 0 0 0-1 1v10a1.0001 1.0001 0 0 0 1 1c0.55455 0 1 0.44546 1 1a1.0001 1.0001 0 0 0 1 1h20a1.0001 1.0001 0 0 0 1-1c0-0.55454 0.44546-1 1-1a1.0001 1.0001 0 0 0 1-1v-10a1.0001 1.0001 0 0 0-1-1c-0.55454 0-1-0.44545-1-1a1.0001 1.0001 0 0 0-1-1h-20a1.0001 1.0001 0 0 0-0.09375 0 1.0001 1.0001 0 0 0-0.09375 0zm0.78125 2h14.406v1h2v-1h2.4062c0.30628 0.76906 0.82469 1.2875 1.5938 1.5938v8.8125c-0.76906 0.30628-1.2875 0.82469-1.5938 1.5938h-2.4062v-1h-2v1h-14.406c-0.30628-0.76906-0.82469-1.2875-1.5938-1.5938v-8.8125c0.76906-0.30628 1.2875-0.82469 1.5938-1.5938zm14.406 2v2h2v-2zm0 3v2h2v-2zm0 3v2h2v-2z" enable-background="accumulate" overflow="visible" stroke-width="2" />
-              <style>
-                path {
-                  text-indent:0;
-                  text-transform:none;
-                }
-              </style>
-            </svg>
-            <strong>{{ site_conf.site_name }}</strong>
-          </a>
-          <div class="btn-group" role="group" aria-label="Login menu">
-            {% include 'includes/login.html' %}
+      <nav class="navbar navbar-expand-lg bg-body-tertiary shadow-sm">
+        <div class="container d-flex">
+          <div class="me-auto">
+            <a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center">
+              <svg class="me-2" width="26" height="16" enable-background="new 0 0 26 26" version="1" viewBox="0 0 26 16" xmlns="http://www.w3.org/2000/svg">
+                <path d="m2.8125 0.0010991a1.0001 1.0001 0 0 0-0.8125 1c0 0.55455-0.44545 1-1 1a1.0001 1.0001 0 0 0-1 1v10a1.0001 1.0001 0 0 0 1 1c0.55455 0 1 0.44546 1 1a1.0001 1.0001 0 0 0 1 1h20a1.0001 1.0001 0 0 0 1-1c0-0.55454 0.44546-1 1-1a1.0001 1.0001 0 0 0 1-1v-10a1.0001 1.0001 0 0 0-1-1c-0.55454 0-1-0.44545-1-1a1.0001 1.0001 0 0 0-1-1h-20a1.0001 1.0001 0 0 0-0.09375 0 1.0001 1.0001 0 0 0-0.09375 0zm0.78125 2h14.406v1h2v-1h2.4062c0.30628 0.76906 0.82469 1.2875 1.5938 1.5938v8.8125c-0.76906 0.30628-1.2875 0.82469-1.5938 1.5938h-2.4062v-1h-2v1h-14.406c-0.30628-0.76906-0.82469-1.2875-1.5938-1.5938v-8.8125c0.76906-0.30628 1.2875-0.82469 1.5938-1.5938zm14.406 2v2h2v-2zm0 3v2h2v-2zm0 3v2h2v-2z" enable-background="accumulate" overflow="visible" stroke-width="2" />
+                <style>
+                  path {
+                    text-indent:0;
+                    text-transform:none;
+                  }
+                </style>
+              </svg>
+              <strong>{{ site_conf.site_name }}</strong>
+            </a>
          </div>
+         {% include 'includes/login.html' %}
         </div>
-      </div>
+      </nav>
     </header>
     <main>
       <div class="container py-2">
         <nav class="navbar navbar-expand-lg navbar-light">
           <div class="container-fluid g-0">
-              <a class="navbar-brand" href="{% url 'index' %}">Home</a>
+            <a class="navbar-brand" href="{% url 'index' %}">Home</a>
             <div class="navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 <li class="nav-item dropdown">
diff --git a/ram/portal/templates/includes/login.html b/ram/portal/templates/includes/login.html
index abb0e64..9a014a7 100644
--- a/ram/portal/templates/includes/login.html
+++ b/ram/portal/templates/includes/login.html
@@ -1,33 +1,41 @@
-      {% if request.user.is_staff %}
-      <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownLogin" data-bs-toggle="dropdown" aria-expanded="false">
-        Welcome back, <strong>{{ request.user }}</strong>
-      </button>
-      <ul class="dropdown-menu" aria-labelledby="dropdownLogin">
-        <li><a class="dropdown-item" href="{% url 'admin:roster_rollingstock_changelist' %}">Rolling stock</a></li>
-        <li><a class="dropdown-item" href="{% url 'admin:consist_consist_changelist' %}">Consists</a></li>
-        <li><a class="dropdown-item" href="{% url 'admin:app_list' 'metadata' %}">Metadata</a></li>
-        <li><a class="dropdown-item" href="{% url 'admin:portal_flatpage_changelist' %}">Pages</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="{% url 'admin:index' %}">Admin</a></li>
-        <li><a class="dropdown-item" href="{% url 'admin:portal_siteconfiguration_changelist' %}">Site configuration</a></li>
-        <li><a class="dropdown-item" href="{% url 'admin:driver_driverconfiguration_changelist' %}">DCC configuration</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item text-danger" href="{% url 'admin:logout' %}?next={{ request.path }}">Logout</a></li>
-      </ul>
-      {% else %}
-      <a class="btn btn-sm" href="{% url 'admin:login' %}?next={{ request.path }}">Log in</a>
-      {% endif %}
-      <button class="btn btn-sm dropdown-toggle" type="button" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false">
-        <i class="bi bi-circle-half"></i>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme">
-        <li>
-          <button class="dropdown-item" data-bs-theme-value="light" aria-pressed="false"><i class="bi bi-sun-fill"></i> Light</button>
-        </li>
-        <li>
-          <button class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false"><i class="bi bi-moon-stars-fill"></i> Dark</button>
-        </li>
-        <li>
-          <button class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false"><i class="bi bi-circle-half"></i> Auto</button>
-        </li>
-      </ul>
+      <div class="navbar-collapse justify-content-end" id="navbarSupportedContent">
+        <ul class="navbar-nav">
+          <li class="nav-item dropdown">
+            {% if request.user.is_staff %}
+            <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownLogin" data-bs-toggle="dropdown" aria-expanded="false">
+              Welcome back, <strong>{{ request.user }}</strong>
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="dropdownLogin">
+              <li><a class="dropdown-item" href="{% url 'admin:roster_rollingstock_changelist' %}">Rolling stock</a></li>
+              <li><a class="dropdown-item" href="{% url 'admin:consist_consist_changelist' %}">Consists</a></li>
+              <li><a class="dropdown-item" href="{% url 'admin:app_list' 'metadata' %}">Metadata</a></li>
+              <li><a class="dropdown-item" href="{% url 'admin:portal_flatpage_changelist' %}">Pages</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="{% url 'admin:index' %}">Admin</a></li>
+              <li><a class="dropdown-item" href="{% url 'admin:portal_siteconfiguration_changelist' %}">Site configuration</a></li>
+              <li><a class="dropdown-item" href="{% url 'admin:driver_driverconfiguration_changelist' %}">DCC configuration</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item text-danger" href="{% url 'admin:logout' %}?next={{ request.path }}">Logout</a></li>
+            </ul>
+            {% else %}
+            <a class="nav-link" href="{% url 'admin:login' %}?next={{ request.path }}">Log in</a>
+            {% endif %}
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" type="button" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="bi bi-circle-half"></i>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme">
+              <li>
+                <button class="dropdown-item" data-bs-theme-value="light" aria-pressed="false"><i class="bi bi-sun-fill"></i> Light</button>
+              </li>
+              <li>
+                <button class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false"><i class="bi bi-moon-stars-fill"></i> Dark</button>
+              </li>
+              <li>
+                <button class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false"><i class="bi bi-circle-half"></i> Auto</button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
