Refactor view and css code around homepage links
authorTom MacWright <tom@macwright.org>
Wed, 5 Sep 2012 22:34:34 +0000 (18:34 -0400)
committerTom Hughes <tom@compton.nu>
Thu, 6 Sep 2012 19:28:23 +0000 (20:28 +0100)
This adds a new class to the body which we can use to do more styling
in CSS rather than erb-embedded Ruby. The only visual change is that
there's now a subtle transition for homepage links becoming active.

app/assets/javascripts/application.js
app/assets/stylesheets/common.css.scss
app/views/layouts/site.html.erb

index f337415c699344e09b74abcf6253223076f80bb7..0f0b2fa10c1420d1abb6c093e1c36f8a66dd824b 100644 (file)
@@ -58,11 +58,8 @@ function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,obj
       args[objtype] = objid;
     }
 
-    var classes = $(link).attr("class").split(" ");
-
-    $(classes).each(function (index, classname) {
-      if (match = classname.match(/^minzoom([0-9]+)$/)) {
-        var minzoom = match[1];
+    var minzoom = $(link).data("minzoom");
+    if (minzoom) {
         var name = link.id.replace(/anchor$/, "");
 
         $(link).off("click.minzoom");
@@ -75,8 +72,7 @@ function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,obj
           $(link).attr("title", I18n.t("javascripts.site." + name + "_disabled_tooltip"));
           $(link).addClass("disabled");
         }
-      }
-    });
+    }
 
     link.href = setArgs(link.href, args);
   });
index 43eea9ee0c359764a7aabc31cf6cb4d028b20203..5cef074e520d302584279fcecf1324b83875b36c 100644 (file)
@@ -322,9 +322,18 @@ h2 {
   padding: 5px 10px;
   text-decoration: none;
   color: #333;
-}
-
-#tabnav a:link.active, #tabnav a:visited.active {
+  -webkit-transition: color 200ms ease-in;
+  -moz-transition: color 200ms ease-in;
+  -o-transition: color 200ms ease-in;
+  transition: color 200ms ease-in;
+}
+
+body.site-index #tabnav a#viewanchor,
+body.site-edit #tabnav a#editanchor,
+body.changeset-list #tabnav a#historyanchor,
+body.site-export #tabnav a#exportanchor,
+#tabnav a:link.active,
+#tabnav a:visited.active {
   border-bottom: 1px solid #aaa;
   background: #9ed485;
   color: #000;
index b51191189a53d085dba8d2215497a494c938c8d5..7f55fb38b98a2a3322df0335093f4055b1acb3c8 100644 (file)
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale %>" lang="<%= I18n.locale %>" dir="<%= t'html.dir' %>">
   <%= render :partial => "layouts/head" %>
-  <body class="<%= params[:controller] %>">
+  <body class="<%= params[:controller] %> <%= params[:controller] %>-<%= params[:action] %>">
     <div id="small-title">
       <%= link_to(image_tag("osm_logo.png", :size => "16x16", :border => 0, :alt => t('layouts.logo.alt_text')), :controller => 'site', :action => 'index') %>
       <h1><%= t 'layouts.project_name.h1' %></h1>
     </div>
     <div id="content" class="<%= params[:controller] %>_<%= params[:action] %>">
       <%= render :partial => "layouts/flash", :locals => { :flash => flash } %>
-
       <%= yield %>
     </div>
-
     <div id='top-bar'>
       <span id="greeting">
          <% if @user and @user.id %>
          <% end %>
       </span>
       <ul id="tabnav">
