Add QR code for wifi on index page, some responsive design fixes

app/templates/admin.html

@@ -1,10 +1,16 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <h1>{{ _('Application Settings') }}</h1>
+    <h1 class="title is-large butter-title">{{ _('Application Settings') }}</h1>
+
 {% import "bulma_wtf.html" as wtf %}
     <form action="" method="post" enctype="multipart/form-data" novalidate >
         {{ form.hidden_tag() }}
+        <p> {{ form.submit( class="button is-link") }}
+            {% if config['SETTINGS_CHANGED'] %}
+            {{ form.apply_changes(class="button is-warning") }}
+            {% endif %}
+        </p>
         <div class="field">
             {{ wtf.form_input_field(form.ssid) }}
             <p class="help"> This is the name of the advertised Wi-Fi network. Current SSID: {{ get_setting('ssid') }}</p>
@@ -56,11 +62,7 @@
             <p class="help">This is the logo shown in the UI. Current logo: <br>
         <img src="{{ get_setting('butterbox_logo') }}" style="height: 50px"> </p>
         </div>
-        <p> {{ form.submit( class="button is-link") }}
-            {% if config['SETTINGS_CHANGED'] %}
-            {{ form.apply_changes(class="button is-warning") }}
-            {% endif %}
-        </p>
+
     </form>
 
     <a href="{{ url_for('logout') }}">Logout</a>

app/templates/base.html

@@ -19,7 +19,7 @@
         <p style="display: inline; padding-inline-start: 10px;">{{ get_setting('butterbox_name') }}</p>
     </div>
 
-<div class="content"> {% block content %}{% endblock %} </div>
+<div class="content"> </div>
     {% with messages = get_flashed_messages() %}
         {% if messages %}
     <div class="notification">
@@ -31,6 +31,9 @@
         </div>
         {% endif %}
         {% endwith %}
+
+    {% block content %}{% endblock %}
+
 </div>
     </body>
 </html>

app/templates/index.html

@@ -2,7 +2,8 @@
 
 {% block content %}
     <h1 class="title is-large butter-title">Hi, welcome to the {{get_setting('butterbox_name')}}.</h1>
- <p class="subtitle butter-title"> View and download the information you want from this offline box.</p>
+    <p class="subtitle butter-title"> View and download the information you want from this offline box.</p>
+
 <div class="grid">
     {% for service in services %}
         <a class="cell button is-large is-responsive butter-service" href={{ service.url }}>
@@ -11,7 +12,14 @@
         </div>
      </a>
     {% endfor %}
-
-
+</div>
+</hr>
+    {% if display_wifi_password %}
+    <div class="block" style="align-content: center; text-align: center;">
+        <p>Connect to this box with wifi:
+        <img class="image is-128x128" style="margin: 0 auto" src="{{ url_for('static', filename='images/wifi_qr_code.png') }}">
+        </p>
     </div>
+    {% endif %}
+
 {% endblock %}

app/templates/messaging.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
+    <h1 class="title is-large butter-title">{{ _('Secure Messaging') }}</h1>
 
 <div class="block">
     <p> To use secure messaging, install Delta Chat and then return to this page to create your local offline account</p>

app/templates/usb-file-viewer.html

@@ -1,13 +1,15 @@
 {% extends "base.html" %}
 
 {% block content %}
+    <h1 class="title is-large butter-title">{{ _('File Viewer') }}</h1>
+
 <div>
-<table class="table">
+<table class="table" style="margin: 0 auto">
   <thead>
     <tr>
        <th></th>
       <th>File Name</th>
-      <th>Date modified</th>
+      <th class="file-viewer-date-modified">Date modified</th>
         <th>Download</th>
     </tr>
   </thead>
@@ -23,7 +25,7 @@
         <td>{{ f.name}}</td>
         {% endif %}
 
-        <td>{{ f.last_modified}}</td>
+        <td class="file-viewer-date-modified">{{ f.last_modified}}</td>
           {% if f.is_file %}
            <td><a href="{{ url_for('serve_file', filepath=f.path) }}">Download</a></td>
           {% endif %}