WebSockets: improve index page design

This commit is contained in:
Luciano Iam 2020-04-12 10:29:20 +02:00 committed by Robin Gareus
parent 320233b075
commit fef1ed81ed
No known key found for this signature in database
GPG key ID: A090BCE02CF57F04
3 changed files with 17 additions and 19 deletions

View file

@ -15,19 +15,11 @@
<div id="index" style="display:none"> <div id="index" style="display:none">
<h1>Available Web Surfaces</h1> <h1>Available Web Surfaces</h1>
<div class="surface-list" id="builtin"> <div class="surface-list" id="builtin">
<h2> <h2>Built-In</h2>
Built-In
&emsp;
<span class="disk-path"></span>
</h2>
<ul></ul> <ul></ul>
</div> </div>
<div class="surface-list" id="user"> <div class="surface-list" id="user">
<h2> <h2>User</h2>
User
&emsp;
<span class="disk-path"></span>
</h2>
<ul></ul> <ul></ul>
</div> </div>
</div> </div>

View file

@ -87,6 +87,6 @@ h2 {
.disk-path { .disk-path {
font-family: Monaco, monospace; font-family: Monaco, monospace;
font-size: 0.66em; font-size: 0.9em;
color: #bbb; color: #444;
} }

View file

@ -33,13 +33,19 @@ import { Ardour } from '/shared/ardour.js';
function printIndex (index) { function printIndex (index) {
for (const group of index) { for (const group of index) {
const span = document.querySelector(`#${group.path} span`); const ul = document.querySelector(`#${group.path} > ul`);
span.innerHTML = group.diskPath;
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) { if (group.surfaces.length > 0) {
const ul = document.querySelector(`#${group.path} > ul`);
group.surfaces.sort((a, b) => a.name.localeCompare(b.name)); group.surfaces.sort((a, b) => a.name.localeCompare(b.name));
for (const surface of group.surfaces) { for (const surface of group.surfaces) {
const li = document.createElement('li'); const li = document.createElement('li');
li.innerHTML = `<li> li.innerHTML = `<li>
@ -51,9 +57,9 @@ import { Ardour } from '/shared/ardour.js';
ul.appendChild(li); ul.appendChild(li);
} }
} else { } else {
const p = document.createElement('p'); const li = document.createElement('li');
p.innerHTML = '<p>No surfaces found</p>'; li.innerHTML = 'No surfaces found';
document.getElementById(group.path).appendChild(p); ul.appendChild(li);
} }
} }