From d2b405b2a3be3c9d275aaa58b07e4b242dce9d88 Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@acm.org>
Date: Wed, 11 Oct 2017 16:18:13 +0100
Subject: [PATCH] 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.
---
 dottes.html.learnertune | 28 ++++++++++++++++------------
 dottes.html.tune        | 22 +++++++++++-----------
 web/css/dottes.css      |  6 +++---
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/dottes.html.learnertune b/dottes.html.learnertune
index 19321f0..dc01ee6 100644
--- a/dottes.html.learnertune
+++ b/dottes.html.learnertune
@@ -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 --git a/dottes.html.tune b/dottes.html.tune
index 23d035c..6b1df2a 100644
--- a/dottes.html.tune
+++ b/dottes.html.tune
@@ -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 --git a/web/css/dottes.css b/web/css/dottes.css
index 0779a1d..bbb2160 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -129,7 +129,7 @@ div.dottes-tune-header
     width: 100%;
 }
 
-div.dottes-tune-header-icons-column
+div.dottes-tune-header-parts-column
 {
     display: table-column;
     width: 25%;
@@ -152,13 +152,13 @@ div.dottes-tune-header-row
     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;
 }