From a338547eafeed14eae74befbe706eadcf6a9fb4e Mon Sep 17 00:00:00 2001 From: Jochen Topf Date: Tue, 12 May 2015 18:20:38 +0200 Subject: Add experimental new home page. This could replace the current home page at some point. --- web/taginfo.rb | 7 ++- web/views/test-index.erb | 141 ++++++++++++++++++++++++++++++++++++++++++ web/viewsjs/test-index.js.erb | 53 ++++++++++++++++ 3 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 web/views/test-index.erb create mode 100644 web/viewsjs/test-index.js.erb diff --git a/web/taginfo.rb b/web/taginfo.rb index 7dcec2c..778602a 100755 --- a/web/taginfo.rb +++ b/web/taginfo.rb @@ -9,7 +9,7 @@ # #------------------------------------------------------------------------------ # -# Copyright (C) 2010-2014 Jochen Topf +# Copyright (C) 2010-2015 Jochen Topf # # This program is free software; you can redistribute it and/or modify # it under the terms of the GNU General Public License as published by @@ -165,6 +165,11 @@ class Taginfo < Sinatra::Base erb :index end + get '/test-index' do + javascript "#{ r18n.locale.code }/test-index" + erb :'test-index' + end + #------------------------------------- %w(about download sources).each do |page| diff --git a/web/views/test-index.erb b/web/views/test-index.erb new file mode 100644 index 0000000..391efde --- /dev/null +++ b/web/views/test-index.erb @@ -0,0 +1,141 @@ +<% @nosearch = true + @css = <<'CSS' +div#menu { + position: relative; + margin: 0 auto; + width: 100%; + height: 30px; + border-bottom: 1px solid #a0a0a0; +} + +div#menuitems { + position: absolute; + width: 100%; +} + +div#menu .mitem { + position: relative; +} + +div#menu h2 { + text-transform: uppercase; + font-weight: normal; + margin: 2px 40px 2px 0px; + height: 26px; + float: left; +} + +div#menu h2:hover { + border-bottom: 3px solid #a0a0a0; +} + +div#menu h2 a { + text-decoration: none; +} + +div#menu div.mitem .mpop { + position: absolute; + visibility: hidden; + padding-top: 6px; + width: 100%; + height: 210px; + top: 31px; + background: -moz-linear-gradient(top, #ffffff, #f0f0f0); + border-radius: 4px; +} + +div#menu div.mitem .mpop p { + padding: 8px 16px; + max-width: 40em; +} + +div#menu div.mitem .mpop div { + padding: 8px 16px; +} + +div#menu div.mitem:hover .mpop { + visibility: visible; +} + +div#search_box { + text-align: center; +} + +div#search_box p { + max-width: 100%; + font-size: 80%; +} + +div#main input#search { + font-size: 140%; + padding: 2px 6px; +} +CSS +%> +
+ +
+ +
diff --git a/web/viewsjs/test-index.js.erb b/web/viewsjs/test-index.js.erb new file mode 100644 index 0000000..8920c3c --- /dev/null +++ b/web/viewsjs/test-index.js.erb @@ -0,0 +1,53 @@ +<% +# This is the maximum number of keys/tags/relations in the lists. Javascript +# code will only show as many of them as will fit in the window. +tagcloud_number_of_keys = 100 +tagcloud_number_of_tags = 100 +tagcloud_number_of_rels = 100 +keys = @db.select("SELECT key FROM popular_keys ORDER BY scale1 DESC LIMIT #{ tagcloud_number_of_keys }").execute() +tags = @db.select("SELECT skey, svalue FROM top_tags WHERE skey NOT IN ('source', 'source_ref', 'attribution') ORDER BY count_all DESC LIMIT #{ tagcloud_number_of_tags }").execute() +rels = @db.select("SELECT rtype FROM db.relation_types WHERE count >= 1000 ORDER BY count DESC LIMIT #{ tagcloud_number_of_rels }").execute() +%> + +var data = { + 'keys': <%= keys.map{ |tag| tag['key'] }.to_json %>, + 'tags': <%= tags.map{ |entry| [ entry['skey'], entry['svalue'] ] }.to_json %>, + 'rels': <%= rels.map{ |row| row['rtype'] }.to_json %> +}; + +up = function() {}; + +function create_list(element, max_height, data, decrease, func) { + var i = 0, + size = 160; + + while (element.innerHeight() < max_height && data[i]) { + element.append(func(data[i], size)); + element.append(' • '); + i++; + size -= decrease; + } + + element.append('...'); +} + +function resize_home() { + + create_list(jQuery('#key_list').empty(), 120, data.keys, 1, function(d, size) { + return link_to_key(d, { 'style': 'font-size: ' + size + "%;" }); + }); + + create_list(jQuery('#tag_list').empty(), 120, data.tags, 2, function(d, size) { + return ' ' + link_to_tag(d[0], d[1]) + ' ' + }); + + create_list(jQuery('#relation_list').empty(), 120, data.rels, 5, function(d, size) { + return link_to_rtype(d, { 'style': 'font-size: ' + size + "%;" }); + }); + +} + +function page_init() { + jQuery(window).resize(resize_home); + resize_home(); +} -- cgit v1.2.3