Updated home page to also show relation types

6 files changed, 62 insertions, 40 deletions

diff --git a/web/i18n/de.yml b/web/i18n/de.yml
index 22ca879..9de7085 100644
--- a/web/i18n/de.yml
+++ b/web/i18n/de.yml
@@ -133,7 +133,10 @@ pages:
         popular_keys: Weitverbreitete Keys
         keys:
             listkeys: Alle Keys...
+        tags:
             listtags: Die häufigsten Tags...
+        relations:
+            listrelations: Alle Relation-Typen...
         reports:
             listreports: Alle Reports...
         about:
diff --git a/web/i18n/en.yml b/web/i18n/en.yml
index d6e1d4d..c9020ec 100644
--- a/web/i18n/en.yml
+++ b/web/i18n/en.yml
@@ -134,7 +134,10 @@ pages:
         popular_keys: Some popular keys
         keys:
             listkeys: See all keys...
+        tags:
             listtags: See most common tags...
+        relations:
+            listrelations: See all relation types...
         reports:
             listreports: See all reports...
         about:
diff --git a/web/i18n/pl.yml b/web/i18n/pl.yml
index a733799..9f9114c 100644
--- a/web/i18n/pl.yml
+++ b/web/i18n/pl.yml
@@ -73,9 +73,8 @@ misc:
 pages:
     index:
         keys:
-            intro: |
-                Oto niektóre z najczęściej używanych kluczy:
             listkeys: Zobacz listę wszystkich kluczy...
+        tags:
             listtags: Zobacz listę najpopularniejszych tagów...
         reports:
             listreports: Zobacz wszystkie raporty...
diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 8138c84..9a29e64 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -53,7 +53,7 @@ p {
     max-width: 60em;
 }
 
-p.emphasis {
+.emphasis {
     font-weight: bold;
     font-size: 110%;
 }
diff --git a/web/views/index.erb b/web/views/index.erb
index ce3730f..6dbc6b7 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -1,22 +1,22 @@
 <table class="boxes resize" width="100%">
     <tr>
-        <td width="232" height="20"><h2><a href="/keys"><%= t.osm.keys %></a></h2></td>
-        <td rowspan="4" width="20"></td>
-        <td height="20"><h2><%= t.pages.index.popular_keys %></h2></td>
-        <td rowspan="4" width="20"></td>
-        <td width="232" height="20"><h2><a href="/reports"><%= t.taginfo.reports %></a></h2></td>
-        <td rowspan="4" width="20"></td>
-        <td width="232" height="20"><h2><a href="/about"><%= t.taginfo.about %></a></h2></td>
+        <td width="232" height="40"><h2><a href="/keys"><%= t.osm.keys %></a></h2></td>
+        <td rowspan="6" width="20"></td>
+        <td height="40"><h2><%= t.pages.index.popular_keys %></h2></td>
+        <td rowspan="6" width="20"></td>
+        <td width="232" height="40"><h2><a href="/reports"><%= t.taginfo.reports %></a></h2></td>
+        <td rowspan="6" width="20"></td>
+        <td width="232" height="40"><h2><a href="/about"><%= t.taginfo.about %></a></h2></td>
     </tr>
     <tr>
         <td class="box">
-            <ul id="key_list" style="margin: 0 0 0 18px; padding: 0;"></ul>
-            <p class="emphasis" style="margin: 20px 0 0 0;"><a href="/keys"><%= t.pages.index.keys.listkeys %></a></p>
+            <div id="key_list"></div>
+            <div class="emphasis" style="margin: 10px 0 0 0;"><a href="/keys"><%= t.pages.index.keys.listkeys %></a></div>
         </td>
-        <td rowspan="3" class="box">
+        <td rowspan="5" class="box">
             <div id="tagcloud" style="margin: 15px 0; line-height: 200%; text-align: justify; overflow: hidden;"></div>
         </td>
-        <td rowspan="3" class="box">
+        <td rowspan="5" class="box">
             <p><%= t.pages.reports.intro %></p>
             <ul style="margin: 0 0 0 18px; padding: 0;">
 <% Report.each do |report| %>
@@ -25,19 +25,28 @@
             </ul>
             <p class="emphasis" style="margin-top: 20px;"><a href="/reports"><%= t.pages.index.reports.listreports %></a></p>
         </td>
-        <td class="box">
+        <td rowspan="3" class="box">
             <%= t.pages.index.about.intro %>
             <p class="emphasis" style="margin-top: 20px;"><a href="/about"><%= t.pages.index.about.more %></a></p>
         </td>
     </tr>
     <tr>
-        <td height="20"><h2><a href="/tags"><%= t.osm.tags %></a></h2></td>
-        <td height="20"><h2><%= t.taginfo.international %></h2></td>
+        <td height="40"><h2><a href="/tags"><%= t.osm.tags %></a></h2></td>
+    </tr>
+    <tr>
+        <td class="box">
+            <div id="tag_list"></div>
+            <div class="emphasis" style="margin: 10px 0 0 0;"><a href="/tags"><%= t.pages.index.tags.listtags %></a></div>
+        </td>
+    </tr>
+    <tr>
+        <td height="40"><h2><a href="/relations"><%= t.osm.relation_types %></a></h2></td>
+        <td height="40"><h2><%= t.taginfo.international %></h2></td>
     </tr>
     <tr>
         <td class="box">
-            <ul id="tag_list" style="margin: 0 0 0 18px; padding: 0;"></ul>
-            <p class="emphasis" style="margin: 20px 0 0 0;"><a href="/tags"><%= t.pages.index.keys.listtags %></a></p>
+            <div id="relation_list"></div>
+            <div class="emphasis" style="margin: 10px 0 0 0;"><a href="/relations"><%= t.pages.index.relations.listrelations %></a></div>
         </td>
         <td class="box">
             <p><%= TaginfoConfig.get('instance.description') %></p>
diff --git a/web/viewsjs/index.js.erb b/web/viewsjs/index.js.erb
index f9404f2..8c0286b 100644
--- a/web/viewsjs/index.js.erb
+++ b/web/viewsjs/index.js.erb
@@ -3,16 +3,18 @@
 # as many of them as will fit in the window.
 tagcloud_number_of_keys = 200
 tagcloud_number_of_tags = 40
+tagcloud_number_of_relations = 40
 keys = @db.select("SELECT key, scale1 FROM popular_keys ORDER BY scale1 DESC LIMIT #{ tagcloud_number_of_keys }").
     execute().
     each_with_index{ |tag, idx| tag['pos'] = (tagcloud_number_of_keys - idx) / tagcloud_number_of_keys.to_f }
 tags = @db.select("SELECT skey, svalue FROM db.selected_tags WHERE skey NOT IN ('source', 'source_ref', 'attribution') ORDER BY count_all DESC LIMIT #{ tagcloud_number_of_tags }").execute()
+relations = @db.select("SELECT rtype FROM db.relation_types ORDER BY count DESC LIMIT #{ tagcloud_number_of_relations }").execute()
 %>
 
-var keys_data = <%= keys.map{ |tag| { :text => tag['key'], :size => tagcloud_size(tag) } }.to_json.gsub(/\},/, "},\n") %>;
-var tags_data = <%= tags.map{ |entry| [ entry['skey'], entry['svalue'] ] }.to_json.gsub(/\],/, "],\n") %>;
-
-var width, height, font_family = 'Impact', font_weight = 'normal';
+var keys_data = <%= keys.map{ |tag| { :text => tag['key'], :size => tagcloud_size(tag) } }.to_json.gsub(/\},/, "},\n") %>,
+    tags_data = <%= tags.map{ |entry| [ entry['skey'], entry['svalue'] ] }.to_json.gsub(/\],/, "],\n") %>,
+    relations_data = <%= relations.map{ |row| row['rtype'] }.to_json.gsub(/\],/, "],\n") %>,
+    width, height, font_family = 'Impact', font_weight = 'normal';
 
 up = function() {};
 