-        <%
-        viewclass = 'geolink llz layers'
-        editclass = 'geolink llz object minzoom13 disabled'
-        historyclass = 'geolink bbox minzoom11'
-        exportclass = 'geolink llz layers'
-        viewclass += ' active' if params['controller'] == 'site' and params['action'] == 'index'
-        editclass += ' active' if params['controller'] == 'site' and params['action'] == 'edit'
-        historyclass += ' active' if params['controller'] == 'changeset' and params['action'] == 'list'
-        exportclass += ' active' if params['controller'] == 'site' and params['action'] == 'export'
-        %>
-        <li><%= link_to t('layouts.view'), {:controller => 'site', :action => 'index'}, {:id => 'viewanchor', :title => t('layouts.view_tooltip'), :class => viewclass} %></li>
-        <li><%= link_to h(t('layouts.edit')) + content_tag(:span, "▾", :class => "menuicon"), {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></li>
-        <li><%= link_to t('layouts.history'), {:controller => 'changeset', :action => 'list' }, {:id => 'historyanchor', :title => t('javascripts.site.history_tooltip'), :class => historyclass} %></li>
-        <li><%= link_to t('layouts.export'), {:controller => 'site', :action => 'export'}, {:id => 'exportanchor', :title => t('layouts.export_tooltip'), :class => exportclass} %></li>
+        <li><%= link_to t('layouts.view'), {
+          :controller => 'site',
+          :action => 'index'
+        }, {
+          :id => 'viewanchor',
+          :title => t('layouts.view_tooltip'),
+          :class => 'geolink llz layers'
+        } %></li>
+        <li><%= link_to h(t('layouts.edit')) + content_tag(:span, "▾", :class => "menuicon"), {
+          :controller => 'site',
+          :action => 'edit'
+        }, {
+          :id => 'editanchor',
+          :title => t('javascripts.site.edit_tooltip'),
+          :data => { :minzoom => 13 },
+          :class => 'geolink llz object disabled'
+        } %></li>
+        <li><%= link_to t('layouts.history'), {
+          :controller => 'changeset',
+          :action => 'list'
+        }, {
+          :id => 'historyanchor',
+          :data => { :minzoom => 11 },
+          :title => t('javascripts.site.history_tooltip'),
+          :class => 'geolink bbox'
+        } %></li>
+        <li><%= link_to t('layouts.export'), {
+          :controller => 'site',
+          :action => 'export'
+        }, {
+          :id => 'exportanchor',
+          :title => t('layouts.export_tooltip'),
+          :class => 'geolink llz layers'
+        } %></li>
       </ul>
     </div>
-
     <div id="editmenu" class="menu">
       <ul>
         <% Editors::ALL_EDITORS.each do |editor| %>
-          <li><%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")), {:controller => 'site', :action => 'edit', :editor => editor}, {:id => editor + 'anchor', :class => "geolink llz object"} %></li>
+          <li><%= link_to t('layouts.edit_with',
+            :editor => t("editor.#{editor}.description")), {
+            :controller => 'site',
+            :action => 'edit',
+            :editor => editor
+          }, {
+            :id => editor + 'anchor',
+            :class => "geolink llz object"
+          } %></li>
         <% end %>
         <%= yield :editmenu %>
       </ul>
     </div>
-
     <script type="text/javascript">
       createMenu("editanchor", "editmenu", "left");
     </script>
-
     <div id="left">
       <div id="logo">
-        <%= link_to(image_tag("osm_logo.png", :size => "120x120", :border => 0, :alt => t('layouts.logo.alt_text')), :controller => 'site', :action => 'index') %><br/>
+        <%= link_to(image_tag("osm_logo.png",
+          :size => "120x120",
+          :alt => t('layouts.logo.alt_text')),
+          :controller => 'site',
+          :action => 'index') %><br/>
         <h1><%= t 'layouts.project_name.h1' %></h1>
         <h2 class="nowrap"><%= t('layouts.tag_line') %></h2>
       </div>
-
       <%= yield :optionals %>
-
       <% unless @user %>
       <div class="sidebar-copy intro">
-        <p>
-          <%= t 'layouts.intro_1' %>
-        </p>
+        <p><%= t 'layouts.intro_1' %></p>
         <p>
         <%= t 'layouts.intro_2_html',
-                :download => link_to(t('layouts.intro_2_download'), "http://planet.openstreetmap.org/"),
-                :use => link_to(t('layouts.intro_2_use'), t('layouts.intro_2_use_url')),
-                :license => link_to(t('layouts.intro_2_license'),
-                                   url_for({:controller => 'site', :action => 'copyright'})),
-                :create_account => link_to(t('layouts.intro_2_create_account'),
-                                   url_for({:controller => 'user', :action => 'new'}))
+          :download => link_to(t('layouts.intro_2_download'), "http://planet.openstreetmap.org/"),
+          :use => link_to(t('layouts.intro_2_use'), t('layouts.intro_2_use_url')),
+          :license => link_to(t('layouts.intro_2_license'),
+            url_for({:controller => 'site', :action => 'copyright'})),
+          :create_account => link_to(t('layouts.intro_2_create_account'),
+            url_for({:controller => 'user', :action => 'new'}))
         %>
         </p>
       </div>
       <% end %>
-
       <% if STATUS == :database_offline or STATUS == :api_offline %>
       <div class="sidebar-alert">
         <p><%= t 'layouts.osm_offline' %></p>
         <p><%= t 'layouts.osm_read_only' %></p>
       </div>
       <% end %>
-
       <% if false %>
       <div class="sidebar-notice">
         <p><%= raw t 'layouts.donate', :link => "<a href=\"http://donate.openstreetmap.org/\">#{t('layouts.donate_link_text')}</a>" %></p>
       </div>
       <% end %>
-
       <div id="left_menu" class="left_menu">
         <ul>
           <li><%= t'layouts.help' %>
-              <ul>
-              <li><%= link_to(t('layouts.help_centre'), t('layouts.help_url'), :title => t('layouts.help_title')) %></li>
-              <li><%= link_to(t('layouts.documentation'), t('layouts.wiki_url'), :title => t('layouts.documentation_title')) %></li>
-              <li><%= link_to t('layouts.copyright'), {:controller => 'site', :action => 'copyright'} %></li>
-              </ul>
+            <ul>
+            <li><%= link_to(t('layouts.help_centre'), t('layouts.help_url'), :title => t('layouts.help_title')) %></li>
+            <li><%= link_to(t('layouts.documentation'), t('layouts.wiki_url'), :title => t('layouts.documentation_title')) %></li>
+            <li><%= link_to t('layouts.copyright'), {:controller => 'site', :action => 'copyright'} %></li>
+            </ul>
           </li>
           <li><%= t'layouts.community' %>
-              <ul>
-              <li><a href="http://blogs.openstreetmap.org/" title="<%= t 'layouts.community_blogs_title' %>"><%= t 'layouts.community_blogs' %></a></li>
-              <li><a href="http://www.osmfoundation.org" title="<%= t 'layouts.foundation_title' %>"><%= t 'layouts.foundation' %></a></li>
-              <li><%= link_to(t('layouts.user_diaries'), {
-                  :controller => 'diary_entry',
-                  :action => 'list',
-                  :display_name => nil
-              }, {
-                  :title => t('layouts.user_diaries_tooltip')
-              }) %></li>
-              </ul>
+            <ul>
+            <li><a href="http://blogs.openstreetmap.org/" title="<%= t 'layouts.community_blogs_title' %>"><%= t 'layouts.community_blogs' %></a></li>
+            <li><a href="http://www.osmfoundation.org" title="<%= t 'layouts.foundation_title' %>"><%= t 'layouts.foundation' %></a></li>
+            <li><%= link_to(t('layouts.user_diaries'), {
+              :controller => 'diary_entry',
+              :action => 'list',
+              :display_name => nil
+            }, {
+              :title => t('layouts.user_diaries_tooltip')
+            }) %></li>
+            </ul>
           </li>
-          <li><%= link_to t('layouts.gps_traces'), {:controller => 'trace', :action => 'list', :display_name => nil, :tag => nil, :page => nil}, {:id => 'traceanchor', :title => t('layouts.gps_traces_tooltip') } %></li>
+          <li><%= link_to t('layouts.gps_traces'), {
+            :controller => 'trace',
+            :action => 'list',
+            :display_name => nil,
+            :tag => nil,
+            :page => nil
+          }, {
+            :id => 'traceanchor',
+            :title => t('layouts.gps_traces_tooltip')
+          } %></li>
           <%= yield :left_menu %>
         </ul>
       </div>
-
       <div id="sotm">
-        <%= link_to image_tag("sotm.png", :alt => t('layouts.sotm2012'), :title => t('layouts.sotm2012'), :border => "0"), "http://stateofthemap.org/register-now/" %>
+        <%= link_to image_tag("sotm.png",
+          :alt => t('layouts.sotm2012'),
+          :title => t('layouts.sotm2012'),
+          :border => "0"), "http://stateofthemap.org/register-now/" %>
       </div>
-
       <div class="donate">
         <a href="http://donate.openstreetmap.org/" title="<%= h(t('layouts.make_a_donation.title')) %>"><%= h(t('layouts.make_a_donation.text')) %></a>
       </div>
       <div class='sidebar-copy'>
-          <p class='deemphasize'><%= t 'layouts.partners_html',
-              :ucl => link_to(t('layouts.partners_ucl'), "http://www.vr.ucl.ac.uk"),
-              :ic => link_to(t('layouts.partners_ic'), "http://www.imperial.ac.uk/"),
-              :bytemark => link_to(t('layouts.partners_bytemark'), "http://www.bytemark.co.uk"),
-              :partners => link_to(t('layouts.partners_partners'), t('layouts.partners_url')) %>
-          </p>
+        <p class='deemphasize'><%= t 'layouts.partners_html',
+          :ucl => link_to(t('layouts.partners_ucl'), "http://www.vr.ucl.ac.uk"),
+          :ic => link_to(t('layouts.partners_ic'), "http://www.imperial.ac.uk/"),
+          :bytemark => link_to(t('layouts.partners_bytemark'), "http://www.bytemark.co.uk"),
+          :partners => link_to(t('layouts.partners_partners'), t('layouts.partners_url')) %>
+        </p>
       </div>
     </div>
-
     <% if defined?(PIWIK_LOCATION) and defined?(PIWIK_SITE) -%>
     <noscript><p><img src="<%= request.protocol %><%= PIWIK_LOCATION %>/piwik.php?idsite=<%= PIWIK_SITE %>" style="border:0" alt="" /></p></noscript>
     <% end -%>