From 78cf655f5d894e629e4b4b7b6a5352d7ca6463e5 Mon Sep 17 00:00:00 2001
From: Craig Oates <craig@craigoates.net>
Date: Sat, 8 Oct 2022 20:19:53 +0100
Subject: [PATCH] update HTML and CSS in /user/site-settings.html template.

I did a lot of re-arranging of the settings alongside adding CSS and HTML stuff
to template in-general.
---
 templates/user/site-settings.html | 327 +++++++++++++++++++++++-------
 1 file changed, 253 insertions(+), 74 deletions(-)

diff --git a/templates/user/site-settings.html b/templates/user/site-settings.html
index c898dcd..073341e 100644
--- a/templates/user/site-settings.html
+++ b/templates/user/site-settings.html
@@ -1,86 +1,265 @@
 {% extends "layouts/default.html" %}
 {% block title %}Nicola Ellis & Ritherdon Archive{% endblock %}
 {% block content %}
-<h1>Site Settings</h1>
+<main class="be-main">
+    <h1>Site Settings</h1>
 
-<h2>Sign-Up</h2>
-<form action="/site-settings/update-sign-up" method="post">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <input type="checkbox" name="ENABLE-SIGN-UP"
-	   {% if settings.enable-sign-up == 1 %}
-	   checked
-	   {% endif %}
-    >
-    <label>Enable Sign-Up</label>
-    <input type="submit" value="Save Changes">
-</form>
+    <div class="be-quicklist">
+	<a class="be-gui-link"
+	   title="Click to view your Dashboard"
+	   href="/dashboard">
+	    <img alt="Dashboard"
+		 src="/images/icons/dashboard.png">
+	    View Dashboard
+	</a>
+	<a class="be-gui-link"
+	   title="Click to view your account details"
+	   href="/user/edit">
+	    <img alt="My Account"
+		 src="/images/icons/profile.png">
+	    My Account
+	</a>
+	{% if roles.administrator %}
+	<a class="be-gui-link"
+	   title="Click to view all accounts"
+	   href="/users">
+	    <img alt="Manage Accounts"
+		 src="/images/icons/all-accounts.png">
+	    Manage Accounts
+	</a>
+	{% endif %}
+    </div>
 
-<h2>Nav. Menu</h2>
-<form action="/site-settings/update-nav-menu" method="post">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    {% for page in pages %}
-    <input type="hidden" name="NAV-MENU[{{page.slug}}]" value="off">
-    <input type="checkbox" name="NAV-MENU[{{page.slug}}]"
-	   {% if page.enable-nav-menu == 1 %}
-	   value="on"
-	   checked
-	   {% endif %}
-    >
-    <label>{{page.title}}</label>
-    {% endfor %}
-    <input type="submit" value="Update Nav. Menu">
-</form>
+    <h2>Site Name</h2>
+    <form class="be-gui-form"
+	  action="/site-settings/update-site-name"
+	  method="post">
+	<input required
+	       type="hidden"
+	       name="AUTHENTICITY-TOKEN"
+	       value="{{token}}">
+        <div class="be-gui-form-row">
+	    <input required
+	           type="text"
+	           name="SITE-NAME"
+	           value="{{settings.site-name}}">
+	    <button class="be-gui-button-no-text"
+		    title="Click to update the website's name"
+		    type="submit">
+	        <img alt="Update site's name"
+		     src="/images/icons/save.png">
+	    </button>
+        </div>
+    </form>
 
