From 274dfc4665df4a805f5a57ec5ed8ed61f05ef346 Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@acm.org>
Date: Mon, 7 Nov 2016 23:14:14 +0000
Subject: [PATCH] In tune list, put L in column of its own.

It can be a big difficult to hit when the text is wrapped.
---
 dottes.html           |  1 +
 dottes.html.tuneindex |  4 +++-
 web/css/dottes.css    | 28 ++++++++++++++++++++--------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/dottes.html b/dottes.html
index 499f408..508c5d2 100644
--- a/dottes.html
+++ b/dottes.html
@@ -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>
diff --git a/dottes.html.tuneindex b/dottes.html.tuneindex
index 562e726..2190c1d 100644
--- a/dottes.html.tuneindex
+++ b/dottes.html.tuneindex
@@ -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>
diff --git a/web/css/dottes.css b/web/css/dottes.css
index f81089d..1b8d5be 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -277,12 +277,6 @@ div.dottes-tune-learner-download
     text-align: right;
 }
 
-a.dottes-tune-link
-{
-    position: relative;
-    top: 12px;
-}
-
 a.dottes-tune-icon-link
 {
     text-decoration: none;
@@ -333,6 +327,12 @@ div.dottes-tune-list-item
 }
 
 div.dottes-tune-list-link-column
+{
+    display: table-column;
+    width: 20%;
+}
+
+div.dottes-tune-list-learner-link-column
 {
     display: table-column;
 }
@@ -340,7 +340,7 @@ div.dottes-tune-list-link-column
 div.dottes-tune-list-image-column
 {
     display: table-column;
-    width: 80%;
+    width: 75%;
 }
 
 div.dottes-tune-list-item-link
@@ -349,13 +349,25 @@ div.dottes-tune-list-item-link
     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%;
 }