From 479aadb90167f640f92fbca33bcd7fc35633723f Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@acm.org>
Date: Sun, 6 Nov 2016 08:24:22 +0000
Subject: [PATCH] Fix learner tune CSS. Broken during tune page CSS revision.

Give the main display its own CSS.
---
 dottes.html.learnertune | 46 +++++++++++++++++++++++------------------
 web/css/dottes.css      | 46 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 20 deletions(-)

diff --git a/dottes.html.learnertune b/dottes.html.learnertune
index 2b7045f..a28ad87 100644
--- a/dottes.html.learnertune
+++ b/dottes.html.learnertune
@@ -31,8 +31,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="${name}.html">
                 <img class="dottes-tune-table-image" src="../img/music.png"
                      alt="Dottes">
@@ -42,22 +45,25 @@
                      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>
         </div>
         <p>${title} is in the key of ${key}.
-        <div class="dottes-tune-footer">
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+        <div class="dottes-tune-learner">
+          <div class="dottes-tune-learner-speed-column"></div>
+          <div class="dottes-tune-learner-play-column"></div>
+          <div class="dottes-tune-learner-download-column"></div>
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Normal speed
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" />
@@ -74,7 +80,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/${name}.mp3">MP3</a></li>
@@ -83,11 +89,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Slightly slower
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" />
@@ -104,7 +110,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
@@ -113,11 +119,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Slow
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" />
@@ -134,7 +140,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
@@ -143,11 +149,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Very slow
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" />
@@ -164,7 +170,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>
diff --git a/web/css/dottes.css b/web/css/dottes.css
index 5c816f7..cb2283e 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -231,6 +231,52 @@ div.dottes-tune-footer-last
     text-align: right;
 }
 
+div.dottes-tune-learner
+{
+    display: table;
+    width: 100%;
+}
+
+div.dottes-tune-learner-speed-column
+{
+    display: table-column;
+    width: 25%;
+}
+
+div.dottes-tune-learner-play-column
+{
+    display: table-column;
+    width: 50%;
+}
+
+div.dottes-tune-learner-download-column
+{
+    display: table-column;
+    width: 25%;
+}
+
+div.dottes-tune-learner-row
+{
+    display: table-row;
+}
+
+div.dottes-tune-learner-speed
+{
+    display: table-cell;
+}
+
+div.dottes-tune-learner-play
+{
+    display: table-cell;
+    text-align: center;
+}
+
+div.dottes-tune-learner-download
+{
+    display: table-cell;
+    text-align: right;
+}
+
 a.dottes-tune-link
 {
     position: relative;