Mercurial > dottes
changeset 640:dfdea8422368
In tune list, put L in column of its own.
It can be a big difficult to hit when the text is wrapped.
author | Jim Hague <jim.hague@acm.org> |
---|---|
date | Mon, 07 Nov 2016 23:14:14 +0000 (2016-11-07) |
parents | 776a455efe47 |
children | df9c60f6fbd7 |
files | dottes.html dottes.html.tuneindex web/css/dottes.css |
diffstat | 3 files changed, 24 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/dottes.html Mon Nov 07 20:34:45 2016 +0000 +++ b/dottes.html Mon Nov 07 23:14:14 2016 +0000 @@ -38,6 +38,7 @@ <h1>The tunes</h1> <div class="dottes-tune-list"> <div class="dottes-tune-list-link-column"></div> + <div class="dottes-tune-list-learner-link-column"></div> <div class="dottes-tune-list-image-column"></div> <!--#include file="tunelist.html" --> </div>
--- a/dottes.html.tuneindex Mon Nov 07 20:34:45 2016 +0000 +++ b/dottes.html.tuneindex Mon Nov 07 23:14:14 2016 +0000 @@ -1,7 +1,9 @@ <div class="dottes-tune-list-item"> <div class="dottes-tune-list-item-link"> <a class="dottes-tune-link" href="${name}.html">${title}</a> - <a href="learner-${name}.html"> + </div> + <div class="dottes-tune-list-item-learner-link"> + <a class="dottes-tune-link" href="learner-${name}.html"> <img class="dottes-tune-table-image" src="../img/learner.png" alt="Learner"> </a> </div>
--- a/web/css/dottes.css Mon Nov 07 20:34:45 2016 +0000 +++ b/web/css/dottes.css Mon Nov 07 23:14:14 2016 +0000 @@ -277,12 +277,6 @@ text-align: right; } -a.dottes-tune-link -{ - position: relative; - top: 12px; -} - a.dottes-tune-icon-link { text-decoration: none; @@ -335,12 +329,18 @@ div.dottes-tune-list-link-column { display: table-column; + width: 20%; +} + +div.dottes-tune-list-learner-link-column +{ + display: table-column; } div.dottes-tune-list-image-column { display: table-column; - width: 80%; + width: 75%; } div.dottes-tune-list-item-link @@ -349,13 +349,25 @@ vertical-align: middle; } +div.dottes-tune-list-item-learner-link +{ + display: table-cell; + vertical-align: middle; + padding: 2px; +} + +div.dottes-tune-list-item-learner-link img +{ + max-width: 20px; +} + div.dottes-tune-list-item-image { display: table-cell; vertical-align: middle; } -div.dottes-tune-list-item-image img +img.dottes-tune-table-image { width: 100%; }