From afc73cd0b3f290896e8f8cb4401eb9aace158bc0 Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@acm.org>
Date: Sat, 5 Nov 2016 10:46:41 +0000
Subject: [PATCH] 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.
---
 dottes.html        |  2 ++
 dottes.html.tune   | 18 +++++++----
 web/css/dottes.css | 81 ++++++++++++++++++++++++++++++++++++----------
 3 files changed, 78 insertions(+), 23 deletions(-)

diff --git a/dottes.html b/dottes.html
index aad9fc2..d908693 100644
--- a/dottes.html
+++ b/dottes.html
@@ -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 --git a/dottes.html.tune b/dottes.html.tune
index 5d333af..cf19a8e 100644
--- a/dottes.html.tune
+++ b/dottes.html.tune
@@ -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 --git a/web/css/dottes.css b/web/css/dottes.css
index 61f045e..5c816f7 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -132,41 +132,57 @@ div.dottes-tune-header
     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 @@ div.dottes-tune-footer
     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 @@ div.dottes-tune-list-item
     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 @@ div.dottes-tune-list-item-image
     vertical-align: middle;
 }
 
+div.dottes-tune-list-item-image img
+{
+    width: 100%;
+}
+
 div.dottes-notes-no
 {
     display: none;