From 4d5a9b7f0c4339b16f253743f973c4a994b43946 Mon Sep 17 00:00:00 2001
From: Craig Oates <craig@craigoates.net>
Date: Sun, 9 Oct 2022 21:40:35 +0100
Subject: [PATCH] update /layouts/header.html template with new CSS rules.

This commit makes the header (site's name and logo) a link which points back to
the site's "/" (I.E. Home page/route). It, also, centralises the header and the
navigation menu (in the header). This is so the header doesn't look weird when
viewed on a mobile phone.

I removed the <hr> at the bottom of the file because the site has enough styling
applied to it to make the <hr> look out of place now. I can clearly
denote/identify where the site's (front-end) header and footer stops and starts.
---
 templates/layouts/header.html | 233 ++++++++++++++++++----------------
 1 file changed, 125 insertions(+), 108 deletions(-)

diff --git a/templates/layouts/header.html b/templates/layouts/header.html
index cebfc02..b66d6b0 100644
--- a/templates/layouts/header.html
+++ b/templates/layouts/header.html
@@ -3,13 +3,13 @@
     <button type="button"
 	    id="be-site-side-menu-toggle"
 	    onclick="toggleSiteSideMenu()">
-	<img alt="Site Side Menu"
+        <img alt="Site Side Menu"
 	     src="/images/icons/site-side-menu.png">
-	Menu
+        Menu
     </button>
 
     <div class="be-user-info">
-	<p><span>Logged in as: </span>{{user.username}}</p>
+        <p><span>Logged in as: </span>{{user.username}}</p>
     </div>
 </div>
 {% endif %}
@@ -17,79 +17,79 @@
 {% if roles.logged-in %}
 <div class="be-site-side-menu" id="be-site-side-menu">
     <div>
-	<div>
-	    <a class="be-gui-link" href="/dashboard">
-		<img alt="Dashboard"
-		     src="/images/icons/dashboard.png">
-		Dashboard
-	    </a>
+        <div>
+            <a class="be-gui-link" href="/dashboard">
+	        <img alt="Dashboard"
+	             src="/images/icons/dashboard.png">
+	        Dashboard
+            </a>
 
-	    <a class="be-gui-link" href="/storage/manage">
-		<img alt="Dashboard"
-		     src="/images/icons/index.png">
-		Storage
-	    </a>
-	</div>
-	<div>
-	    <h2>Archive</h2>
-	    <a class="be-gui-link" href="/create/archive-entry">
-		<img alt="New Page"
-		     src="/images/icons/add-circle.png">
-		Create Entry
-	    </a>
-	    <a class="be-gui-link" href="/user/archive">
-		<img alt="New Page"
-		     src="/images/icons/index.png">
-		Archive Index
-	    </a>
-	</div>
-	<div>
-	    <h2>Pages</h2>
-	    <a class="be-gui-link" href="/create/page">
-		<img alt="New Page"
-		     src="/images/icons/add-circle.png">
-		Add Page
-	    </a>
-	    <a class="be-gui-link" href="/user/pages">
-		<img alt="New Page"
-		     src="/images/icons/index.png">
-		Pages Index
-	    </a>
-	</div>
+            <a class="be-gui-link" href="/storage/manage">
+	        <img alt="Dashboard"
+	             src="/images/icons/index.png">
+	        Storage
+            </a>
+        </div>
+        <div>
+            <h2>Archive</h2>
+            <a class="be-gui-link" href="/create/archive-entry">
+	        <img alt="New Page"
+	             src="/images/icons/add-circle.png">
+	        Create Entry
+            </a>
+            <a class="be-gui-link" href="/user/archive">
+	        <img alt="New Page"
+	             src="/images/icons/index.png">
+	        Archive Index
+            </a>
+        </div>
+        <div>
+            <h2>Pages</h2>
+            <a class="be-gui-link" href="/create/page">
+	        <img alt="New Page"
+	             src="/images/icons/add-circle.png">
+	        Add Page
+            </a>
+            <a class="be-gui-link" href="/user/pages">
+	        <img alt="New Page"
+	             src="/images/icons/index.png">
+	        Pages Index
+            </a>
+        </div>
     </div>
     <div>
-	<h2>Accounts and Settings</h2>
-	<a class="be-gui-link" href="/user/edit">
-	    <img alt="Edit Profile"
-		 src="/images/icons/profile.png">
-	    My Account Details
-	</a>
-	{% if roles.administrator %}
-	<a class="be-gui-link" href="/users">
-	    <img alt="Manage Accounts"
-		 src="/images/icons/all-accounts.png">
-	    Manage Accounts
-	</a>
-	<a class="be-gui-link" href="/site-settings">
-	    <img alt="Site Settings"
-		 src="/images/icons/settings.png">
-	    Site Settings
-	</a>
-	{% endif %}
+        <h2>Accounts and Settings</h2>
+        <a class="be-gui-link" href="/user/edit">
+            <img alt="Edit Profile"
+	         src="/images/icons/profile.png">
+            My Account Details
+        </a>
+        {% if roles.administrator %}
+        <a class="be-gui-link" href="/users">
+            <img alt="Manage Accounts"
+	         src="/images/icons/all-accounts.png">
+            Manage Accounts
+        </a>
+        <a class="be-gui-link" href="/site-settings">
+            <img alt="Site Settings"
+	         src="/images/icons/settings.png">
+            Site Settings
+        </a>
+        {% endif %}
     </div>
     <div>
-	<form action="/logout"
+        <form action="/logout"
 	      method="post">
-	    <input required type="hidden"
-		   name="AUTHENTICITY-TOKEN"
-		   value="{{token}}">
-	    <button class="be-gui-button"
-		    type="submit">
-		<img alt="Log Out"
-		     src="/images/icons/logout.png">
-		Log Out
-	    </button>
-	</form>
+            <input required type="hidden"
+	           name="AUTHENTICITY-TOKEN"
+	           value="{{token}}">
+            <button class="be-gui-button"
+	            type="submit">
+	        <img alt="Log Out"
+	             src="/images/icons/logout.png">
+	        Log Out
+            </button>
+        </form>
     </div>
 </div>
 {% endif %}
@@ -97,46 +97,63 @@
 <div id="fe-main">
     {% if alert %}
     <div class="be-alert-container"
-	 id="be-alert-container">
-	{{alert | safe}}
-	<button class="be-gui-button-no-text"
-		       title="Click to close alert message"
-		       type="button"
-		       id="be-close-alert"
-		       onclick="closeAlert()">
-	    <img alt="Close alert"
-		 src="/images/icons/cross-circle.png">
-	</button>
+         id="be-alert-container">
+        {{alert | safe}}
+        <button class="be-gui-button-no-text"
+	        title="Click to close alert message"
+	        type="button"
+	        id="be-close-alert"
+	        onclick="closeAlert()">
+            <img alt="Close alert"
+	         src="/images/icons/cross-circle.png">
+        </button>
     </div>
     {% endif %}
 
-    <div class="fe-site-header">
-	{% ifequal system-data.first.enable-site-logo 1 %}
-	<img alt="{{system-data.first.site-name}}"
+    <a class="fe-site-header"
+       title="Click to view the site's home page"
+       href="/">
+        {% ifequal system-data.first.enable-site-logo 1 %}
+        <img alt="{{system-data.first.site-name}}"
 	     src="/images/site-logo.png">
-	{% endifequal %}
-	<h1>{{system-data.first.site-name}}</h1>
-    </div>
+        {% endifequal %}
+        <h1>{{system-data.first.site-name}}</h1>
+    </a>
 
-    <div>
-	<nav>
-	    {% for page in system-data.last.first %}
-	    {% ifequal page.enable-nav-menu 1 %}
-	    {% if page.slug == "login" %}
-	    <a href="/{{page.slug}}">{{page.title}}</a>
-	    {% elif page.slug == "home" %}
-	    <a href="/">{{page.title}}</a>
-	    {% elif page.slug == "archive" %}
-	    <a href="/{{page.slug}}">{{page.title}}</a>
-	    {% elif page.slug == "pages" %}
-	    <a href="/{{page.slug}}">{{page.title}}</a>
-	    {% elif page.slug == "sign-up" %}
-	    <a href="/{{page.slug}}">{{page.title}}</a>
-	    {% else %}
-	    <a href="/view/page/{{page.slug}}">{{page.title}}</a>
-	    {% endif %}
-	    {% endifequal %}
-	    {% endfor %}
-	</nav>
-    </div>
-    <hr>
+    <nav>
+        {% for page in system-data.last.first %}
+        {% ifequal page.enable-nav-menu 1 %}
+        {% if page.slug == "login" %}
+        <a href="/{{page.slug}}"
+           title="Click to view the Login page">
+            {{page.title}}
+        </a>
+        {% elif page.slug == "home" %}
+        <a href="/"
+           title="Click to view the site's home page">
+            {{page.title}}
+        </a>
+        {% elif page.slug == "archive" %}
+        <a href="/{{page.slug}}"
+           title="Click to view the site's Archive index">
+            {{page.title}}
+        </a>
+        {% elif page.slug == "pages" %}
+        <a href="/{{page.slug}}"
+           title="Click to view the site's Pages index">
+            {{page.title}}
+        </a>
+        {% elif page.slug == "sign-up" %}
+        <a href="/{{page.slug}}"
+           title="Click to create an account with this website">
+            {{page.title}}
+        </a>
+        {% else %}
+        <a href="/view/page/{{page.slug}}"
+           title="Click to view '{{page.title}}'">
+            {{page.title}}
+        </a>
+        {% endif %}
+        {% endifequal %}
+        {% endfor %}
+    </nav>