@@ -73,33 +75,39 @@ function resize_home() {
 }
 
 function fill_lists() {
-    var key_list = jQuery('#key_list'),
-        tag_list = jQuery('#tag_list');
-
-    key_list.empty();
-    tag_list.empty();
-
-    var key_list_height = key_list.parent().height() - key_list.next().outerHeight() - 60,
-        tag_list_height = tag_list.parent().height() - tag_list.next().outerHeight() - 60,
+    var key_list = jQuery('#key_list').empty(),
+        tag_list = jQuery('#tag_list').empty(),
+        relation_list = jQuery('#relation_list').empty(),
+        title_td_height = 42,
+        reserve_height = 64,
+        max_height = jQuery('table').height() / 3 - title_td_height - reserve_height;
         i = 0;
 
-    console.log(key_list_height);
-    console.log(tag_list_height);
-
-    while (key_list.outerHeight() < key_list_height) {
+    while (key_list.outerHeight() < max_height) {
         var d = keys_data[i];
-        key_list.append(tag('li', link_to_key(d.text)));
+        key_list.append(link_to_key(d.text));
+        key_list.append(' &bull; ');
         i++;
     }
-    key_list.append(tag('li', '...'));
+    key_list.append('...');
 
     i = 0;
-    while (tag_list.outerHeight() < tag_list_height) {
+    while (tag_list.outerHeight() < max_height) {
         var d = tags_data[i];
-        tag_list.append(tag('li', link_to_tag(d[0], d[1])));
+        tag_list.append(link_to_tag(d[0], d[1]));
+        tag_list.append(' &bull; ');
+        i++;
+    }
+    tag_list.append('...');
+
+    i = 0;
+    while (relation_list.outerHeight() < max_height) {
+        var d = relations_data[i];
+        relation_list.append(link_to_rtype(d));
+        relation_list.append(' &bull; ');
         i++;
     }
-    tag_list.append(tag('li', '...'));
+    relation_list.append('...');
 }
 
 function page_init() {