Web UI: Inject a Go Back link on all pages, except the index and upload page (#1302)

* Move the manual and go back elements into footer; log controls in log page

* Move inline css style to stylesheet

* Touch up page layout

* Use a Home icon for going to the index page

* Use one vertical table for device info

python/web/src/static/themes/classic/style.css

@@ -21,6 +21,11 @@ td {
   margin: none;
 }
 
+th {
+  color: white;
+  background-color: black;
+}
+
 h1 {
   color: white;
   font-size: 20px;
@@ -97,6 +102,10 @@ div.flash div.info {
   background-color: #0d6efd;
 }
 
+div.flash > div a {
+  display: none;
+}
+
 td.inactive {
   text-align: center;
   background-color: tan;

python/web/src/static/themes/modern/icons/home.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>

python/web/src/static/themes/modern/icons/manual.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>

python/web/src/static/themes/modern/style.css

@@ -545,7 +545,7 @@ div.flash > div {
 }
 
 div.flash > div a {
-  display: inline-block !important;
+  display: inline-block;
   padding: 0.25rem 0.75rem;
   margin-left: auto;
   color: #fff;
@@ -948,27 +948,6 @@ section#system div.power-control {
   }
 }
 
-/*
- ------------------------------------------------------------------------------
- Index > Section: Manual
- ------------------------------------------------------------------------------
- */
-section#manual {
-  margin: 2rem 0 1rem;
-}
-
-section#manual a {
-  margin: auto;
-  display: block;
-  padding: 0.25rem 0 0.25rem 2rem;
-  background: url("icons/manual.svg") no-repeat left center;
-  font-weight: bold;
-}
-
-section#manual a p {
-  margin: 0;
-}
-
 /*
  ------------------------------------------------------------------------------
  Admin > Section: Services
@@ -1072,3 +1051,18 @@ body.page-manpage div.content p.home {
   margin-top: 2rem;
   font-weight: bold;
 }
+
+/*
+ ------------------------------------------------------------------------------
+ Base > Back
+ ------------------------------------------------------------------------------
+ */
+a.back {
+  padding: 0.25rem 0 0.25rem 2rem;
+  font-weight: bold;
+  background: url("icons/home.svg") no-repeat left center;
+}
+
+a.back span.separator {
+  display: none;
+}

python/web/src/templates/admin.html

@@ -189,6 +189,5 @@
 </div>
 </section>
 
-<p class="home"><a href="/">{{ _("Go to Home") }}</a></p>
-
+<hr/>
 {% endblock content %}

python/web/src/templates/base.html

@@ -95,7 +95,7 @@
                     {% else %}
                         <div>{{ message }}</div>
                     {% endif %}
-                    <a style="display: none;" href="/"></a>
+                    <a href="/"></a>
                 </div>
             {% endfor %}
         {% endif %}
@@ -105,7 +105,15 @@
         {{ content_class }}
         {% block content %}{% endblock content %}
     </div>
+    {% if not is_root_page %}
+    <div class="content">
+        <a class="back" href="/"><span class="separator">&lt;&lt; </span>{{ _("Go to Home") }}</a>
+    </div>
+    {% endif %}
     <div align="center" class="footer">
+        <div>
+            <a href="/sys/manpage?app=piscsi">{{ _("Read the PiSCSI Manual") }}</a>
+        </div>
         <div>
             {{ _("PiSCSI software version:") }} <b>{{ env["version"] }}</b>
         </div>

python/web/src/templates/deviceinfo.html

@@ -2,56 +2,38 @@
 
 {% block content %}
 <h2>{{ _("Detailed Info for Attached Devices") }}</h2>
-{% for device in devices %}
 <p>
 <table border="black" cellpadding="3" summary="Detailed information for attached devices">
 <tr>
     <th scope="row">{{ _("SCSI ID") }}</th>
