From d58e89aefed5eaf0c1996f41813d10494ee93e6a Mon Sep 17 00:00:00 2001 From: Jochen Topf Date: Fri, 20 Jan 2012 16:05:34 +0100 Subject: More finetuning of presentation --- web/public/css/flexigrid/flexigrid.css | 3 +- .../css/smoothness/jquery-ui-1.8.10.custom.css | 3 +- web/public/css/taginfo.css | 23 +++++++-- web/public/js/taginfo.js | 54 ++++++++++++---------- web/views/layout.erb | 2 +- 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 '' + text + ''; +} + +function empty(text) { + return '' + text + ''; +} + 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 '' + texts.misc.values_less_than_one_percent + ''; + 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 '' + pp_key_with_highlight(key, highlight) + ''; + return '' + pp_key_with_highlight(key, highlight) + ''; } else { - return '' + pp_key_with_highlight(key, highlight) + ''; + return '' + pp_key_with_highlight(key, highlight) + ''; } } function link_to_value_with_highlight(key, value, highlight) { - return '' + pp_value_with_highlight(value, highlight) + ''; + return '' + pp_value_with_highlight(value, highlight) + ''; } 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 '' + pp_key(key) + ''; + return '' + pp_key(key) + ''; } else { - return '' + pp_key(key) + ''; + return '' + pp_key(key) + ''; } } 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, "$1"); if (key.match(/[=\/]/)) { - return '' + hk + ''; + return '' + hk + ''; } else { - return '' + hk + ''; + return '' + hk + ''; } } function link_to_value(key, value) { - return '' + pp_value(value) + ''; + return '' + pp_value(value) + ''; } 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), + '' + link_to_tag(row.key, row.value) + '', 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 == '' ? '' + texts.misc.no_image + '' : print_wiki_link(row.image), + row.image == '' ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)), (row.on_node ? 'yes' : 'no') + ' ' + (row.on_way ? 'yes' : 'no') + ' ' + (row.on_area ? 'yes' : '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 ? '' : '', - '
' + (row.line_width > 0 ? '
' : '') + '
', - row.area_color ? '
' : '' + '
' + (row.line_width > 0 ? '
' : '') + '
', + row.area_color ? '
' : '' ] }; }); 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 ? '' : '', - '
' + (row.line_width > 0 ? '
' : '') + '
', - row.area_color ? '
' : '' + '
' + (row.line_width > 0 ? '
' : '') + '
', + row.area_color ? '
' : '' ] }; }); 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 == '' ? '' + texts.misc.no_image + '' : print_wiki_link(row.image), + row.image == '' ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)), (row.on_node ? 'yes' : 'no') + ' ' + (row.on_way ? 'yes' : 'no') + ' ' + (row.on_area ? 'yes' : 'no') + ' ' + @@ -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 ? '' : '', - '
' + (row.line_width > 0 ? '
' : '') + '
', - row.area_color ? '
' : '' + '
' + (row.line_width > 0 ? '
' : '') + '
', + row.area_color ? '
' : '' ] }; }); 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 @@