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

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.
This commit is contained in:
Jim Hague 2016-11-05 10:46:41 +00:00
parent 48658059ca
commit afc73cd0b3
3 changed files with 78 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dottes.html
View File

@ -39,6 +39,8 @@
<div class="grid_12 dottes-body">
<h1>The tunes</h1>
<div class="dottes-tune-list">
<div class="dottes-tune-list-link-column"></div>
<div class="dottes-tune-list-image-column"></div>
<!--#include file="tunelist.html" -->
</div>
</div>

18
dottes.html.tune
View File

@ -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>

81
web/css/dottes.css
View File

@ -132,41 +132,57 @@ div.dottes-tune-header
width: 100%;
}
div.dottes-tune-header-icons-column
{
display: table-column;
width: 25%;
}
div.dottes-tune-header-title-column
{
display: table-column;
width: 50%;
}
div.dottes-tune-header-last-column
{
display: table-column;
width: 25%;
}
div.dottes-tune-header-row
{
display: table-row;
}
div.dottes-tune-header-left
{
display: table-cell;
width: 25%;
}
div.dottes-tune-header-middle
div.dottes-tune-header-icons
{
display: table-cell;
}
div.dottes-tune-header-middle h1
div.dottes-tune-header-title
{
display: table-cell;
}
div.dottes-tune-header-title h1
{
font-weight: bold;
text-align: center;
margin: 0px;
}
div.dottes-tune-header-middle h2
div.dottes-tune-header-title h2
{
font-weight: normal;
text-align: center;
margin: 0px;
}
div.dottes-tune-header-right
div.dottes-tune-header-composer
{
display: table-cell;
text-align: right;
width: 25%;
}
div.dottes-tune-footer
@ -175,29 +191,44 @@ div.dottes-tune-footer
width: 100%;
}
div.dottes-tune-footer-links-column
{
display: table-column;
width: 25%;
}
div.dottes-tune-footer-play-column
{
display: table-column;
width: 50%;
}
div.dottes-tune-footer-last-column
{
display: table-column;
width: 25%;
}
div.dottes-tune-footer-row
{
display: table-row;
}
div.dottes-tune-footer-left
div.dottes-tune-footer-links
{
display: table-cell;
width: 25%;
}
div.dottes-tune-footer-centre
div.dottes-tune-footer-play
{
display: table-cell;
text-align: center;
width: 50%;
}
div.dottes-tune-footer-right
div.dottes-tune-footer-last
{
display: table-cell;
text-align: right;
width: 25%;
}
a.dottes-tune-link
@ -254,6 +285,17 @@ div.dottes-tune-list-item
display: table-row;
}
div.dottes-tune-list-link-column
{
display: table-column;
}
div.dottes-tune-list-image-column
{
display: table-column;
width: 80%;
}
div.dottes-tune-list-item-link
{
display: table-cell;
@ -266,6 +308,11 @@ div.dottes-tune-list-item-image
vertical-align: middle;
}
div.dottes-tune-list-item-image img
{
width: 100%;
}
div.dottes-notes-no
{
display: none;