-<h2>Home Page</h2>
-<form action="/site-settings/update-home-page" method="post">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <p>Currently set to: {{settings.home-page}}</p>
-    <select required name="SET-HOME-PAGE">
-	<option>Select Page</option>
+    <hr>
+
+    <h2>Home Page</h2>
+    <p class="be-gui-form-hint">
+	Only 'Pages' can be used for the Home page. 'Archive Entries'
+	cannot be used because of how the website is designed.
+    </p>
+    <form class="be-gui-form"
+	  action="/site-settings/update-home-page"
+	  method="post">
+	<input required
+	       type="hidden"
+	       name="AUTHENTICITY-TOKEN"
+	       value="{{token}}">
+	<p>Currently set to: <strong>{{settings.home-page}}</strong></p>
+	<div class="be-gui-form-row">
+	    <select required
+		    name="SET-HOME-PAGE">
+		<option>Select Page</option>
+		{% for page in pages %}
+		<option value="{{page.slug}}">{{page.title}}</option>
+		{% endfor %}
+	    </select>
+	    <button class="be-gui-button-no-text"
+		    title="Click to update the website's home page"
+		    type="submit">
+		<img alt="Update site's home page"
+		     src="/images/icons/save.png">
+	    </button>
+	</div>
+    </form>
+
+    <hr>
+
+        <h2>Site Logo</h2>
+    <form class="be-gui-form"
+          action="/site-settings/update-site-logo"
+          method="post"
+          enctype="multipart/form-data">
+	<input required
+               type="hidden"
+               name="AUTHENTICITY-TOKEN"
+               value="{{token}}">
+        <div class="be-gui-form-row">
+            <img class="be-gui-form-thumbnail"
+                 alt="Site Logo"
+                 src="/images/site-logo.png">
+	    <input required
+                   type="file"
+                   name="SITE-LOGO">
+            <button class="be-gui-button-no-text"
+		    title="Click to update the site's logo"
+		    type="submit">
+	        <img alt="Update site's logo"
+		     src="/images/icons/save.png">
+	    </button>
+        </div>
+    </form>
+
+    <form class="be-gui-form"
+          action="/site-settings/update-enable-site-logo"
+          method="post">
+	<input required
+               type="hidden"
+               name="AUTHENTICITY-TOKEN"
+               value="{{token}}">
+        <div class="be-gui-form-row">
+	    <input type="checkbox"
+                   name="ENABLE-SITE-LOGO"
+	           {% if settings.enable-site-logo == 1 %}
+	           checked
+	           {% endif %}
+	    >
+	    <label>Enable Site Logo</label>
+            <button class="be-gui-button-no-text"
+		    title="Click to update the site's logo"
+		    type="submit">
+	        <img alt="Update site's logo"
+		     src="/images/icons/save.png">
+	    </button>
+        </div>
+    </form>
+
+    <hr>
+
+    <h2>Sign-Up</h2>
+    <p class="be-gui-form-hint">
+	Enabling this setting allows anyone to create account. If this
+	setting is disabled you can still create accounts via the
+	'Manage Accounts' link above.
+    </p>
+    <form class="be-gui-form"
+	  action="/site-settings/update-sign-up"
+	  method="post">
+	<input required
+	       type="hidden"
+	       name="AUTHENTICITY-TOKEN"
+	       value="{{token}}">
+	<div class="be-gui-form-row">
+	    <input type="checkbox"
+	           name="ENABLE-SIGN-UP"
+	           {% if settings.enable-sign-up == 1 %}
+	           checked
+	           {% endif %}
+	    >
+	    <label>Enable Sign-Up</label>
+	    <button class="be-gui-button-no-text"
+		           title="Click to save 'Enable Sign-Up' setting"
+		           type="submit">
+	        <img alt="Save nav. menu setting for{{db-data.title}}"
+		     src="/images/icons/save.png">
+	    </button>
+	</div>
+    </form>
+
+    <hr>
+    
+    <h2>Nav. Menu</h2>
+    <form class="be-gui-form"
+          action="/site-settings/update-nav-menu"
+          method="post">
+	<input required
+               type="hidden"
+               name="AUTHENTICITY-TOKEN"
+               value="{{token}}">
 	{% for page in pages %}
-	<option value="{{page.slug}}">{{page.title}}</option>
+        <div class="be-gui-form-row">
+	    <input type="hidden"
+                   name="NAV-MENU[{{page.slug}}]"
+                   value="off">
+	    <input type="checkbox"
+                   name="NAV-MENU[{{page.slug}}]"
+	           {% if page.enable-nav-menu == 1 %}
+	           value="on"
+	           checked
+	           {% endif %}
+	    >
+	    <label>{{page.title}}</label>
+        </div>
 	{% endfor %}
