Mercurial > dottes
diff web/css/dottes.css @ 613:af814cd756e8
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.
author | Jim Hague <jim.hague@acm.org> |
---|---|
date | Sat, 05 Nov 2016 10:46:41 +0000 |
parents | ed823ea54c83 |
children | 2fe68733ec17 |
line wrap: on
line diff
--- a/web/css/dottes.css Fri Nov 04 23:57:05 2016 +0000 +++ b/web/css/dottes.css Sat Nov 05 10:46:41 2016 +0000 @@ -132,41 +132,57 @@ 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 @@ 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 @@ 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 @@ vertical-align: middle; } +div.dottes-tune-list-item-image img +{ + width: 100%; +} + div.dottes-notes-no { display: none;