light9 Changeset - 758ce4dfbd2f

Changeset - 758ce4dfbd2f

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

drewp@bigasterisk.com - 3 years ago 2022-06-02 19:21:46
drewp@bigasterisk.com

asco layout

3 files changed with 15 insertions and 9 deletions:

light9/ascoltami/index.html

light9/ascoltami/main.ts

light9/web/style.css

0 comments (0 inline, 0 general)

light9/ascoltami/index.html

➞

Show inline comments

@@ @@ -2,42 +2,49 @@ @@
 <html>
   <head>
     <title>ascoltami on {{host}}</title>
     <link rel="stylesheet" href="./style.css" />
     <style>
       #cmd-go {
         min-width: 5em;
+      }
       .song-name {
         padding-left: 0.4em;
+      }
     </style>
     <meta name="viewport" content="user-scalable=no, width=500, initial-scale=1">
   </head>
   <body>
     <h1>ascoltami on {{host}}</h1>
     <div class="songs"></div>
     <div class="dimStalled">
       <table>
         <tr>
           <td colspan="3"><strong>Song:</strong> <span id="currentSong"></span></td>
           <td colspan="3">
             <strong>Song:</strong> <span id="currentSong"></span>
           </td>
         </tr>
         <tr>
           <td><strong>Time:</strong> <span id="currentTime"></span></td>
           <td><strong>Left:</strong> <span id="leftTime"></span></td>
           <td><strong>Until autostop:</strong> <span id="leftAutoStopTime"></span></td>
           <td>
             <strong>Until autostop:</strong> <span id="leftAutoStopTime"></span>
           </td>
         </tr>
         <tr>
           <td colspan="3">
             <strong>Update freq:</strong> requested <span id="updateReq"></span>, actual <span id="updateActual"></span> <strong>States:</strong>
             <strong>Update freq:</strong> requested
             <span id="updateReq"></span>, actual
             <span id="updateActual"></span> <strong>States:</strong>
             <span id="states"></span>
           </td>
         </tr>
       </table>
       <div class="timeRow">
         <div id="timeSlider"></div>
       </div>
     </div>
     <div class="commands">
       <button id="cmd-stop" class="playMode">
         <strong>Stop</strong>

light9/ascoltami/main.ts

➞

Show inline comments

@@ @@ -70,25 +70,25 @@ async function onLoad() { @@
     link.appendChild(n);
     const sn = document.createElement("span");
     sn.classList.add("song-name");
     sn.innerText = song.label.slice(2).trim();
     link.appendChild(sn);
     link.setAttribute("href", song.uri);
     link.addEventListener("click", (ev) => {
       ev.stopPropagation();
       button.click();
     });
     button.appendChild(link);
     button.dataset.uri = song;
+    button.dataset.uri = song.uri;
     button.addEventListener("click", async (ev) => {
       await fetch("api/song", { method: "POST", body: song.uri });
       showCurrentSong(song.uri);
     });
     const dv = document.createElement("div");
     dv.appendChild(button);
     document.querySelector(".songs").appendChild(dv);
   });
   document.addEventListener("keypress", (ev) => {
     if (ev.which == 115) {
       byId("cmd-stop").click();

light9/web/style.css

➞

Show inline comments

@@ @@ -28,40 +28,39 @@ input[type="text"] { @@
   padding: 3px;
+}
 #status {
   position: fixed;
   bottom: 0px;
   right: 0px;
   background: rgba(0, 0, 0, 0.47);
   padding-left: 6px;
+}
 .songs {
-  column-width: 15em;
+  column-width: 17em;
+}
 .songs button {
   display: inline-block;
   width: 15em;
   height: 50px;
   width: 100%;
   min-height: 50px;
   text-align: left;
   background: black;
   color: white;
   margin: 2px;
   font-size: 130% !important;
   font-weight: bold;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
 px 1px 0 #000;
   white-space: nowrap;
+}
 button a {
   color: white;
+}
 .songs button:hover {
   color: black;
   background: #333;
+}
 .commands button {
@@ @@ -102,29 +101,29 @@ div.keys { @@
 .timeRow {
   margin: 14px;
+}
 .stalled {
   opacity: 0.5;
+}
 .num {
   font-size: 27px;
   color: rgb(233, 122, 122);
   display: inline-block;
   padding: 10px;
   font-size: 200% !important;
   font-weight: bold;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
 px 1px 0 #000;
   float: left;
+}
 .dropTarget {
   padding: 10px 5px;
   border: 2px dashed gray;
   font-style: italic;
   color: rgb(78, 90, 107);
+}
 .dropTarget:hover {
   background: #1f1f0d;
+}

0 comments (0 inline, 0 general)