mirror of
https://github.com/Ardour/ardour.git
synced 2025-12-16 11:46:25 +01:00
WebSockets: improve index page design
This commit is contained in:
parent
320233b075
commit
fef1ed81ed
3 changed files with 17 additions and 19 deletions
|
|
@ -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
|
|
||||||
 
|
|
||||||
<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
|
|
||||||
 
|
|
||||||
<span class="disk-path"></span>
|
|
||||||
</h2>
|
|
||||||
<ul></ul>
|
<ul></ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
 
|
||||||
|
<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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue