Update about page, external/wiki link design

13 files changed, 127 insertions, 100 deletions

diff --git a/web/i18n/de.yml b/web/i18n/de.yml
index bf7406b..e3ef8c3 100644
--- a/web/i18n/de.yml
+++ b/web/i18n/de.yml
@@ -53,10 +53,10 @@ pages:
         index:
             intro: |
                 <p>Hier kannst Du die Datenbanken herunterladen, die von Taginfo verwendet
-                werden. Alle Daten sind in <img src="/img/link-extern.gif" alt=""/><a class="extlink"
+                werden. Alle Daten sind in <a class="extlink"
                 href="http://www.sqlite.org/">Sqlite-Datenbanken</a> gespeichert.
                 Die Datenbank-Dateien sind dann mit
-                <img src="/img/link-extern.gif" alt=""/><a class="extlink"
+                <a class="extlink"
                 href="http://www.bzip.org/">bzip2</a> gepackt.</p>
                 <p>Wenn Du die Datenbanken nicht herunterladen willst, aber trotzdem
                 automatisiert auf die Daten zugreifen willst, kannst Du auch die 
diff --git a/web/i18n/en.yml b/web/i18n/en.yml
index f7e7e63..f9391a4 100644
--- a/web/i18n/en.yml
+++ b/web/i18n/en.yml
@@ -21,6 +21,7 @@ taginfo:
     sources: Sources
     download: Download
     about: About taginfo
+    contact: Contact
     wiki: taginfo wiki page
     reports: Reports
     keys: Keys
@@ -72,10 +73,8 @@ pages:
         index:
             intro: |
                 <p>Here you can download the databases used by Taginfo. All the data is stored
-                in <img src="/img/link-extern.gif" alt=""/><a class="extlink"
-                href="http://www.sqlite.org/">Sqlite</a> databases. The database files are then
-                packed with <img src="/img/link-extern.gif" alt=""/><a class="extlink"
-                href="http://www.bzip.org/">bzip2</a>.</p>
+                in <a class="extlink" href="http://www.sqlite.org/">Sqlite</a> databases.
+                The database files are then packed with <a class="extlink" href="http://www.bzip.org/">bzip2</a>.</p>
                 <p>If you don't want to download these databases, but need automated access to
                 the data, you can also use the <a href="/about">API</a>.</p>
             file: File
diff --git a/web/i18n/fr.yml b/web/i18n/fr.yml
index 3d1bed6..6b01832 100644
--- a/web/i18n/fr.yml
+++ b/web/i18n/fr.yml
@@ -51,9 +51,9 @@ pages:
         index:
             intro: |
                 <p>Vous pouvez télécharger les données utilisées par Taginfo. Toutes les données sont stockées
-                dans des bases de données <img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://www.sqlite.org/">Sqlite</a>.
+                dans des bases de données <a class="extlink" href="http://www.sqlite.org/">Sqlite</a>.
                 Les fichiers de base de données sont ensuite compressés
-                avec <img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://www.bzip.org/">bzip2</a>.</p>
+                avec <a class="extlink" href="http://www.bzip.org/">bzip2</a>.</p>
                 <p>Si vous ne voulez pas télécharger les données, vous pouvez toujours y accéder directement grâce à l'<a href="/about">API</a>.</p>
             file: Fichier
             packed: Compressé
diff --git a/web/i18n/it.yml b/web/i18n/it.yml
index c479dd3..36c635e 100644
--- a/web/i18n/it.yml
+++ b/web/i18n/it.yml
@@ -48,10 +48,9 @@ pages:
         index:
             intro: |
                 <p>Qui potete scaricare il database usato da Taginfo. Tutti i dati sono memorizzati
-                in un database <img src="/img/link-extern.gif" alt=""/><a class="extlink"
+                in un database <a class="extlink"
                 href="http://www.sqlite.org/">Sqlite</a>. I file del database sono poi
-                compressi con <img src="/img/link-extern.gif" alt=""/><a class="extlink"
-                href="http://www.bzip.org/">bzip2</a>.</p>
+                compressi con <a class="extlink" href="http://www.bzip.org/">bzip2</a>.</p>
                 <p>Se non volete scaricare questi database, ma avete bisogno di avere un accesso automatizzato
                 ai dati, potete anche usare le <a href="/about">API</a>.</p>
             file: File
diff --git a/web/i18n/ru.yml b/web/i18n/ru.yml
index 25106d8..c623c4a 100644
--- a/web/i18n/ru.yml
+++ b/web/i18n/ru.yml
@@ -55,10 +55,9 @@ pages:
         index:
             intro: |
                 <p>Здесь можно скачать базы данных, используемые Taginfo. Все данные хранятся
-                в формате <img src="/img/link-extern.gif" alt=""/><a class="extlink"
+                в формате <a class="extlink"
                 href="http://www.sqlite.org/">Sqlite</a>. Затем файлы баз данных сжаты
-                <img src="/img/link-extern.gif" alt=""/><a class="extlink"
-                href="http://www.bzip.org/">bzip2</a>.</p>
+                <a class="extlink" href="http://www.bzip.org/">bzip2</a>.</p>
                 <p>Если вам не нужны эти файлы, а требуется автоматизируемый доступ к данным,
                 воспользуйтесь <a href="/about">API</a>.</p>
             file: Файл
diff --git a/web/lib/utils.rb b/web/lib/utils.rb
index 2b1712d..0940981 100644
--- a/web/lib/utils.rb
+++ b/web/lib/utils.rb
@@ -65,7 +65,7 @@ def josm_link(element, key, value=nil)
 end
 
 def external_link(id, title, link)
-    %Q{<img src="/img/link-extern.gif" rel="nofollow" alt="" width="14" height="10"/><a id="#{id}" class="extlink" href="#{link}">#{title}</a>}
+    %Q{<a id="#{id}" rel="nofollow" class="extlink" href="#{link}">#{title}</a>}
 end
 
 def tagcloud_size(tag)
diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index b151a44..8b8043c 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -11,6 +11,10 @@ img {
     border: 0 none;
 }
 
+img.map {
+    border: 1px solid #b8b8b0;
+}
+
 img.icon_large {
     position: relative;
     top: 3px;
@@ -68,11 +72,12 @@ span.empty {
     font-style: italic;
 }
 
-a.wikilink {
-    color: #832719 !important;
+a.wikilink:before {
+    content: "\2794";
 }
 
-a.extlink {
+a.extlink:before {
+    content: "\2794";
 }
 
 a.section {
diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index cc1345b..a579438 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -90,7 +90,7 @@ function print_wiki_link(title, options) {
         path = 'wiki/' + title;
     }
 
-    return '<img src="/img/link-wiki.gif" alt="" width="14" height="10"/><a class="wikilink" href="http://wiki.openstreetmap.org/' + path + '" target="_blank">' + title + '</a>';
+    return '<a class="wikilink" href="http://wiki.openstreetmap.org/' + path + '" target="_blank">' + title + '</a>';
 }
 
 function print_language(code, native_name, english_name) {
diff --git a/web/views/about.erb b/web/views/about.erb
index 54d9b16..09a395c 100644
--- a/web/views/about.erb
+++ b/web/views/about.erb
@@ -1,65 +1,90 @@
 
-<div class="boxes">
-    <h2>Sources</h2>
-    <div class="box">
-        <p>Taginfo integrates data about tags from several sources:</p>
-        <p>From the <b>OSM database</b> statistics about key and tag usage.</p>
-        <p>The <b>Wiki</b> contains some documentation for keys and tags.</p>
-        <p>Icons and styles are taken from the <b>JOSM</b> editor
-        configuration.</p>
-        <p>&#x2794; <a href="http://wiki.openstreetmap.org/wiki/Taginfo/Sources">More information about the sources on the wiki...</a></p>
-    </div>
-</div>
-
-
-<h1>About taginfo</h1>
-<p>OpenStreetMap uses <b>tags</b> to add meaning to geographic objects. There
-is no fixed list of those tags. New tags can be invented and used as needed.
-Everybody can come up with a new tag and add it to new or existing objects.
-This makes OpenStreetMap enormously flexible, but sometimes also a bit hard
-to work with.</p>
-
-<p>Whether you are contributing to OSM or using the data, there are always
-questions like: What tags do people use for feature X? What tags can I use
-for feature Y so that it appears properly on the map? Is the tag Z described
-on the wiki actually in use and where?</p>
-
-<p>Taginfo helps you by showing statistics about which tags are actually in the
-database, how many people use those tags, where they are used and so on. It
-also gets information about those tags from the wiki and from other places. Taginfo
-tries to bring together all information about tags to help you understand
-how they are used and what they mean.</p>
-
-<h2>Contact</h2>
-
-<p>Taginfo was created and is maintained by <a href="http://wiki.openstreetmap.org/wiki/User:Joto">Jochen Topf</a>. You can contact
-me at <a href="mailto:jochen@remote.org">jochen@remote.org</a>.</p>
-
-<h2>Hack it</h2>
-
-<p>All the parts of Taginfo are Open Source. You are welcome to take Taginfo
-and play around with. See the <img src="/img/link-extern.gif" alt=""/><a
-href="http://wiki.openstreetmap.org/wiki/Taginfo">Taginfo wiki page</a> for
-more information.</p>
-
-<p>If you want to access the databases behind Taginfo, you can use our API.
-Access is through a RESTful HTTP interface. See the API
-section for more information.</p>
-
-<p>If you want to play around with the data itself, you can download the
-regularly updated databases used by Taginfo. All the preprocessing is done for
-you. See the <a href="/download">download</a> section for more information.</p>
-
-<h2>API</h2>
-
-<p>Taginfo data can be accessed through a REST API. The documentation of the
-API calls is <a href="/apidoc">here</a>, some general information
-<a href="http://wiki.openstreetmap.org/wiki/Taginfo/API">on the wiki</a>.</p>
-
-<h3>Terms of Use</h3>
-
-<p>The server running the Taginfo API does not have unlimited resources.
-Please use the API responsibly. Do not create huge amounts of requests to
-get the whole database or large chunks of it, instead use the
-<a href="/download">database downloads</a> provided.</p>
-
+<table class="boxes" width="100%">
+    <tr>
+        <td><h2><a href="/keys"><%= t.taginfo.about %></a></h2></td>
+        <td rowspan="4" width="20"></td>
+        <td width="232"><h2><a href="/sources"><%= t.taginfo.sources %></a></h2></td>
+        <td rowspan="2" width="20"></td>
+        <td width="232"><h2><%= t.taginfo.contact %></h2></td>
+    </tr>
+    <tr>
+        <td class="box">
+            <p>OpenStreetMap uses <b>tags</b> to add meaning to geographic objects. There
+            is no fixed list of those tags. New tags can be invented and used as needed.
+            Everybody can come up with a new tag and add it to new or existing objects.
+            This makes OpenStreetMap enormously flexible, but sometimes also a bit hard
+            to work with.</p>
+
+            <p>Whether you are contributing to OSM or using the OSM data, there are always
+            questions like: What tags do people use for feature X? What tags can I use
+            for feature Y so that it appears properly on the map? Is the tag Z described
+            on the wiki actually in use and where?</p>
+
+            <p>Taginfo helps you by showing statistics about which tags are actually in the
+            database, how many people use those tags, where they are used and so on. It
+            also gets information about those tags from the wiki and from other places. Taginfo
+            tries to bring together all information about tags to help you understand
+            how they are used and what they mean.</p>
+
+            <p>The taginfo software was created and is maintained by
+            <a class="extlink" href="http://wiki.openstreetmap.org/wiki/User:Joto">Jochen Topf</a>.
+            He also maintains the main taginfo site.
+        </td>
+        <td class="box">
+            <p>Taginfo integrates data about tags from several sources:</p>
+            <p>From the <b>OSM database</b> statistics about key and tag usage.</p>
+            <p>The <b>Wiki</b> contains some documentation for keys and tags.</p>
+            <p>Icons and styles are taken from the <b>JOSM</b> editor
+            configuration.</p>
+            <p><a class="extlink" href="http://wiki.openstreetmap.org/wiki/Taginfo/Sources">More information about the sources on the wiki...</a></p>
+        </td>
+        <td class="box">
+            <p>Bug reports should be filed in the
+            <a class="extlink" href="http://trac.openstreetmap.org/query?status=accepted&status=assigned&status=new&status=reopened&component=taginfo&order=priority">OSM bug tracker</a>
+            using the 'taginfo' component.</p>
+            <p>Taginfo developers and site maintainers hang out on the
+            <a class="extlink" href="http://lists.openstreetmap.org/listinfo/taginfo-dev">taginfo mailing list</a>.</p>
+            <p>You can contact the taginfo maintainer at
+            <a class="extlink" href="mailto:jochen@remote.org">jochen@remote.org</a>.</p>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <h2>Using taginfo in your own projects</h2>
+        </td>
+        <td colspan="3">
+            <h2>How you can contribute</h2>
+        </td>
+    </tr>
+    <tr>
+        <td class="box">
+            <p>You can use the data behind taginfo in your own projects:</p>
+
+            <p>If you want to play around with the data itself, you can <b>download</b> the
+            regularly updated databases used by taginfo. All the preprocessing is done for
+            you. See the <a href="/download">download</a> section for more information.</p>
+
+            <p>Taginfo data can also be accessed through a REST <b>API</b>. The documentation of the
+            API calls is <a href="/apidoc">here</a>, some general information is
+            <a class="extlink" href="http://wiki.openstreetmap.org/wiki/Taginfo/API">on the wiki</a>.
+            The server running the Taginfo API does not have unlimited resources.
+            Please use the API responsibly. If in doubt contact the taginfo maintainers.</p>
+        </td>
+        <td class="box" colspan="3">
+            <p>All the parts of taginfo are Open Source. <b>Programmers</b> can
+            <a class="extlink" href="https://github.com/joto/taginfo/">fork taginfo on Github</a>
+            and play around with it. We welcome help developing taginfo.</p>
+            <p>We also need <b>translators</b> for the taginfo user interface. The
+            <a class="extlink" href="https://github.com/joto/taginfo/tree/master/web/i18n">translation
+            files</a> are on Github.</p>
+            <p>You can run your own
+            <a class="extlink" href="http://wiki.openstreetmap.org/wiki/Taginfo/Sites">taginfo site</a>,
+            for instance with data for just your own country.</p>
+            <p>Contact us on the <a class="extlink" href="http://lists.openstreetmap.org/listinfo/taginfo-dev">taginfo mailing list</a>
+            if you can offer any help.</p>
+            <p>See the
+            <a class="extlink" href="http://wiki.openstreetmap.org/wiki/Taginfo">wiki</a> for
+            more information.</p>
+        </td>
+    </tr>
+</table>
diff --git a/web/views/index.erb b/web/views/index.erb
index 51be9fe..d954929 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -18,8 +18,8 @@
             <p><%= t.pages.index.keys.intro %></p>
             <div id="tagcloud" style="margin: 15px 0; line-height: 200%; text-align: justify; overflow: hidden;">
             </div>
-            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="/keys"><%= t.pages.index.keys.listkeys %></a></p>
-            <p class="emphasis">&#x2794; <a href="/tags"><%= t.pages.index.keys.listtags %></a></p>
+            <p class="emphasis" style="margin-top: 20px;"><a href="/keys"><%= t.pages.index.keys.listkeys %></a></p>
+            <p class="emphasis"><a href="/tags"><%= t.pages.index.keys.listtags %></a></p>
         </td>
         <td rowspan="3" class="box">
             <p><%= t.pages.reports.index.intro %></p>
@@ -28,11 +28,11 @@
                 <li><a href="<%= report.url %>"><%= t.reports[report.name].name %></a></li>
 <% end %>
             </ul>
-            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="/reports"><%= t.pages.index.reports.listreports %></a></p>
+            <p class="emphasis" style="margin-top: 20px;"><a href="/reports"><%= t.pages.index.reports.listreports %></a></p>
         </td>
         <td class="box">
             <%= t.pages.index.about.intro %>
-            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="/about"><%= t.pages.index.about.more %></a></p>
+            <p class="emphasis" style="margin-top: 20px;"><a href="/about"><%= t.pages.index.about.more %></a></p>
         </td>
     </tr>
     <tr>
@@ -43,7 +43,7 @@
     <tr>
         <td class="box">
             <p><%= TaginfoConfig.get('instance.description') %></p>
-            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="http://wiki.openstreetmap.org/wiki/Taginfo/Sites"><%= t.pages.index.international.see %></a></p>
+            <p class="emphasis" style="margin-top: 20px;"><a class="extlink" href="http://wiki.openstreetmap.org/wiki/Taginfo/Sites"><%= t.pages.index.international.see %></a></p>
         </td>
     </tr>
 </table>
diff --git a/web/views/key.erb b/web/views/key.erb
index 98e28e9..04874b1 100644
--- a/web/views/key.erb
+++ b/web/views/key.erb
@@ -3,8 +3,8 @@
         <% if @count_all_values < 1000 %>
             <%= xapi_link('*', @key) %> <%= josm_link('*', @key) %>
         <% else %>
-            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" width="14" height="10" alt=""/>XAPI</span>
-            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" width="14" height="10" alt=""/>JOSM</span>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key">XAPI</span>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key">JOSM</span>
         <% end %>
     </div>
     <form id="filter-form">
@@ -50,17 +50,17 @@
     <div id="map">
         <h2><%= t.pages.key.geographic_distribution.title %></h2>
         <% if @filter_type == 'all' %>
-            <div style="background-image: url(<%= TaginfoConfig.get('geodistribution.background_image') %>); background-repeat: no-repeat;"/>
-                <img src="/api/3/db/keys/distribution/nodes?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>" style="position: absolute;"/>
-                <img src="/api/3/db/keys/distribution/ways?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>"/>
+            <div style="background-image: url(<%= TaginfoConfig.get('geodistribution.background_image') %>); background-repeat: no-repeat; background-position: 1px 1px;"/>
+                <img class="map" src="/api/3/db/keys/distribution/nodes?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>" style="position: absolute;"/>
+                <img class="map" src="/api/3/db/keys/distribution/ways?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>"/>
             </div>
         <% elsif @filter_type == 'nodes' %>
-            <div style="background-image: url(<%= TaginfoConfig.get('geodistribution.background_image') %>); background-repeat: no-repeat;"/>
-                <img src="/api/3/db/keys/distribution/nodes?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>"/>
+            <div style="background-image: url(<%= TaginfoConfig.get('geodistribution.background_image') %>); background-repeat: no-repeat; background-position: 1px 1px;"/>
+                <img class="map" src="/api/3/db/keys/distribution/nodes?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>"/>
             </div>
         <% elsif @filter_type == 'ways' %>
-            <div style="background-image: url(<%= TaginfoConfig.get('geodistribution.background_image') %>); background-repeat: no-repeat;"/>
-                <img src="/api/3/db/keys/distribution/ways?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>"/>
+            <div style="background-image: url(<%= TaginfoConfig.get('geodistribution.background_image') %>); background-repeat: no-repeat; background-position: 1px 1px;"/>
+                <img class="map" src="/api/3/db/keys/distribution/ways?key=<%= @key_uri %>" alt="" width="<%= @img_width %>" height="<%= @img_height %>"/>
             </div>
         <% elsif @filter_type == 'relations' %>
             <p><i><%= t.pages.key.geographic_distribution.relations %></i></p>
diff --git a/web/views/layout.erb b/web/views/layout.erb
index cd6ce97..cf51ded 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -52,7 +52,7 @@
                 <a href="/sources"><%= t.taginfo.sources %></a> &middot;
                 <a href="/download"><%= t.taginfo.download %></a> &middot;
                 <a href="/about"><%= t.taginfo.about %></a> &middot;
-                <img src="/img/link-extern.gif" alt="" width="14" height="10"/><a href="http://wiki.openstreetmap.org/wiki/Taginfo"><%= t.taginfo.wiki %></a>
+                <a class="extlink" href="http://wiki.openstreetmap.org/wiki/Taginfo"><%= t.taginfo.wiki %></a>
             </div>
         </div>
     </body>
diff --git a/web/views/tag.erb b/web/views/tag.erb
index 5c750c4..6c2d8d6 100644
--- a/web/views/tag.erb
+++ b/web/views/tag.erb
@@ -3,8 +3,8 @@
         <% if @count_all < 1000 %>
             <%= xapi_link('*', @key, @value) %> <%= josm_link('*', @key, @value) %>
         <% else %>
-            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" alt=""/>XAPI</span>
-            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" alt=""/>JOSM</span>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key">XAPI</span>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key">JOSM</span>
         <% end %>
     </div>
     <form id="filter-form">