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;