WebSockets: improve index page design

3 files changed, 17 insertions, 19 deletions

diff --git a/share/web_surfaces/index.html b/share/web_surfaces/index.html
index 2f32d9e64c..5ffccd4dd9 100644
--- a/share/web_surfaces/index.html
+++ b/share/web_surfaces/index.html
@@ -15,19 +15,11 @@
             <div id="index" style="display:none">
                 <h1>Available Web Surfaces</h1>
                 <div class="surface-list" id="builtin">
-                    <h2>
-                        Built-In
-                        &emsp;
-                        <span class="disk-path"></span>
-                    </h2>
+                    <h2>Built-In</h2>
                     <ul></ul>
                 </div>
                 <div class="surface-list" id="user">
-                    <h2>
-                        User
-                        &emsp;
-                        <span class="disk-path"></span>
-                    </h2>
+                    <h2>User</h2>
                     <ul></ul>
                 </div>
             </div>
diff --git a/share/web_surfaces/index/main.css b/share/web_surfaces/index/main.css
index f9726e7c11..fb13d28401 100644
--- a/share/web_surfaces/index/main.css
+++ b/share/web_surfaces/index/main.css
@@ -87,6 +87,6 @@ h2 {
 
 .disk-path {
 	font-family: Monaco, monospace;
-	font-size: 0.66em;
-	color: #bbb;
+	font-size: 0.9em;
+	color: #444;
 }
diff --git a/share/web_surfaces/index/main.js b/share/web_surfaces/index/main.js
index 0a90d1b62d..1b6c5e9ae3 100644
--- a/share/web_surfaces/index/main.js
+++ b/share/web_surfaces/index/main.js
@@ -33,13 +33,19 @@ import { Ardour } from '/shared/ardour.js';
 
     function printIndex (index) {
         for (const group of index) {
-            const span = document.querySelector(`#${group.path} span`);
-            span.innerHTML = group.diskPath;
+            const ul = document.querySelector(`#${group.path} > ul`);
+            
+            const li = document.createElement('li');
+            li.innerHTML = `<li>
+                <span>Filesystem location:</span>
+                &thinsp;
+                <span class="disk-path">${group.diskPath}</span>
+            </li>`;
+            ul.appendChild(li);
 
             if (group.surfaces.length > 0) {
-                const ul = document.querySelector(`#${group.path} > ul`);
                 group.surfaces.sort((a, b) => a.name.localeCompare(b.name));
-                
+
                 for (const surface of group.surfaces) {
                     const li = document.createElement('li');
                     li.innerHTML = `<li>
@@ -51,9 +57,9 @@ import { Ardour } from '/shared/ardour.js';
                     ul.appendChild(li);
                 }
             } else {
-                const p = document.createElement('p');
-                p.innerHTML = '<p>No surfaces found</p>';
-                document.getElementById(group.path).appendChild(p);
+                const li = document.createElement('li');
+                li.innerHTML = 'No surfaces found';
+                ul.appendChild(li);
             }
         }