Beautify list tables

4 files changed, 90 insertions, 37 deletions

diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 92de9f3..7c866fb 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -95,7 +95,7 @@ div#top {
     margin: 8px 20px;
     background-image: url('/img/bg-green.png');
     background-repeat: repeat-x;
-    background-color: #b0e0b0;
+    background-color: #b0f0b0;
     padding: 2px 16px 0 16px;
     -moz-border-radius: 4px;
     -khtml-border-radius: 4px;
@@ -261,7 +261,18 @@ div.bar {
 
 td.number {
     text-align: right;
-    color: #e06000;
+//    color: #e06000;
+}
+
+span.char {
+    background-color: #f0f0f0;
+    border: 1px solid #e0e0e0;
+    padding: 0 2px;
+    -moz-border-radius: 4px;
+    -khtml-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -chrome-border-radius: 4px;
+    -o-border-radius: 4px;
 }
 
 .source-wiki {
@@ -283,20 +294,37 @@ div.tagcloud {
     margin: 0 10%;
 }
 
+/* ========== */
+
 table.list {
-    border: 1px solid #605060;
+    background-image: url('/img/bg-green.png');
+    background-position: 0 -2px;
+    background-repeat: repeat-x;
+    background-color: #b0f0b0;
     border-collapse: collapse;
+    -moz-border-radius: 4px;
+    -khtml-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -chrome-border-radius: 4px;
+    -o-border-radius: 4px;
 }
 
 table.list th {
-    background-color: #606060;
-    color: #ffffff;
+    padding: 4px;
 }
 
-table.list th, table.list td {
-    padding: 4px 20px;
+table.list td {
+    background-color: #ffffff;
+    padding: 4px 10px;
+}
+
+table.list td.border {
+    background-color: #b0f0b0;
+    padding: 4px;
 }
 
+/* ========== */
+
 div#canvas-values {
     position: absolute;
     border: 1px solid #cccccc;
diff --git a/web/views/download.erb b/web/views/download.erb
index f9f2186..4ff6e4c 100644
--- a/web/views/download.erb
+++ b/web/views/download.erb
@@ -6,15 +6,35 @@
     files are then packed with <img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://www.bzip.org/">bzip2</a>.
 </p>
 
-<dl>
-    <dt><img src="/img/sources/db.16.png" alt="Database"/> <a href="/download/taginfo-db.db.bz2">taginfo-db.db.bz2</a> <i>(~ 540 MB packed, ~ 3.5 GB unpacked)</i></dt>
-    <dd>Statistics about each key and each tag from the main OSM database (planet).</dd>
-    <dt><img src="/img/sources/wiki.16.png" alt="Wiki"/> <a href="/download/taginfo-wiki.db.bz2">taginfo-wiki.db.bz2</a> <i>(~ 180 kB packed, ~ 740 kB unpacked)</i></dt>
-    <dd>Data from the tag and key pages of the OSM wiki.</dd>
-    <dt><img src="/img/sources/josm.16.png" alt="JOSM"/> <a href="/download/taginfo-josm.db.bz2">taginfo-josm.db.bz2</a> <i>(~ 25 kB packed, ~ 200 kB unpacked)</i></dt>
-    <dd>Configuration data from the JOSM OSM editor.</dd>
-    <dt><img src="/img/taginfo.32.png" alt="Taginfo"/> <a href="/download/taginfo-master.db.bz2">taginfo-master.db.bz2</a> <i>(~ 60 kB packed, ~ 130 kB unpacked)</i></dt>
-    <dd>Some aggregate statistics and miscellaneous data needed for the Taginfo user interface.</dd>
-</dl>
+<table class="list">
+    <tr>
+        <th></th><th></th><th>File</th><th>Packed</th><th>Unpacked</th><th>Description</th><th></th>
+    </tr>
+    <tr><td class="border"></td>
+        <td style="text-align: center;"><img src="/img/sources/db.16.png" alt="Database" width="16" height="16"/></td>
+        <td><a href="/download/taginfo-db.db.bz2">taginfo-db.db.bz2</a></td>
+        <td style="text-align: right;">~ 540 MB</td><td style="text-align: right;">~ 3.5 GB</td>
+        <td>Statistics about each key and each tag from the main OSM database (planet).</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
+        <td style="text-align: center;"><img src="/img/sources/wiki.16.png" alt="Wiki" width="16" height="16"/></td>
+        <td><a href="/download/taginfo-wiki.db.bz2">taginfo-wiki.db.bz2</a></td>
+        <td style="text-align: right;">~ 180 kB</td><td style="text-align: right;">~ 740 kB</td>
+        <td>Data from the tag and key pages of the OSM wiki.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
+        <td style="text-align: center;"><img src="/img/sources/josm.16.png" alt="JOSM" width="16" height="16"/></td>
+        <td><a href="/download/taginfo-josm.db.bz2">taginfo-josm.db.bz2</a></td>
+        <td style="text-align: right;">~ 25 kB</td><td style="text-align: right;">~ 200 kB</td>
+        <td>Configuration data from the JOSM OSM editor.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
+        <td style="text-align: center;"><img src="/img/taginfo.32.png" alt="Taginfo" width="32" height="16"/></td>
+        <td><a href="/download/taginfo-master.db.bz2">taginfo-master.db.bz2</a></td>
+        <td style="text-align: right;">~ 60 kB</td><td style="text-align: right;">~ 130 kB</td>
+        <td>Some aggregate statistics and miscellaneous data needed for the Taginfo user interface.</td>
+    <td class="border"></td></tr>
+    <tr><th colspan="7"/></tr>
+</table>
 
-<p>If you don't want to download these databases, but need automated access to the data, you can also use our <a href="/about">API</a>.
+<p>If you don't want to download these databases, but need automated access to the data, you can also use the <a href="/about">API</a>.
diff --git a/web/views/reports/characters_in_keys.erb b/web/views/reports/characters_in_keys.erb
index c2bb497..52e5595 100644
--- a/web/views/reports/characters_in_keys.erb
+++ b/web/views/reports/characters_in_keys.erb
@@ -5,35 +5,37 @@ case latin letters (a-z) and the underscore (_) are used, sometimes the colon
 (:) is added as a separator character.</p>
 
 <table class="list">
-    <tr>
+    <tr><th></th><th>Count</th><th>Fraction</th><th>Description</th><th></th></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_plain') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_plain') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Plain keys (only latin lowercase letters (a-z) and underscore (_), first and last characters are letters).</td>
-    </tr>
-    <tr>
+        <td>Only latin lowercase letters (<span class="char">a</span> to <span class="char">z</span>) and underscore (<span class="char">_</span>), first and last characters are letters.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_colon') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_colon') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Like plain keys but with one or more colons (:) inside.</td>
-    </tr>
-    <tr>
+        <td>Like above but with one or more colons (<span class="char">:</span>) inside.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_letters') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_letters') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Like plain keys but with uppercase latin letters or letters from other alphabets (and possibly with colons).</td>
-    </tr>
-    <tr>
+        <td>Like above but with uppercase latin letters or letters from other alphabets.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_space') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_space') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Contains whitespace (space, tab, new line, carriage return, or whitespace characters from other alphabets).</td>
-    </tr>
-    <tr>
+        <td>Contain whitespace (space, tab, new line, carriage return, or whitespace characters from other alphabets).</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_problem') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_problem') * 100.0 / @db.stats('num_keys') %>%</td>
-        <td>Contains possibly problematic characters (=+/&amp;&lt;&gt;;'"?%#@\,) or control characters.</td>
-    </tr>
-    <tr>
+        <td>Contain possibly problematic characters <span class="char">=+/&amp;&lt;&gt;;'"?%#@\,</span>.</td>
+    <td class="border"></td></tr>
+    <tr><td class="border"></td>
         <td class="number"><%= @db.stats('characters_in_keys_rest') %></td>
         <td class="number"><%= sprintf '%.2f', @db.stats('characters_in_keys_rest') * 100.0 / @db.stats('num_keys') %>%</td>
         <td>Everything else.</td>
-    </tr>
+    <td class="border"></td></tr>
+    <tr><th colspan="5"/></tr>
 </table>
 
diff --git a/web/views/sources/index.erb b/web/views/sources/index.erb
index e979658..ba7fdb8 100644
--- a/web/views/sources/index.erb
+++ b/web/views/sources/index.erb
@@ -8,19 +8,22 @@ have to go back to the source.</p>
 
 <table class="list">
     <tr>
-        <th>Source</th><th>Data until*</th><th>Last update run</th>
+        <th></th><th>Source</th><th>Data until*</th><th>Last update run</th><th></th>
     </tr>
     <% @sources.each do |source| %>
     <tr>
+        <td class="border"></td>
         <td><a href="/sources/<%= source['source_id'] %>"><img src="/img/sources/<%= source['source_id'] %>.16.png" alt="" width="16" height="16"/></a>
             <a href="/sources/<%= source['source_id'] %>"><%= source['source_name'] %></a></td>
         <td><%= source['data_until'] %></td>
         <td><%= source['update_start'] %> to <%= source['update_end'] %></td>
+        <td class="border"></td>
     </tr>
     <% end %>
+    <tr><th colspan="5"/></tr>
 </table>
 
-<p>* All edits until this time will be in the data, later edits might be.</p>
+<p style="font-size: 80%">* All edits until this time will be in the data, later edits might be.</p>
 
 <p>All times in UTC.</p>