diff dottes.html.learnertune @ 943:d6e2a281cceb build-default-344

Change web page layout. Put tune contents under 'tunes/<name>' or 'tunes-<instrument>/<name>'. That way they won't move if the tune gets moved between Bookes. For now I have not attempted to redirect old URLs.
author Jim Hague <jim.hague@acm.org>
date Mon, 05 Aug 2019 23:25:28 +0100
parents 772402f5f8ea
children
line wrap: on
line diff
--- a/dottes.html.learnertune	Mon Aug 05 23:22:04 2019 +0100
+++ b/dottes.html.learnertune	Mon Aug 05 23:25:28 2019 +0100
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Cry Havoc tunes - learning ${title}</title>
-  <link rel="stylesheet" href="../css/dottes.css" />
+  <link rel="stylesheet" href="../../css/dottes.css" />
 
   <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
         rel='stylesheet' type='text/css'>
@@ -13,13 +13,13 @@
   <div class="container">
     <a href="/">
       <div class="header-strip banner">
-        <img src="../img/banner.png" alt="Havoc banner image">
+        <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" alt="Learner tune image">
+        <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
@@ -59,18 +59,18 @@
             </div>
             <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" />
+                <source src="../../${mastertunedir}/${name}/normal-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/normal-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-midi" download
-                       href="../${masterbooke}/${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -80,18 +80,18 @@
             </div>
             <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" />
+                <source src="../../${mastertunedir}/${name}/littleslow-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/littleslow-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/littleslow-${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/littleslow-${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/littleslow-${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/littleslow-${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/littleslow-${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -101,18 +101,18 @@
             </div>
             <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" />
+                <source src="../../${mastertunedir}/${name}/slow-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/slow-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/slow-${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/slow-${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/slow-${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/slow-${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/slow-${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -122,18 +122,18 @@
             </div>
             <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" />
+                <source src="../../${mastertunedir}/${name}/veryslow-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/veryslow-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/veryslow-${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/veryslow-${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/veryslow-${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/veryslow-${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/veryslow-${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -144,20 +144,20 @@
           <div class="dottes-tune-footer-learner-next-column"></div>
           <div class="dottes-tune-footer-learner-row">
             <div class="dottes-tune-footer-learner-prev">
-              <a href="${prevpage}">${prevfulltitle}</a>
+              <a href="../${prevpage}/learner.html">${prevfulltitle}</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"
+              <a class="dottes-tune-icon-link" href="index.html">
+                <img class="dottes-tune-header-image" src="../../img/music.png"
                      alt="Tune dottes page" title="Go to dottes page for ${fulltitle}">
               </a>
-              <a class="dottes-tune-icon-link" href="index.html">
-                <img class="dottes-tune-header-image" src="../img/book.png"
+              <a class="dottes-tune-icon-link" href="../../${booke}/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}">${nextfulltitle}</a>
+              <a href="../${nextpage}/learner.html">${nextfulltitle}</a>
             </div>
           </div>
         </div>