Mercurial > dottes

diff dottes.html.learnertune @ 724:be87f9a027f1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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.
author Jim Hague <jim.hague@acm.org>
date Wed, 11 Oct 2017 16:18:13 +0100
parents f8ab14cc9d8d
children 833e6185b6a2
line wrap: on
line diff
--- 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>