changeset 2114:758ce4dfbd2f

asco layout
author drewp@bigasterisk.com
date Thu, 02 Jun 2022 19:21:46 +0000
parents 4455c67d4a5c
children bd287d68edd6
files light9/ascoltami/index.html light9/ascoltami/main.ts light9/web/style.css
diffstat 3 files changed, 15 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/light9/ascoltami/index.html	Thu Jun 02 19:20:30 2022 +0000
+++ b/light9/ascoltami/index.html	Thu Jun 02 19:21:46 2022 +0000
@@ -11,6 +11,7 @@
         padding-left: 0.4em;
       }
     </style>
+    <meta name="viewport" content="user-scalable=no, width=500, initial-scale=1">
   </head>
   <body>
     <h1>ascoltami on {{host}}</h1>
@@ -19,16 +20,22 @@
     <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>
--- a/light9/ascoltami/main.ts	Thu Jun 02 19:20:30 2022 +0000
+++ b/light9/ascoltami/main.ts	Thu Jun 02 19:21:46 2022 +0000
@@ -79,7 +79,7 @@
       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);
--- a/light9/web/style.css	Thu Jun 02 19:20:30 2022 +0000
+++ b/light9/web/style.css	Thu Jun 02 19:21:46 2022 +0000
@@ -37,13 +37,13 @@
 }
 
 .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;
@@ -52,7 +52,6 @@
   font-weight: bold;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
     1px 1px 0 #000;
-  white-space: nowrap;
 }
 
 button a {
@@ -111,11 +110,11 @@
   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,
     1px 1px 0 #000;
+  float: left;
 }
 
 .dropTarget {