Improve UX for file upload forms (#1299)

* Improve UX for file upload forms

* Fix styles for admin service list

* Turn tabs into spaces

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

@@ -974,12 +974,12 @@ section#manual a p {
  Admin > Section: Services
  ------------------------------------------------------------------------------
  */
-section#services ul {
+section#services ul.service-list {
   list-style: none;
   padding-left: 0;
 }
 
-section#services li {
+section#services li.service-item {
   margin-bottom: 0.5em;
   padding: 0.25rem 0 0.25rem 2rem;
 }

python/web/src/templates/admin.html

@@ -117,12 +117,12 @@
         <li>{{ _("In order to manage the services in the Web UI, you may install Webmin as well.") }}</li>
     </ul>
 </details>
-<ul>
+<ul class="service_status">
     {% if netatalk_configured %}
-    <li class="enabled">
+    <li class="service-item enabled">
         {{ _("Mac AFP file sharing is enabled.") }}
     {% else %}
-    <li class="disabled">
+    <li class="service-item disabled">
         {{ _("Mac AFP file sharing is disabled.") }}
     {% endif %}
     </li>
@@ -134,10 +134,10 @@
     </li>
     {% endif %}
     {% if samba_configured %}
-    <li class="enabled">
+    <li class="service-item enabled">
         {{ _("Windows SMB file sharing is enabled.") }}
     {% else %}
-    <li class="disabled">
+    <li class="service-item disabled">
         {{ _("Windows SMB file sharing is disabled.") }}
     {% endif %}
     </li>
@@ -149,18 +149,18 @@
     </li>
     {% endif %}
     {% if ftp_configured %}
-    <li class="enabled">
+    <li class="service-item enabled">
         {{ _("FTP file sharing is enabled.") }}
     {% else %}
-    <li class="disabled">
+    <li class="service-item disabled">
         {{ _("FTP file sharing is disabled.") }}
     {% endif %}
     </li>
     {% if macproxy_configured %}
-    <li class="enabled">
+    <li class="service-item enabled">
         {{ _("Vintage web proxy is running at %(ip_addr)s (default port 5000)", ip_addr=env['ip_addr']) }}
     {% else %}
-    <li class="disabled">
+    <li class="service-item disabled">
         {{ _("Vintage web proxy is disabled.") }}
     {% endif %}
     </li>

python/web/src/templates/index.html

@@ -383,35 +383,35 @@
     </summary>
     <ul>
         <li>{{ _("Disk Images") }} = {{ env["image_dir"] }}</li>
-	{% if file_server_dir_exists %}
+        {% if file_server_dir_exists %}
         <li>{{ _("Shared Files") }} = {{ FILE_SERVER_DIR }}</li>
-	{% else %}
+        {% else %}
         <li>{{ _("Install a file server and create the shared files directory in order to share files between the Pi and your vintage computers.") }}</li>
-	{% endif %}
+        {% endif %}
     </ul>
 </details>
 
 <form action="/files/download_url" method="post">
     <label for="download_url">{{ _("Download file from URL:") }}</label>
     <input name="url" id="download_url" required="" type="url">
+    <label for="disk_images" class="hidden">{{ _("Disk Images") }}</label>
     <input type="radio" name="destination" id="disk_images" value="disk_images" checked="checked">
-    <label for="disk_images">{{ _("Disk Images") }}</label>
     <label for="images_subdir" class="hidden">{{ _("Directory") }}</label>
     <select name="images_subdir" id="images_subdir">
     {% for dir in images_subdirs %}
-    <option value="{{dir}}">{{dir}}</option>
+    <option value="{{dir}}">{{env['image_root_dir']}}/{{dir}}</option>
     {% endfor %}
-    <option value="" selected>/</option>
+    <option value="" selected>{{env['image_root_dir']}}/</option>
     </select>
     {% if file_server_dir_exists %}
+    <label for="shared_files" class="hidden">{{ _("Shared Files") }}</label>
     <input type="radio" name="destination" id="shared_files" value="shared_files">
-    <label for="shared_files">{{ _("Shared Files") }}</label>
     <label for="shared_subdir" class="hidden">{{ _("Directory") }}</label>
     <select name="shared_subdir" id="shared_subdir">
     {% for dir in shared_subdirs %}
-    <option value="{{dir}}">{{dir}}</option>
+    <option value="{{dir}}">{{env['shared_root_dir']}}/{{dir}}</option>
     {% endfor %}
-    <option value="" selected>/</option>
+    <option value="" selected>{{env['shared_root_dir']}}/</option>
     </select>
     {% endif %}
     <input type="submit" value="{{ _("Download") }}" onclick="processNotify('{{ _("Downloading File...") }}')">

python/web/src/templates/upload.html

@@ -14,24 +14,24 @@
 <form name="dropper" action="/files/upload" method="post" class="dropzone dz-clickable" enctype="multipart/form-data" id="dropper">
     <fieldset>
     <legend>{{ _("Destination") }}</legend>
+    <label for="disk_images" class="hidden">{{ _("Disk Images") }}</label>
     <input type="radio" name="destination" id="disk_images" value="disk_images" checked="checked">
-    <label for="disk_images">{{ _("Disk Images") }}</label>
     <label for="images_subdir" class="hidden">{{ _("Directory") }}</label>
     <select name="images_subdir" id="images_subdir">
     {% for dir in images_subdirs %}
-    <option value="{{dir}}">{{dir}}</option>
+    <option value="{{dir}}">{{ env['image_root_dir'] }}/{{dir}}</option>
     {% endfor %}
-    <option value="" selected>/</option>
+    <option value="" selected>{{ env['image_root_dir'] }}/</option>
     </select>
     {% if file_server_dir_exists %}
+    <label for="shared_files" class="hidden">{{ _("Shared Files") }}</label>
     <input type="radio" name="destination" id="shared_files" value="shared_files">
-    <label for="shared_files">{{ _("Shared Files") }}</label>
     <label for="shared_subdir" class="hidden">{{ _("Directory") }}</label>
     <select name="shared_subdir" id="shared_subdir">
     {% for dir in shared_subdirs %}
-    <option value="{{dir}}">{{dir}}</option>
+    <option value="{{dir}}">{{ env['shared_root_dir'] }}/{{dir}}</option>
     {% endfor %}
-    <option value="" selected>/</option>
+    <option value="" selected>{{ env['shared_root_dir'] }}/</option>
     </select>
     {% endif %}
     <input type="radio" name="destination" id="piscsi_config" value="piscsi_config">

python/web/src/web.py

@@ -125,6 +125,7 @@ def get_env_info():
         "version": server_info["version"],
         "image_dir": server_info["image_dir"],
         "image_root_dir": Path(server_info["image_dir"]).name,
+        "shared_root_dir": Path(FILE_SERVER_DIR).name,
         "cd_suffixes": tuple(server_info["sccd"]),
         "rm_suffixes": tuple(server_info["scrm"]),
         "mo_suffixes": tuple(server_info["scmo"]),