playout: compact view

website/agenda/planung/css/show-playout.css

@@ -24,15 +24,35 @@ table {
     border-top: 1px solid #666;
 }
 
-#content #playout-table td.path {
+#content #playout-table td.start {
-    width: 15rem;
+    width:10%;
-    word-break: break-word;
 }
 
-#content #playout-table td div {
+#content #playout-table td.path div {
-    float: left;
+    width: 20%;
-    margin: 3px;
 }
+#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%;
+    width:200px;
-    height: 100%;
+    height:100px;
+}
+
+img:hover {
+    transform:scale(1.5);
+    transition: all 1s;
 }
 
 #content div.ok,

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="start"><TMPL_VAR start></td>
-    <td class="path"><TMPL_VAR file></td>
+    <td class="path"><div><TMPL_VAR file></div></td>
-    <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 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>
-    <td><TMPL_VAR stream_size></td>
 </tr>
 </TMPL_LOOP>
 </tbody>