# HG changeset patch
# User Jim Hague <jim.hague@acm.org>
# Date 1478342801 0
# Node ID af814cd756e899954b3636cc16acd08d5c66de07
# Parent  b6b80aca673d82a87a56364cb72163ac964349dd
Sort out column widths for web tune list.

In the process discover display: table-column and use those on
tune headers and footers to set column widths.

diff -r b6b80aca673d -r af814cd756e8 dottes.html
--- a/dottes.html	Fri Nov 04 23:57:05 2016 +0000
+++ b/dottes.html	Sat Nov 05 10:46:41 2016 +0000
@@ -39,6 +39,8 @@
     <div class="grid_12 dottes-body">
       <h1>The tunes</h1>
       <div class="dottes-tune-list">
+        <div class="dottes-tune-list-link-column"></div>
+        <div class="dottes-tune-list-image-column"></div>
         <!--#include file="tunelist.html" -->
       </div>
     </div>
diff -r b6b80aca673d -r af814cd756e8 dottes.html.tune
--- a/dottes.html.tune	Fri Nov 04 23:57:05 2016 +0000
+++ b/dottes.html.tune	Sat Nov 05 10:46:41 2016 +0000
@@ -22,8 +22,11 @@
     <div class="grid_12 dottes-body">
       <div class="dottes-tune-display">
         <div class="dottes-tune-header">
+          <div class="dottes-tune-header-icons-column"></div>
+          <div class="dottes-tune-header-title-column"></div>
+          <div class="dottes-tune-header-composer-column"></div>
           <div class="dottes-tune-header-row">
-            <div class="dottes-tune-header-left">
+            <div class="dottes-tune-header-icons">
               <a class="dottes-tune-icon-link" href="learner-${name}.html">
                 <img class="dottes-tune-table-image" src="../img/learner.png"
                      alt="Learner">
@@ -33,11 +36,11 @@
                      alt="Tune index">
               </a>
             </div>
-            <div class="dottes-tune-header-middle">
+            <div class="dottes-tune-header-title">
               <h1>${title}</h1>
               <h2>${subtitle}</h2>
             </div>
-            <div class="dottes-tune-header-right">
+            <div class="dottes-tune-header-composer">
               <em>${composer}</em>
             </div>
           </div>
@@ -50,8 +53,11 @@
           ${history}
         </div>
         <div class="dottes-tune-footer">
+          <div class="dottes-tune-footer-links-column"></div>
+          <div class="dottes-tune-footer-play-column"></div>
+          <div class="dottes-tune-footer-last-column"></div>
           <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+            <div class="dottes-tune-footer-links">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-pdf" download
                        href="${name}.pdf">PDF</a></li>
@@ -67,7 +73,7 @@
                        href="${name}.xml">XML</a></li>
               </ul>
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-footer-play">
               <audio controls>
                 <source src="../${masterbooke}/${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/${name}.ogg" type="audio/ogg" />
@@ -82,7 +88,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-footer-last">
               Last changed ${lastchanged}
             </div>
           </div>
diff -r b6b80aca673d -r af814cd756e8 web/css/dottes.css
--- a/web/css/dottes.css	Fri Nov 04 23:57:05 2016 +0000
+++ b/web/css/dottes.css	Sat Nov 05 10:46:41 2016 +0000
@@ -132,41 +132,57 @@
     width: 100%;
 }
 
+div.dottes-tune-header-icons-column
+{
+    display: table-column;
+    width: 25%;
+}
+
+div.dottes-tune-header-title-column
+{
+    display: table-column;
+    width: 50%;
+}
+
+div.dottes-tune-header-last-column
+{
+    display: table-column;
+    width: 25%;
+}
+
 div.dottes-tune-header-row
 {
     display: table-row;
 }
 
-div.dottes-tune-header-left
-{
-    display: table-cell;
-    width: 25%;
-}
-
-div.dottes-tune-header-middle
+div.dottes-tune-header-icons
 {
     display: table-cell;
 }
 
-div.dottes-tune-header-middle h1
+div.dottes-tune-header-title
+{
+    display: table-cell;
+}
+
+div.dottes-tune-header-title h1
 {
     font-weight: bold;
     text-align: center;
     margin: 0px;
 }
 
-div.dottes-tune-header-middle h2
+div.dottes-tune-header-title h2
 {
     font-weight: normal;
     text-align: center;
     margin: 0px;
 }
 
-div.dottes-tune-header-right
+div.dottes-tune-header-composer
 {
     display: table-cell;
     text-align: right;
-    width: 25%;
 }
 
 div.dottes-tune-footer
@@ -175,29 +191,44 @@
     width: 100%;
 }
 
+div.dottes-tune-footer-links-column
+{
+    display: table-column;
+    width: 25%;
+}
+
+div.dottes-tune-footer-play-column
+{
+    display: table-column;
+    width: 50%;
+}
+
+div.dottes-tune-footer-last-column
+{
+    display: table-column;
+    width: 25%;
+}
+
 div.dottes-tune-footer-row
 {
     display: table-row;
 }
 
-div.dottes-tune-footer-left
+div.dottes-tune-footer-links
 {
     display: table-cell;
-    width: 25%;
 }
 
-div.dottes-tune-footer-centre
+div.dottes-tune-footer-play
 {
     display: table-cell;
     text-align: center;
-    width: 50%;
 }
 
-div.dottes-tune-footer-right
+div.dottes-tune-footer-last
 {
     display: table-cell;
     text-align: right;
-    width: 25%;
 }
 
 a.dottes-tune-link
@@ -254,6 +285,17 @@
     display: table-row;
 }
 
+div.dottes-tune-list-link-column
+{
+    display: table-column;
+}
+
+div.dottes-tune-list-image-column
+{
+    display: table-column;
+    width: 80%;
+}
+
 div.dottes-tune-list-item-link
 {
     display: table-cell;
@@ -266,6 +308,11 @@
     vertical-align: middle;
 }
 
+div.dottes-tune-list-item-image img
+{
+    width: 100%;
+}
+
 div.dottes-notes-no
 {
     display: none;