comparison dottes.html.tune @ 613:af814cd756e8

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
comparison
equal deleted inserted replaced
611:b6b80aca673d 613:af814cd756e8
20 </a> 20 </a>
21 21
22 <div class="grid_12 dottes-body"> 22 <div class="grid_12 dottes-body">
23 <div class="dottes-tune-display"> 23 <div class="dottes-tune-display">
24 <div class="dottes-tune-header"> 24 <div class="dottes-tune-header">
25 <div class="dottes-tune-header-icons-column"></div>
26 <div class="dottes-tune-header-title-column"></div>
27 <div class="dottes-tune-header-composer-column"></div>
25 <div class="dottes-tune-header-row"> 28 <div class="dottes-tune-header-row">
26 <div class="dottes-tune-header-left"> 29 <div class="dottes-tune-header-icons">
27 <a class="dottes-tune-icon-link" href="learner-${name}.html"> 30 <a class="dottes-tune-icon-link" href="learner-${name}.html">
28 <img class="dottes-tune-table-image" src="../img/learner.png" 31 <img class="dottes-tune-table-image" src="../img/learner.png"
29 alt="Learner"> 32 alt="Learner">
30 </a> 33 </a>
31 <a class="dottes-tune-icon-link" href="index.html"> 34 <a class="dottes-tune-icon-link" href="index.html">
32 <img class="dottes-tune-table-image" src="../img/book.png" 35 <img class="dottes-tune-table-image" src="../img/book.png"
33 alt="Tune index"> 36 alt="Tune index">
34 </a> 37 </a>
35 </div> 38 </div>
36 <div class="dottes-tune-header-middle"> 39 <div class="dottes-tune-header-title">
37 <h1>${title}</h1> 40 <h1>${title}</h1>
38 <h2>${subtitle}</h2> 41 <h2>${subtitle}</h2>
39 </div> 42 </div>
40 <div class="dottes-tune-header-right"> 43 <div class="dottes-tune-header-composer">
41 <em>${composer}</em> 44 <em>${composer}</em>
42 </div> 45 </div>
43 </div> 46 </div>
44 </div> 47 </div>
45 <img class="dottes-png" src="${name}.png" alt="${title} dots"> 48 <img class="dottes-png" src="${name}.png" alt="${title} dots">
48 </div> 51 </div>
49 <div class="dottes-history-${historyvisibility}"> 52 <div class="dottes-history-${historyvisibility}">
50 ${history} 53 ${history}
51 </div> 54 </div>
52 <div class="dottes-tune-footer"> 55 <div class="dottes-tune-footer">
56 <div class="dottes-tune-footer-links-column"></div>
57 <div class="dottes-tune-footer-play-column"></div>
58 <div class="dottes-tune-footer-last-column"></div>
53 <div class="dottes-tune-footer-row"> 59 <div class="dottes-tune-footer-row">
54 <div class="dottes-tune-footer-left"> 60 <div class="dottes-tune-footer-links">
55 <ul class="tune-data-list"> 61 <ul class="tune-data-list">
56 <li><a class="dottes-link-tune dottes-pdf" download 62 <li><a class="dottes-link-tune dottes-pdf" download
57 href="${name}.pdf">PDF</a></li> 63 href="${name}.pdf">PDF</a></li>
58 <li><a class="dottes-link-tune dottes-midi" download 64 <li><a class="dottes-link-tune dottes-midi" download
59 href="../${masterbooke}/${name}.mid">MIDI</a></li> 65 href="../${masterbooke}/${name}.mid">MIDI</a></li>
65 href="${name}.abc">ABC</a></li> 71 href="${name}.abc">ABC</a></li>
66 <li><a class="dottes-link-tune dottes-xml" download 72 <li><a class="dottes-link-tune dottes-xml" download
67 href="${name}.xml">XML</a></li> 73 href="${name}.xml">XML</a></li>
68 </ul> 74 </ul>
69 </div> 75 </div>
70 <div class="dottes-tune-footer-centre"> 76 <div class="dottes-tune-footer-play">
71 <audio controls> 77 <audio controls>
72 <source src="../${masterbooke}/${name}.mp3" type="audio/mpeg" /> 78 <source src="../${masterbooke}/${name}.mp3" type="audio/mpeg" />
73 <source src="../${masterbooke}/${name}.ogg" type="audio/ogg" /> 79 <source src="../${masterbooke}/${name}.ogg" type="audio/ogg" />
74 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> 80 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
75 <param name="FileName" value="${name}.mp3" /> 81 <param name="FileName" value="${name}.mp3" />
80 <param name="autoplay" value="false" /> 86 <param name="autoplay" value="false" />
81 </object> 87 </object>
82 </object> 88 </object>
83 </audio> 89 </audio>
84 </div> 90 </div>
85 <div class="dottes-tune-footer-right"> 91 <div class="dottes-tune-footer-last">
86 Last changed ${lastchanged} 92 Last changed ${lastchanged}
87 </div> 93 </div>
88 </div> 94 </div>
89 </div> 95 </div>
90 </div> 96 </div>