More finetuning of presentation

5 files changed, 54 insertions, 31 deletions

diff --git a/web/public/css/flexigrid/flexigrid.css b/web/public/css/flexigrid/flexigrid.css
index 86f1b69..a88775e 100644
--- a/web/public/css/flexigrid/flexigrid.css
+++ b/web/public/css/flexigrid/flexigrid.css
@@ -435,7 +435,8 @@ div.colCopy {
 
 .flexigrid div.bDiv td div {
     border-top: 0px solid #ddddd4;
-    padding-bottom: 4px;
+    height: 22px;
+    overflow: hidden;
 }
 
 .flexigrid tr td.sorted {
diff --git a/web/public/css/smoothness/jquery-ui-1.8.10.custom.css b/web/public/css/smoothness/jquery-ui-1.8.10.custom.css
index 1fe7933..c8a9355 100644
--- a/web/public/css/smoothness/jquery-ui-1.8.10.custom.css
+++ b/web/public/css/smoothness/jquery-ui-1.8.10.custom.css
@@ -305,7 +305,7 @@
  *
  * http://docs.jquery.com/UI/Autocomplete#theming
  */
-.ui-autocomplete { position: absolute; cursor: default; background-color: #f0f0f0; /*border: 1px solid #c0c0c0;*/ font-size: 80%; }
+.ui-autocomplete { position: absolute; cursor: default; background-color: #ffffff; border: 1px solid #a0a0a0; font-size: 80%; }
 
 /* workarounds */
 * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
@@ -346,6 +346,7 @@
 }
 .ui-menu .ui-menu-item a.ui-state-hover,
 .ui-menu .ui-menu-item a.ui-state-active {
+    background-color: #ddddd4;
 	font-weight: normal;
 	margin: -1px;
 }
diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index c7cfca8..2faadd3 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -15,6 +15,11 @@ img.map {
     border: 1px solid #b8b8b0;
 }
 
+td img {
+    position: relative;
+    top: 3px;
+}
+
 img.icon_large {
     position: relative;
     top: 3px;
@@ -74,7 +79,7 @@ span.whitespace {
 }
 
 a.extlink:before {
-    content: "\2794";
+    content: "\2794\2009";
 }
 
 a.section {
@@ -204,6 +209,7 @@ input#search {
 
 input:focus {
     background-color: #ffffe0 !important;
+    outline: none;
 }
 
 /* ========== */
@@ -309,9 +315,11 @@ div#tools {
 }
 
 span.lang {
+    position: relative;
+    top: -1px;
     background-color: #f0e0f0;
     color: #202020;
-    border: 1px solid #808080;
+    border: 1px solid #b8b8b0;
     font-weight: bold;
     font-size: 80%;
     padding: 0 4px;
@@ -375,12 +383,21 @@ div.bar {
     float: left;
     margin: 4px 0 0 6px !important;
     padding: 0 !important;
-    height: 8px;
+    height: 8px !important;
     background-color: #a0a098;
 }
 
 /* ========== */
 
+span.overflow:hover {
+    position: absolute;
+    padding-right: 6px;
+    background-color: #ffffff;
+    z-index: 100;
+}
+
+/* ========== */
+
 table.list {
     border-collapse: collapse;
 }
diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index beef7e7..a439fff 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -56,6 +56,14 @@ function resize_wrapper() {
     }
 }
 
+function hover_expand(text) {
+    return '<span class="overflow">' + text + '</span>';
+}
+
+function empty(text) {
+    return '<span class="empty">' + text + '</span>';
+}
+
 function print_wiki_link(title, options) {
     if (title == '') {
         return '';
@@ -93,7 +101,7 @@ function print_key_or_tag_list(list) {
 
 function print_prevalent_value_list(key, list) {
     if (list.length == 0) {
-        return '<span class="empty">' + texts.misc.values_less_than_one_percent + '</span>';
+        return empty(texts.misc.values_less_than_one_percent);
     }
     return jQuery.map(list, function(item, i) {
         return link_to_value_with_title(key, item.value, '(' + (item.fraction * 100).toFixed(2) + '%)');
@@ -202,18 +210,17 @@ function pp_value_with_highlight(value, highlight) {
 }
 
 function link_to_key_with_highlight(key, highlight) {
-    var k = encodeURIComponent(key),
-        title = html_escape(key);
+    var k = encodeURIComponent(key);
 
     if (key.match(/[=\/]/)) {
-        return '<a class="taglink" href="/keys/?key=' + k + '" title="' + title + '">' + pp_key_with_highlight(key, highlight) + '</a>';
+        return '<a class="taglink" href="/keys/?key=' + k + '">' + pp_key_with_highlight(key, highlight) + '</a>';
     } else {
-        return '<a class="taglink" href="/keys/'      + k + '" title="' + title + '">' + pp_key_with_highlight(key, highlight) + '</a>';
+        return '<a class="taglink" href="/keys/'      + k + '">' + pp_key_with_highlight(key, highlight) + '</a>';
     }
 }
 
 function link_to_value_with_highlight(key, value, highlight) {
-    return '<a class="taglink" href="' + url_to_value(key, value) + '" title="' + html_escape(key) + '=' + html_escape(value) + '">' + pp_value_with_highlight(value, highlight) + '</a>';
+    return '<a class="taglink" href="' + url_to_value(key, value) + '">' + pp_value_with_highlight(value, highlight) + '</a>';
 }
 
 function html_escape(text) {
@@ -221,32 +228,30 @@ function html_escape(text) {
 }
 
 function link_to_key(key) {
-    var k = encodeURIComponent(key),
-        title = html_escape(key);
+    var k = encodeURIComponent(key);
 
     if (key.match(/[=\/]/)) {
-        return '<a class="taglink" href="/keys/?key=' + k + '" title="' + title + '">' + pp_key(key) + '</a>';
+        return '<a class="taglink" href="/keys/?key=' + k + '">' + pp_key(key) + '</a>';
     } else {
-        return '<a class="taglink" href="/keys/'      + k + '" title="' + title + '">' + pp_key(key) + '</a>';
+        return '<a class="taglink" href="/keys/'      + k + '">' + pp_key(key) + '</a>';
     }
 }
 
 function link_to_key_with_highlight(key, highlight) {
-    var k = encodeURIComponent(key),
-        title = html_escape(key);
+    var k = encodeURIComponent(key);
 
     var re = new RegExp('(' + highlight + ')', 'g');
     var hk = key.replace(re, "<b>$1</b>");
 
     if (key.match(/[=\/]/)) {
-        return '<a class="taglink" href="/keys/?key=' + k + '" title="' + title + '">' + hk + '</a>';
+        return '<a class="taglink" href="/keys/?key=' + k + '">' + hk + '</a>';
     } else {
-        return '<a class="taglink" href="/keys/'      + k + '" title="' + title + '">' + hk + '</a>';
+        return '<a class="taglink" href="/keys/'      + k + '">' + hk + '</a>';
     }
 }
 
 function link_to_value(key, value) {
-    return '<a class="taglink" href="' + url_to_value(key, value) + '" title="' + html_escape(key) + '=' + html_escape(value) + '">' + pp_value(value) + '</a>';
+    return '<a class="taglink" href="' + url_to_value(key, value) + '">' + pp_value(value) + '</a>';
 }
 
 function url_to_value(key, value) {
@@ -325,7 +330,6 @@ var flexigrid_defaults = {
     usepager      : true,
     useRp         : false,
     onSuccess     : function(grid) {
-        jQuery('*[title]').tipsy({ opacity: 1, delayIn: 500, gravity: 'w' });
         grid.fixHeight();
     }
 };
@@ -423,7 +427,7 @@ var create_flexigrid_for = {
                 preProcess: function(data) {
                     data.rows = jQuery.map(data.data, function(row, i) {
                         return { 'cell': [
-                            link_to_tag(row.key, row.value),
+                            '<span class="overflow">' + link_to_tag(row.key, row.value) + '</span>',
                             print_value_with_percent(row.count_all,       row.count_all_fraction),
                             print_value_with_percent(row.count_nodes,     row.count_nodes_fraction),
                             print_value_with_percent(row.count_ways,      row.count_ways_fraction),
@@ -509,7 +513,7 @@ var create_flexigrid_for = {
                                 print_language(row.lang, row.language, row.language_en),
                                 print_wiki_link(row.title),
                                 row.description,
-                                row.image == ''   ? '<span class="empty">' + texts.misc.no_image + '</span>' : print_wiki_link(row.image),
+                                row.image == ''   ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)),
                                 (row.on_node      ? '<img src="/img/types/node.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
                                 (row.on_way       ? '<img src="/img/types/way.16.png"      alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
                                 (row.on_area      ? '<img src="/img/types/area.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
@@ -540,8 +544,8 @@ var create_flexigrid_for = {
                         return { 'cell': [
                             row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
                             row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
-                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (6 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
-                            row.area_color ? '<div title="' + row.area_color + '" style="height: 8px; background-color: ' + row.area_color + '"></div>' : ''
+                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
+                            row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
                         ] };
                     });
                     return data;
@@ -641,8 +645,8 @@ var create_flexigrid_for = {
                         return { 'cell': [
                             row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
                             row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
-                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (6 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
-                            row.area_color ? '<div title="' + row.area_color + '" style="height: 8px; background-color: ' + row.area_color + '"></div>' : ''
+                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
+                            row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
                         ] };
                     });
                     return data;
@@ -673,7 +677,7 @@ var create_flexigrid_for = {
                                 print_language(row.lang, row.language, row.language_en),
                                 print_wiki_link(row.title),
                                 row.description,
-                                row.image == ''   ? '<span class="empty">' + texts.misc.no_image + '</span>' : print_wiki_link(row.image),
+                                row.image == ''   ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)),
                                 (row.on_node      ? '<img src="/img/types/node.16.png"     alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
                                 (row.on_way       ? '<img src="/img/types/way.16.png"      alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
                                 (row.on_area      ? '<img src="/img/types/area.16.png"     alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
@@ -780,8 +784,8 @@ var create_flexigrid_for = {
                             link_to_key(row.k),
                             row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
                             row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
-                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (6 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
-                            row.area_color ? '<div title="' + row.area_color + '" style="height: 8px; background-color: ' + row.area_color + '"></div>' : ''
+                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
+                            row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
                         ] };
                     });
                     return data;
diff --git a/web/views/layout.erb b/web/views/layout.erb
index cf51ded..1fff3d9 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -43,7 +43,7 @@
         </div>
         <div id="footer">
             <div id="footer_left">
-                <a href="http://www.openstreetmap.org/"><b style="font-style: smallcaps;">OpenStreetMap</b> - The Free Wiki World Map</a>
+                <a class="extlink" href="http://www.openstreetmap.org/"><b>OpenStreetMap</b> - The Free Wiki World Map</a>
             </div>
             <div id="footer_right">
                 <a href="/keys"><%= t.taginfo.keys %></a> &middot;