Mercurial > dottes
changeset 619:2fe68733ec17 build-default-248
Fix learner tune CSS. Broken during tune page CSS revision.
Give the main display its own CSS.
| author | Jim Hague <jim.hague@acm.org> |
|---|---|
| date | Sun, 06 Nov 2016 08:24:22 +0000 |
| parents | 11e5862beaa8 |
| children | 031dfc0af0e8 dfeb781e5196 |
| files | dottes.html.learnertune web/css/dottes.css |
| diffstat | 2 files changed, 72 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/dottes.html.learnertune Sat Nov 05 15:57:32 2016 +0000 +++ b/dottes.html.learnertune Sun Nov 06 08:24:22 2016 +0000 @@ -31,8 +31,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="${name}.html"> <img class="dottes-tune-table-image" src="../img/music.png" alt="Dottes"> @@ -42,22 +45,25 @@ 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> </div> <p>${title} is in the key of ${key}. - <div class="dottes-tune-footer"> - <div class="dottes-tune-footer-row"> - <div class="dottes-tune-footer-left"> + <div class="dottes-tune-learner"> + <div class="dottes-tune-learner-speed-column"></div> + <div class="dottes-tune-learner-play-column"></div> + <div class="dottes-tune-learner-download-column"></div> + <div class="dottes-tune-learner-row"> + <div class="dottes-tune-learner-speed"> <p>Normal speed </div> - <div class="dottes-tune-footer-centre"> + <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" /> @@ -74,7 +80,7 @@ </object> </audio> </div> - <div class="dottes-tune-footer-right"> + <div class="dottes-tune-learner-download"> <ul class="tune-data-list"> <li><a class="dottes-link-tune dottes-mp3" download href="../${masterbooke}/${name}.mp3">MP3</a></li> @@ -83,11 +89,11 @@ </ul> </div> </div> - <div class="dottes-tune-footer-row"> - <div class="dottes-tune-footer-left"> + <div class="dottes-tune-learner-row"> + <div class="dottes-tune-learner-speed"> <p>Slightly slower </div> - <div class="dottes-tune-footer-centre"> + <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" /> @@ -104,7 +110,7 @@ </object> </audio> </div> - <div class="dottes-tune-footer-right"> + <div class="dottes-tune-learner-download"> <ul class="tune-data-list"> <li><a class="dottes-link-tune dottes-mp3" download href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li> @@ -113,11 +119,11 @@ </ul> </div> </div> - <div class="dottes-tune-footer-row"> - <div class="dottes-tune-footer-left"> + <div class="dottes-tune-learner-row"> + <div class="dottes-tune-learner-speed"> <p>Slow </div> - <div class="dottes-tune-footer-centre"> + <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" /> @@ -134,7 +140,7 @@ </object> </audio> </div> - <div class="dottes-tune-footer-right"> + <div class="dottes-tune-learner-download"> <ul class="tune-data-list"> <li><a class="dottes-link-tune dottes-mp3" download href="../${masterbooke}/slow-${name}.mp3">MP3</a></li> @@ -143,11 +149,11 @@ </ul> </div> </div> - <div class="dottes-tune-footer-row"> - <div class="dottes-tune-footer-left"> + <div class="dottes-tune-learner-row"> + <div class="dottes-tune-learner-speed"> <p>Very slow </div> - <div class="dottes-tune-footer-centre"> + <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" /> @@ -164,7 +170,7 @@ </object> </audio> </div> - <div class="dottes-tune-footer-right"> + <div class="dottes-tune-learner-download"> <ul class="tune-data-list"> <li><a class="dottes-link-tune dottes-mp3" download href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>
--- a/web/css/dottes.css Sat Nov 05 15:57:32 2016 +0000 +++ b/web/css/dottes.css Sun Nov 06 08:24:22 2016 +0000 @@ -231,6 +231,52 @@ text-align: right; } +div.dottes-tune-learner +{ + display: table; + width: 100%; +} + +div.dottes-tune-learner-speed-column +{ + display: table-column; + width: 25%; +} + +div.dottes-tune-learner-play-column +{ + display: table-column; + width: 50%; +} + +div.dottes-tune-learner-download-column +{ + display: table-column; + width: 25%; +} + +div.dottes-tune-learner-row +{ + display: table-row; +} + +div.dottes-tune-learner-speed +{ + display: table-cell; +} + +div.dottes-tune-learner-play +{ + display: table-cell; + text-align: center; +} + +div.dottes-tune-learner-download +{ + display: table-cell; + text-align: right; +} + a.dottes-tune-link { position: relative;