Bunch of ui stuff

src/yasi_applets/main/header.html

@@ -4,7 +4,16 @@
 <!-- drag region class: -->
 <div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;">
 
-<a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> <i class="fa fa-bars" aria-hidden="true"></i> </button> </a>
+
+<!--
+You might be tempted to replace the unicode character by a fa-code as in the
+alternate commend below. Don't do it, it causes all kinds of artifacts and
+glitches as the page reloads (and makes it feel much more like an old website
+than a proper webapp.
+-->
+<a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> ☰ </button> </a>
+<!--
+<a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> <i class="fa fa-bars" aria-hidden="true"></i> </button> </a> -->
 
 {% for item in menu_order %}
     <a href="{{ menu[item][1]}}"> <button class="button is-{% if request.path == menu[item][1] %}info{% else %}dark{% endif %}"> {{ menu[item][0]}} </button></a>

src/yasi_applets/main/help.html

@@ -4,12 +4,18 @@
 
     <div style="background-color: #424242; padding: 15px; border-radius: 15px; boders: none; color: white;">
     <h1 class="is-size-4"> Help </h1>
-    <br/><p class="title is-6"><span class="tag is-danger">The help system is not yet implemented.</span>
-
-
-
+    <br>
 
+    <p>The help system is not yet implemented.</p>
+    <br>
+    <p>Some keyboard tips:<p>
+    <br>
+    <ul>
+    <li>ALT+n or CTRL+PGDn moves to the next page.</li>
+    <li>ALT+p or CTRL+PGUp moves to the previous page.</li>
+    </ul>
 
+    <br>
     <div class="columns">
       <a href="/welcome"><div class="column"><button class="button is-link">Continue</button></div></a>
     </div>

src/yasi_applets/main/templates/footer.html

@@ -1,36 +0,0 @@
-<!-- Buttons on the left -->
-<div style="position: absolute; bottom: 15px; left: 15px;">
-
-{% if previous_step %}
-    <!-- Why two of these? So that we can use two different keyboard shortcuts for back. -->
-    <button style="display: none;" hx-get="/{{ previous_step }}" hx-target="body"
-       hx-trigger="click, keydown[altKey&&key=='b'] from:body"></button>
-    <a href="/{{ previous_step }}"><button hx-get="/{{ previous_step }}" hx-target="body"
-       hx-trigger="click, keydown[ctrlKey&&code=='PageUp'] from:body" class="button is-light">Back</button></a>
-{% endif %}
-
-{% if bottom_menu %}
-   {{ bottom_menu | safe }}
-{% endif %}
-
-</div> <!-- end buttons on the left  -->
-
-
-<!-- Buttons on the right -->
-<div style="position: absolute; bottom: 15px; right: 15px;">
-
-{% if next_step %}
-
-    {% if next_step == "install" %}
-        <a href="/{{ next_step }}"><button hx-get="/{{ next_step }}" hx-target="body"
-	hx-trigger="click, keyup[altKey&&key=='i'] from:body" class="button is-link">Install</button></a>
-    {% else %}
-    <!-- Why two of these? So that we can use two different keyboard shortcuts for next. -->
-    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
-       hx-trigger="click, keydown[ctrlKey&&code=='PageDown'] from:body" class=""></button></a>
-    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
-       hx-trigger="click, keydown[altKey&&key=='n'] from:body" class="button is-link">Next</button></a>
-    {% endif %}
-    {% endif %}
-
-</div> <!-- end buttons on the right -->

src/yasi_applets/main/templates/header.html

@@ -1,20 +0,0 @@
-<!-- Header -->
-<div id="titlebar" style="padding: 15px; margin: -15px; padding-bottom: 30px;"> 
-
-<!-- drag region class: -->
-<div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;">
-
-<a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> ☰ </button </a>
-
-{% for item in menu_order %}
-    <a href="{{ menu[item][1]}}"> <button class="button is-{% if request.path == menu[item][1] %}info{% else %}dark{% endif %}"> {{ menu[item][0]}} </button></a>
-{% endfor %}
-
-
-<div style="position: absolute; top: 15px; right: 15px;">
-    <a hx-get="/main/help" hx-swap="outerHTML"/> <button class="button is-light"> <b> ? </b> </button></a>
-    <a hx-get="/main/quit" hx-swap="outerHTML"/><button onclick="closeApp()" class="button is-danger" >  🗙 </button></a>
-</div>
-
-</div> <!-- end pywebview-drag-region -->
-<!-- End Header -->

src/yasi_applets/main/templates/layout.html

@@ -1,27 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="/main/static/bulma.css" rel="stylesheet">
-  <link href="/main/static/system-installer.css" rel="stylesheet">
-  <link rel="shortcut icon" href="/main/static/icons/blippie.png" type="image/x-icon">
-  <link rel="stylesheet" href="/main/static/fork-awesome.css">
-  <script src="/main/static/htmx.min.js" crossorigin="anonymous"></script>
-</head>
-<body>
-
-<div class="frame">
-{% include "header.html" %}
-
-<div class="applet">
-{% block body %}
-{% endblock %}
-</div>
-
-{% include "footer.html" %}
-
-</div> <!-- class "frame" -->
-
-</body>
-</html>