From 7e6383b39960f2d7a0433c9b653d53f04bcfb0a5 Mon Sep 17 00:00:00 2001
From: Milan <mc@radiopiloten.de>
Date: Sat, 3 Dec 2022 22:47:35 +0100
Subject: [PATCH] playout: compact view

---
 website/agenda/planung/css/show-playout.css   | 41 +++++++++++++++----
 .../planung/templates/show-playout.html       | 13 +++---
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/website/agenda/planung/css/show-playout.css b/website/agenda/planung/css/show-playout.css
index 4336aab..467e34d 100644
--- a/website/agenda/planung/css/show-playout.css
+++ b/website/agenda/planung/css/show-playout.css
@@ -24,15 +24,35 @@ table {
     border-top: 1px solid #666;
 }
 
-#content #playout-table td.path {
-    width: 15rem;
-    word-break: break-word;
+#content #playout-table td.start {
+    width:10%;
 }
 
-#content #playout-table td div {
-    float: left;
-    margin: 3px;
+#content #playout-table td.path div {
+    width: 20%;
 }
+#content #playout-table td.path div {
+    width: 100%;
+    height: 100%;
+    word-break: break-word;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-height:3.2rem;
+}
+
+#content #playout-table td.path div:hover {
+    max-height:none;
+    transition: all 1s;
+}
+
+#content #playout-table td.properties {
+    width: 50%;
+}
+
+#content #playout-table td.image {
+    width: 10%;
+}
+
 
 #content tr.past {
     background: #ccc;
@@ -45,8 +65,13 @@ table {
 }
 
 #content img {
-    width: 60%;
-    height: 100%;
+    width:200px;
+    height:100px;
+}
+
+img:hover {
+    transform:scale(1.5);
+    transition: all 1s;
 }
 
 #content div.ok,
diff --git a/website/agenda/planung/templates/show-playout.html b/website/agenda/planung/templates/show-playout.html
index 391c530..3987157 100644
--- a/website/agenda/planung/templates/show-playout.html
+++ b/website/agenda/planung/templates/show-playout.html
@@ -9,18 +9,17 @@
 <tr>
     <th>start</th>
     <th>path</th>
-    <th>more</th>
+    <th>properties</th>
     <th>image</th>
-    <th>bytes</th>
 </tr>
 </thead>
 
 <tbody>
 <TMPL_LOOP events>
 <tr class="<TMPL_VAR class>">
-    <td><TMPL_VAR start></td>
-    <td class="path"><TMPL_VAR file></td>
-    <td>
+    <td class="start"><TMPL_VAR start></td>
+    <td class="path"><div><TMPL_VAR file></div></td>
+    <td class="properties">
         <TMPL_VAR duration escape="text">
         <TMPL_VAR rms_left escape="text"> 
         <TMPL_VAR rms_right escape="text">
@@ -28,9 +27,9 @@
         <TMPL_VAR bitrate_mode escape="text"> 
         <TMPL_VAR sampling_rate escape="text"> 
         <TMPL_VAR channels escape="text">
+        <TMPL_VAR stream_size> bytes
     </td>
-    <td><TMPL_IF rms_image><a href="/media/playout/<TMPL_VAR rms_image>"><img src="/media/playout/<TMPL_VAR rms_image>"></a></TMPL_IF></td>
-    <td><TMPL_VAR stream_size></td>
+    <td class="image"><TMPL_IF rms_image><a href="/media/playout/<TMPL_VAR rms_image>"><img src="/media/playout/<TMPL_VAR rms_image>"></a></TMPL_IF></td>
 </tr>
 </TMPL_LOOP>
 </tbody>