louis
/
dottes
forked from CryHavoc/dottes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix learner tune CSS. Broken during tune page CSS revision. 

Give the main display its own CSS.
This commit is contained in:
Jim Hague 2016-11-06 08:24:22 +00:00
parent f9811c0fed
commit 479aadb901
2 changed files with 72 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
dottes.html.learnertune
View File

@ -31,8 +31,11 @@
<div class="grid_12 dottes-body"> <div class="grid_12 dottes-body">
<div class="dottes-tune-display"> <div class="dottes-tune-display">
<div class="dottes-tune-header"> <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-row">
<div class="dottes-tune-header-left"> <div class="dottes-tune-header-icons">
<a class="dottes-tune-icon-link" href="${name}.html"> <a class="dottes-tune-icon-link" href="${name}.html">
<img class="dottes-tune-table-image" src="../img/music.png" <img class="dottes-tune-table-image" src="../img/music.png"
alt="Dottes"> alt="Dottes">
@ -42,22 +45,25 @@
alt="Tune index"> alt="Tune index">
</a> </a>
</div> </div>
<div class="dottes-tune-header-middle"> <div class="dottes-tune-header-title">
<h1>${title}</h1> <h1>${title}</h1>
<h2>${subtitle}</h2> <h2>${subtitle}</h2>
</div> </div>
<div class="dottes-tune-header-right"> <div class="dottes-tune-header-composer">
<em>${composer}</em> <em>${composer}</em>
</div> </div>
</div> </div>
</div> </div>
<p>${title} is in the key of ${key}. <p>${title} is in the key of ${key}.
<div class="dottes-tune-footer"> <div class="dottes-tune-learner">
<div class="dottes-tune-footer-row"> <div class="dottes-tune-learner-speed-column"></div>
<div class="dottes-tune-footer-left"> <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 <p>Normal speed
</div> </div>
<div class="dottes-tune-footer-centre"> <div class="dottes-tune-learner-play">
<audio controls loop> <audio controls loop>
<source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" /> <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" />
<source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" /> <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" />
@ -74,7 +80,7 @@
</object> </object>
</audio> </audio>
</div> </div>
<div class="dottes-tune-footer-right"> <div class="dottes-tune-learner-download">
<ul class="tune-data-list"> <ul class="tune-data-list">
<li><a class="dottes-link-tune dottes-mp3" download <li><a class="dottes-link-tune dottes-mp3" download
href="../${masterbooke}/${name}.mp3">MP3</a></li> href="../${masterbooke}/${name}.mp3">MP3</a></li>
@ -83,11 +89,11 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="dottes-tune-footer-row"> <div class="dottes-tune-learner-row">
<div class="dottes-tune-footer-left"> <div class="dottes-tune-learner-speed">
<p>Slightly slower <p>Slightly slower
</div> </div>
<div class="dottes-tune-footer-centre"> <div class="dottes-tune-learner-play">
<audio controls loop> <audio controls loop>
<source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" /> <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" />
<source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" /> <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" />
@ -104,7 +110,7 @@
</object> </object>
</audio> </audio>
</div> </div>
<div class="dottes-tune-footer-right"> <div class="dottes-tune-learner-download">
<ul class="tune-data-list"> <ul class="tune-data-list">
<li><a class="dottes-link-tune dottes-mp3" download <li><a class="dottes-link-tune dottes-mp3" download
href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li> href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
@ -113,11 +119,11 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="dottes-tune-footer-row"> <div class="dottes-tune-learner-row">
<div class="dottes-tune-footer-left"> <div class="dottes-tune-learner-speed">
<p>Slow <p>Slow
</div> </div>
<div class="dottes-tune-footer-centre"> <div class="dottes-tune-learner-play">
<audio controls loop> <audio controls loop>
<source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" /> <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" />
<source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" /> <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" />
@ -134,7 +140,7 @@
</object> </object>
</audio> </audio>
</div> </div>
<div class="dottes-tune-footer-right"> <div class="dottes-tune-learner-download">
<ul class="tune-data-list"> <ul class="tune-data-list">
<li><a class="dottes-link-tune dottes-mp3" download <li><a class="dottes-link-tune dottes-mp3" download
href="../${masterbooke}/slow-${name}.mp3">MP3</a></li> href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
@ -143,11 +149,11 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="dottes-tune-footer-row"> <div class="dottes-tune-learner-row">
<div class="dottes-tune-footer-left"> <div class="dottes-tune-learner-speed">
<p>Very slow <p>Very slow
</div> </div>
<div class="dottes-tune-footer-centre"> <div class="dottes-tune-learner-play">
<audio controls loop> <audio controls loop>
<source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" /> <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" />
<source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" /> <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" />
@ -164,7 +170,7 @@
</object> </object>
</audio> </audio>
</div> </div>
<div class="dottes-tune-footer-right"> <div class="dottes-tune-learner-download">
<ul class="tune-data-list"> <ul class="tune-data-list">
<li><a class="dottes-link-tune dottes-mp3" download <li><a class="dottes-link-tune dottes-mp3" download
href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li> href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>

46
web/css/dottes.css
View File

@ -231,6 +231,52 @@ div.dottes-tune-footer-last
text-align: right; 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 a.dottes-tune-link
{ {
position: relative; position: relative;