Mercurial > dottes

changeset 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 0818dcbaf5af
children f9a554e858f3
files dottes.html.learnertune dottes.html.tune web/css/dottes.css
diffstat 3 files changed, 30 insertions(+), 26 deletions(-) [+]
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>
--- 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>
--- 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;
 }