# HG changeset patch
# User Jim Hague <jim.hague@acm.org>
# Date 1507735093 -3600
# Node ID be87f9a027f1d400d79102795d9c3ee1f8d17a7c
# Parent  0818dcbaf5afe3401851a7677f0fe86e6397256c
Move book and learner tune link to centre of bottom row, and add popup text.

The parts display is not uncomplicated by the images, and they have
explanations - at least some users I've spoken to did not understand
what they do.

diff -r 0818dcbaf5af -r be87f9a027f1 dottes.html.learnertune
--- a/dottes.html.learnertune	Tue Oct 10 16:18:39 2017 +0100
+++ b/dottes.html.learnertune	Wed Oct 11 16:18:13 2017 +0100
@@ -13,13 +13,14 @@
   <div class="container">
     <a href="/">
       <div class="header-strip banner">
-        <img src="../img/banner.png">
+        <img src="../img/banner.png" alt="Havoc banner image">
       </div>
     </a>
 
     <div class="dottes-body">
       <div class="dottes-tune-display">
-        <img src="../img/learner.png">Work out the melody or play along
+        <img src="../img/learner.png" alt="Learner tune image">
+        Work out the melody or play along
         with these audio players. They play the melody repeatedly. There's
         a variety of speeds to choose from. You can also download the
         audio files.
@@ -29,19 +30,14 @@
     <div class="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-parts-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-icons">
-              <a class="dottes-tune-icon-link" href="${name}.html">
-                <img class="dottes-tune-header-image" src="../img/music.png"
-                     alt="Dottes">
-              </a>
-              <a class="dottes-tune-icon-link" href="index.html">
-                <img class="dottes-tune-header-image" src="../img/book.png"
-                     alt="Tune index">
-              </a>
+            <div class="dottes-tune-header-parts">
+              <p>
+                ${parts}
+              </p>
             </div>
             <div class="dottes-tune-header-title">
               <h1>${title}</h1>
@@ -151,6 +147,14 @@
               <a href="${prevpage}">${prevtitle}</a>
             </div>
             <div class="dottes-tune-footer-learner-booke">
+              <a class="dottes-tune-icon-link" href="${name}.html">
+                <img class="dottes-tune-header-image" src="../img/music.png"
+                     alt="Tune dottes page" title="Go to dottes page for ${title}">
+              </a>
+              <a class="dottes-tune-icon-link" href="index.html">
+                <img class="dottes-tune-header-image" src="../img/book.png"
+                     alt="Tune booke index" title="Go to tune booke index">
+              </a>
             </div>
             <div class="dottes-tune-footer-learner-next">
               <a href="${nextpage}">${nexttitle}</a>
diff -r 0818dcbaf5af -r be87f9a027f1 dottes.html.tune
--- a/dottes.html.tune	Tue Oct 10 16:18:39 2017 +0100
+++ b/dottes.html.tune	Wed Oct 11 16:18:13 2017 +0100
@@ -13,27 +13,19 @@
   <div class="container">
     <a href="/">
       <div class="header-strip banner">
-        <img src="../img/banner.png">
+        <img src="../img/banner.png" alt="Havoc banner image">
       </div>
     </a>
 
     <div class="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-parts-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-icons">
+            <div class="dottes-tune-header-parts">
               <p>
-                <a class="dottes-tune-icon-link" href="learner-${name}.html">
-                  <img class="dottes-tune-header-image" src="../img/learner.png"
-                       alt="Learner">
-                </a>
-                <a class="dottes-tune-icon-link" href="index.html">
-                  <img class="dottes-tune-header-image" src="../img/book.png"
-                       alt="Tune index">
-                </a>
                 ${parts}
               </p>
             </div>
@@ -90,6 +82,14 @@
               <a href="${prevpage}">${prevtitle}</a>
             </div>
             <div class="dottes-tune-footer-booke">
+                <a class="dottes-tune-icon-link" href="learner-${name}.html">
+                  <img class="dottes-tune-header-image" src="../img/learner.png"
+                       alt="Learner tune page" title="Go to learner page for ${title}">
+                </a>
+                <a class="dottes-tune-icon-link" href="index.html">
+                  <img class="dottes-tune-header-image" src="../img/book.png"
+                       alt="Tune booke index" title="Go to tune booke index">
+                </a>
             </div>
             <div class="dottes-tune-footer-next">
               <a href="${nextpage}">${nexttitle}</a>
diff -r 0818dcbaf5af -r be87f9a027f1 web/css/dottes.css
--- a/web/css/dottes.css	Tue Oct 10 16:18:39 2017 +0100
+++ b/web/css/dottes.css	Wed Oct 11 16:18:13 2017 +0100
@@ -129,7 +129,7 @@
     width: 100%;
 }
 
-div.dottes-tune-header-icons-column
+div.dottes-tune-header-parts-column
 {
     display: table-column;
     width: 25%;
@@ -152,13 +152,13 @@
     display: table-row;
 }
 
-div.dottes-tune-header-icons
+div.dottes-tune-header-parts
 {
     display: table-cell;
     vertical-align: middle;
 }
 
-div.dottes-tune-header-icons p
+div.dottes-tune-header-parts p
 {
     vertical-align: middle;
 }