diff options
author | Jochen Topf <jochen@topf.org> | 2012-01-20 16:05:34 +0100 |
---|---|---|
committer | Jochen Topf <jochen@topf.org> | 2012-01-20 16:32:20 +0100 |
commit | d58e89aefed5eaf0c1996f41813d10494ee93e6a (patch) | |
tree | 916a1bfde91812c841d9638af37d02e78085be4d | |
parent | 4adb935abbe6cc75ea7b371b1032b5d74b99e083 (diff) | |
download | taginfo-d58e89aefed5eaf0c1996f41813d10494ee93e6a.tar taginfo-d58e89aefed5eaf0c1996f41813d10494ee93e6a.tar.gz |
More finetuning of presentation
-rw-r--r-- | web/public/css/flexigrid/flexigrid.css | 3 | ||||
-rw-r--r-- | web/public/css/smoothness/jquery-ui-1.8.10.custom.css | 3 | ||||
-rw-r--r-- | web/public/css/taginfo.css | 23 | ||||
-rw-r--r-- | web/public/js/taginfo.js | 54 | ||||
-rw-r--r-- | 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 '<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> · |