-    </select>
-    <input type="submit" value="Set Home Page">
-</form>
-
-<h2>Site Name</h2>
-<form action="/site-settings/update-site-name" method="post">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <input required type="text" name="SITE-NAME" value="{{settings.site-name}}">
-    <input type="submit" value="Save Changes">
-</form>
+        <br>
+        <button class="be-gui-button"
+		title="Click to update Navigation Menu"
+		type="submit">
+	    <img alt="Update Navigation Menu"
+		 src="/images/icons/save.png">
+            Update Navigation Menu
+	</button>
+    </form>
 
-<h2>Site-Wide Code Snippet</h2>
-<form action="/site-settings/update-code-snippet" method="post">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <input required type="text" name="CODE-SNIPPET" value="{{site-wide-snippet}}">
-    <input type="submit" value="Save Changes">
-</form>
+    <hr>
+    
+    <h2>Favicon</h2>
+    <p class="be-gui-form-hint">
+        A Favicon is the little image in the browser tab.
+    </p>
+    <form class="be-gui-form"
+          action="/site-settings/update-favicon"
+          method="post"
+          enctype="multipart/form-data">
+	<input required
+               type="hidden"
+               name="AUTHENTICITY-TOKEN"
+               value="{{token}}">
+        <div class="be-gui-form-row">
+            <img class="be-gui-form-thumbnail"
+                 alt="Favicon"
+                 src="/images/favicon.png">
+	    <input required
+                   type="file"
+                   name="FAVICON-FILE">
+            <button class="be-gui-button-no-text"
+		    title="Click to update the site's favicon"
+		    type="submit">
+	        <img alt="Update Favicon"
+		     src="/images/icons/save.png">
+	    </button>
+        </div>
+    </form>
 
-<h2>Change Favicon</h2>
-<img alt="Favicon" src="/images/favicon.png">
-<form action="/site-settings/update-favicon" method="post" enctype="multipart/form-data">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <input required type="file" name="FAVICON-FILE">
-    <input type="submit" value="Save Changes">
-</form>
+    <hr>
 
-<h2>Site Logo</h2>
-<img alt="Site Logo" src="/images/site-logo.png">
-<form action="/site-settings/update-enable-site-logo" method="post">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <input type="checkbox" name="ENABLE-SITE-LOGO"
-	   {% if settings.enable-site-logo == 1 %}
-	   checked
-	   {% endif %}
-    >
-    <label>Enable Site Logo</label>
-    <input type="submit" value="Save Changes">
-</form>
-<form action="/site-settings/update-site-logo" method="post" enctype="multipart/form-data">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <input required type="file" name="SITE-LOGO">
-    <input type="submit" value="Save Changes">
-</form>
+    <h2>Site-Wide Code Snippet</h2>
+    <p class="be-gui-form-hint">
+        Enter HTML and JavaScript in the text box below and it will be added to
+        each Page and Archive Entry automatically. The intended use-case for
+        this is adding a snippet provided by Umami to track page views, device
+        types and which country the viewer is in. If you are unsure what any of
+        that means, just ignore this section.
+    </p>
+    <form class="be-gui-form"
+          action="/site-settings/update-code-snippet"
+          method="post">
+	<input required
+               type="hidden"
+               name="AUTHENTICITY-TOKEN"
+               value="{{token}}">
+        <textarea required
+                  rows="10"
+                  name="CODE-SNIPPET">{{site-wide-snippet}}
+        </textarea>
+        <button class="be-gui-button"
+		title="Click to save 'Enable Sign-Up' setting"
+		type="submit">
+	    <img alt="Save nav. menu setting for{{db-data.title}}"
+		 src="/images/icons/save.png">
+            Save Snippet
+	</button>
+    </form>
+</main>
 {% endblock %}