-    <td>{{ device["id"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("LUN") }}</th>
-    <td>{{ device["unit"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Type") }}</th>
-    <td>{{ device["device_type"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Status") }}</th>
-    <td>{{ device["status"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("File") }}</th>
-    <td>{{ device["image"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Parameters") }}</th>
-    <td>{{ device["params"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Vendor") }}</th>
-    <td>{{ device["vendor"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Product") }}</th>
-    <td>{{ device["product"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Revision") }}</th>
-    <td>{{ device["revision"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Block Size") }}</th>
-    <td>{{ device["block_size"] }}</td>
-</tr>
-<tr>
     <th scope="row">{{ _("Image Size") }}</th>
+</tr>
+{% for device in devices %}
+<tr>
+    <td>{{ device["id"] }}</td>
+    <td>{{ device["unit"] }}</td>
+    <td>{{ device["device_type"] }}</td>
+    <td>{{ device["status"] }}</td>
+    <td>{{ device["image"] }}</td>
+    <td>{{ device["params"] }}</td>
+    <td>{{ device["vendor"] }}</td>
+    <td>{{ device["product"] }}</td>
+    <td>{{ device["revision"] }}</td>
+    <td>{{ device["block_size"] }}</td>
     <td>{{ device["size"] }}</td>
 </tr>
+{% endfor %}
 </table>
 </p>
-{% endfor %}
-<p class="home"><a href="/">{{ _("Go to Home") }}</a></p>
 
+<hr/>
 {% endblock content %}

python/web/src/templates/diskinfo.html

@@ -3,6 +3,6 @@
 {% block content %}
 <h2>{{ _("Disk Image Details: %(file_name)s", file_name=file_name) }}</h2>
 <p><pre>{{ diskinfo }}</pre></p>
-<p class="home"><a href="/">{{ _("Go to Home") }}</a></p>
 
+<hr/>
 {% endblock content %}

python/web/src/templates/drives.html

@@ -112,6 +112,6 @@
 </tbody>
 </table>
 <p><small>{{ _("%(disk_space)s MiB disk space remaining on the Pi", disk_space=env["free_disk_space"]) }}</small></p>
-<p class="home"><a href="/">{{ _("Go to Home") }}</a></p>
 
+<hr/>
 {% endblock content %}

python/web/src/templates/index.html

@@ -669,9 +669,4 @@
 </section>
 
 <hr/>
-
-<section id="manual">
-<a href="/sys/manpage?app=piscsi"><p>{{ _("Read the PiSCSI Manual") }}</p></a>
-</section>
-
 {% endblock content %}

python/web/src/templates/logs.html

@@ -2,7 +2,32 @@
 
 {% block content %}
 <h2>{{ _("System Logs: %(scope)s %(lines)s lines", scope=scope, lines=lines) }}</h2>
+<div>
+<form action="/logs/show" method="post">
+    <label for="log_lines">{{ _("Log Lines:") }}</label>
+    <input name="lines" id="log_lines" type="number" value="200" min="0" max="99999" step="100">
+    <label for="log_scope">{{ _("Scope:") }}</label>
+    <select name="scope" id="log_scope">
+        <option value="">
+            {{ _("All logs") }}
+        </option>
+        <option value="piscsi">
+            piscsi
+        </option>
+        <option value="piscsi-web">
+            piscsi-web
+        </option>
+        <option value="piscsi-oled">
+            piscsi-oled
+        </option>
+        <option value="piscsi-ctrlboard">
+            piscsi-ctrlboard
+        </option>
+    </select>
+    <input type="submit" value="{{ _("Show Logs") }}">
+</form>
+</div>
 <p><pre>{{ logs }}</pre></p>
-<p class="home"><a href="/">{{ _("Go to Home") }}</a></p>
 
+<hr/>
 {% endblock content %}

python/web/src/templates/manpage.html

@@ -7,5 +7,5 @@
 {{ manpage | safe }}
 </div>
 
-<p class="home"><a href="/">{{ _("Go to Home") }}</a></p>
+<hr/>
 {% endblock content %}

python/web/src/web.py

@@ -261,6 +261,7 @@ def index():
     return response(
         template="index.html",
         page_title=_("PiSCSI Control Page"),
+        is_root_page=True,
         netinfo=piscsi_cmd.get_network_info(),
         bridge_configured=sys_cmd.is_bridge_setup(),
         devices=formatted_devices,
@@ -347,6 +348,7 @@ def upload_page():
     return response(
         template="upload.html",
         page_title=_("PiSCSI File Upload"),
+        is_root_page=True,
         images_subdirs=file_cmd.list_subdirs(server_info["image_dir"]),
         shared_subdirs=file_cmd.list_subdirs(FILE_SERVER_DIR),
         file_server_dir_exists=Path(FILE_SERVER_DIR).exists(),