CryHavoc
/
dottes
2
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move book and learner tune link to centre of bottom row, and add popup text. 

The parts display is not uncomplicated by the images, and they have
explanations - at least some users I've spoken to did not understand
what they do.
This commit is contained in:
Jim Hague 2017-10-11 16:18:13 +01:00
parent 5c3fae0231
commit d2b405b2a3
3 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dottes.html.learnertune
View File

@ -13,13 +13,14 @@
<div class="container">
<a href="/">
<div class="header-strip banner">
<img src="../img/banner.png">
<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">Work out the melody or play along
<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
audio files.
@ -29,19 +30,14 @@
<div class="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-parts-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-icons">
<a class="dottes-tune-icon-link" href="${name}.html">
<img class="dottes-tune-header-image" src="../img/music.png"
alt="Dottes">
</a>
<a class="dottes-tune-icon-link" href="index.html">
<img class="dottes-tune-header-image" src="../img/book.png"
alt="Tune index">
</a>
<div class="dottes-tune-header-parts">
<p>
${parts}
</p>
</div>
<div class="dottes-tune-header-title">
<h1>${title}</h1>
@ -151,6 +147,14 @@
<a href="${prevpage}">${prevtitle}</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"
alt="Tune dottes page" title="Go to dottes page for ${title}">
</a>
<a class="dottes-tune-icon-link" href="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}">${nexttitle}</a>

22
dottes.html.tune
View File

@ -13,27 +13,19 @@
<div class="container">
<a href="/">
<div class="header-strip banner">
<img src="../img/banner.png">
<img src="../img/banner.png" alt="Havoc banner image">
</div>
</a>
<div class="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-parts-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-icons">
<div class="dottes-tune-header-parts">
<p>
<a class="dottes-tune-icon-link" href="learner-${name}.html">
<img class="dottes-tune-header-image" src="../img/learner.png"
alt="Learner">
</a>
<a class="dottes-tune-icon-link" href="index.html">
<img class="dottes-tune-header-image" src="../img/book.png"
alt="Tune index">
</a>
${parts}
</p>
</div>
@ -90,6 +82,14 @@
<a href="${prevpage}">${prevtitle}</a>
</div>
<div class="dottes-tune-footer-booke">
<a class="dottes-tune-icon-link" href="learner-${name}.html">
<img class="dottes-tune-header-image" src="../img/learner.png"
alt="Learner tune page" title="Go to learner page for ${title}">
</a>
<a class="dottes-tune-icon-link" href="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-next">
<a href="${nextpage}">${nexttitle}</a>

6
web/css/dottes.css
View File

@ -129,7 +129,7 @@ div.dottes-tune-header
width: 100%;
}
div.dottes-tune-header-icons-column
div.dottes-tune-header-parts-column
{
display: table-column;
width: 25%;
@ -152,13 +152,13 @@ div.dottes-tune-header-row
display: table-row;
}
div.dottes-tune-header-icons
div.dottes-tune-header-parts
{
display: table-cell;
vertical-align: middle;
}
div.dottes-tune-header-icons p
div.dottes-tune-header-parts p
{
vertical-align: middle;
}