Refactor view and css code around homepage links
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.
This commit is contained in:
Tom MacWright
Tom Hughes
parent
7c0055b5d7
commit
02de53eb45
3 changed files with 105 additions and 71 deletions
|
|
@ -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");
|
||||
|
|
@ -76,7 +73,6 @@ function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,obj
|
|||
$(link).addClass("disabled");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
link.href = setArgs(link.href, args);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -322,9 +322,18 @@ h2 {
|
|||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
-webkit-transition: color 200ms ease-in;
|
||||
-moz-transition: color 200ms ease-in;
|
||||
-o-transition: color 200ms ease-in;
|
||||
transition: color 200ms ease-in;
|
||||
}
|
||||
|
||||
#tabnav a:link.active, #tabnav a:visited.active {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
@ -26,50 +24,75 @@
|
|||
<% 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/"),
|
||||
|
|
@ -82,7 +105,6 @@
|
|||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if STATUS == :database_offline or STATUS == :api_offline %>
|
||||
<div class="sidebar-alert">
|
||||
<p><%= t 'layouts.osm_offline' %></p>
|
||||
|
|
@ -92,13 +114,11 @@
|
|||
<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' %>
|
||||
|
|
@ -121,15 +141,25 @@
|
|||
}) %></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>
|
||||
|
|
@ -142,7 +172,6 @@
|
|||
</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 -%>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue