Mercurial > dottes

diff dottes.html.tune @ 613:af814cd756e8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Sort out column widths for web tune list. In the process discover display: table-column and use those on tune headers and footers to set column widths.
author Jim Hague <jim.hague@acm.org>
date Sat, 05 Nov 2016 10:46:41 +0000
parents ed823ea54c83
children dfeb781e5196
line wrap: on
line diff
--- a/dottes.html.tune	Fri Nov 04 23:57:05 2016 +0000
+++ b/dottes.html.tune	Sat Nov 05 10:46:41 2016 +0000
@@ -22,8 +22,11 @@
     <div class="grid_12 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-title-column"></div>
+          <div class="dottes-tune-header-composer-column"></div>
           <div class="dottes-tune-header-row">
-            <div class="dottes-tune-header-left">
+            <div class="dottes-tune-header-icons">
               <a class="dottes-tune-icon-link" href="learner-${name}.html">
                 <img class="dottes-tune-table-image" src="../img/learner.png"
                      alt="Learner">
@@ -33,11 +36,11 @@
                      alt="Tune index">
               </a>
             </div>
-            <div class="dottes-tune-header-middle">
+            <div class="dottes-tune-header-title">
               <h1>${title}</h1>
               <h2>${subtitle}</h2>
             </div>
-            <div class="dottes-tune-header-right">
+            <div class="dottes-tune-header-composer">
               <em>${composer}</em>
             </div>
           </div>
@@ -50,8 +53,11 @@
           ${history}
         </div>
         <div class="dottes-tune-footer">
+          <div class="dottes-tune-footer-links-column"></div>
+          <div class="dottes-tune-footer-play-column"></div>
+          <div class="dottes-tune-footer-last-column"></div>
           <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+            <div class="dottes-tune-footer-links">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-pdf" download
                        href="${name}.pdf">PDF</a></li>
@@ -67,7 +73,7 @@
                        href="${name}.xml">XML</a></li>
               </ul>
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-footer-play">
               <audio controls>
                 <source src="../${masterbooke}/${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/${name}.ogg" type="audio/ogg" />
@@ -82,7 +88,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-footer-last">
               Last changed ${lastchanged}
             </div>
           </div>