cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine header

Browse source
This commit is contained in:
John Firebaugh 2013-10-02 10:50:00 -07:00
parent daf55682f8
commit 2d9a083b36
3 changed files with 90 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

58
app/assets/stylesheets/common.css.scss
View file

@ -319,42 +319,55 @@ header {
float: left;
}
a, a:hover {
text-decoration: none;
}
img.logo {
width: 30px;
height: 30px;
width: 40px;
height: 40px;
vertical-align: middle;
}
h1 {
margin: 0;
border-right: $keyline;
a {
color: #000;
}
}
}
nav.primary {
> ul {
border: 1px solid darken($green, 20%);
$border: 1px solid darken($green, 20%);
border: $border;
border-radius: 4px;
> li {
border-right: $border;
&:last-child { border-right: 0; }
}
}
a.tab {
a.tab,
.dropdown-toggle {
display: inline-block;
font-weight: bold;
text-decoration: none;
color: $green;
padding: 5px 15px;
border-right: 1px solid darken($green, 20%);
}
.dropdown-toggle {
padding: 5px 10px;
}
#edit_tab a.tab {
border-right: 1px solid lighten($green, 20%);
}
.dropdown-toggle {
display: inline-block;
padding: 6px 10px 4px 10px;
}
.caret {
border-top-color: $green;
}
@ -392,10 +405,6 @@ nav.secondary {
position: absolute;
right: 0;
> ul {
margin-right: 10px;
}
> ul a,
.dropdown-toggle {
display: inline-block;
@ -405,21 +414,32 @@ nav.secondary {
padding: 5px 5px;
}
.dropdown {
border: 1px solid $grey;
.user-menu {
$border: 1px solid $grey;
border: $border;
border-radius: 4px;
margin-left: 10px;
> li {
border-right: $border;
&:last-child { border-right: 0; }
}
a {
padding: 5px 15px;
}
}
.caret {
border-top-color: $grey;
margin-top: 10px;
margin-right: 5px;
}
img.user_thumbnail_tiny {
border: 0;
vertical-align: top;
margin: 2px 0 0 3px;
margin-top: 2px;
border-radius: 2px 0 0 2px;
}

72
app/views/layouts/_header.html.erb
View file

@ -1,31 +1,33 @@
<header>
<h1>
<%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
<%= t 'layouts.project_name.h1' %>
<a href="<% root_path %>" class="geolink llz layers">
<%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
<%= t 'layouts.project_name.h1' %>
</a>
</h1>
<nav class='primary'>
<ul>
<li id="view_tab">
<%= link_to t('layouts.view'), root_path, :class => 'tab geolink llz layers' %>
</li><li id="edit_tab" class="dropdown">
<%= link_to t('layouts.edit'), edit_path, :class => "tab geolink llz object",
:id => 'editanchor',
:data => { :editor => preferred_editor }
%><a class='dropdown-toggle' data-toggle='dropdown' href='#'><b class="caret"></b></a>
<ul class='dropdown-menu'>
<% Editors::RECOMMENDED_EDITORS.each do |editor| %>
<li>
<%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
edit_path(:editor => editor),
:data => { :editor => editor },
:class => "geolink llz object" %>
</li>
<% end %>
</ul>
</li><li id="history_tab">
<%= link_to t('layouts.history'), browse_changesets_path, :class => 'tab geolink llz' %>
</li><li id="export_tab">
<%= link_to t('layouts.export'), export_path, :class => 'tab geolink llz' %>
</li><li id="edit_tab" class="dropdown">
<%= link_to t('layouts.edit'), edit_path, :class => "tab geolink llz object",
:id => 'editanchor',
:data => { :editor => preferred_editor }
%><a class='dropdown-toggle' data-toggle='dropdown' href='#'><b class="caret"></b></a>
<ul class='dropdown-menu'>
<% Editors::RECOMMENDED_EDITORS.each do |editor| %>
<li>
<%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
edit_path(:editor => editor),
:data => { :editor => editor },
:class => "geolink llz object" %>
</li>
<% end %>
</ul>
</li>
</ul>
</nav>
@ -37,11 +39,39 @@
<li><%= link_to t('layouts.about'), about_path %></li>
</ul>
<% if @user %>
<%= render :partial => "layouts/user_menu" %>
<div class='dropdown user-menu'>
<a class='dropdown-toggle' data-toggle='dropdown' href="#">
<%= user_thumbnail_tiny(@user, :size => 20, :width => 20, :height => 20)
%><%= render :partial => 'layouts/inbox'
%><span class='username'><%= @user.display_name %></span>
<b class="caret"></b>
</a>
<ul class='dropdown-menu'>
<li>
<%= link_to inbox_path(:display_name => @user.display_name) do %>
<span class='count-number'><%= number_with_delimiter(@user.new_messages.size) %></span>
<%= t('message.inbox.my_inbox') %>
<% end %>
</li>
<li>
<%= link_to t('user.view.my profile'), user_path(:display_name => @user.display_name) %>
</li>
<li>
<%= link_to t('user.view.my settings'), :controller => 'user', :action => 'account', :display_name => @user.display_name %>
</li>
<li class="divider"></li>
<li>
<%= yield :greeting %>
</li>
<li>
<%= link_to t('layouts.logout'), logout_path(:session => request.session_options[:id], :referer => request.fullpath) %>
</li>
</ul>
</div>
<% else %>
<ul class="secondary-actions">
<li><%= link_to t('layouts.log_in'), login_path(:referer => request.fullpath), {:id => 'loginanchor', :title => t('layouts.log_in_tooltip')} %></li>
<li><%= link_to t('layouts.sign_up'), user_new_path, {:id => 'registeranchor', :title => t('layouts.sign_up_tooltip')} %></li>
<ul class="user-menu">
<li><%= link_to t('layouts.log_in'), login_path(:referer => request.fullpath) %></li>
<li><%= link_to t('layouts.sign_up'), user_new_path %></li>
</ul>
<% end %>
</nav>

29
app/views/layouts/_user_menu.html.erb
View file

@ -1,29 +0,0 @@
<div class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href="#">
<%= user_thumbnail_tiny(@user, :size => 20, :width => 20, :height => 20)
%><%= render :partial => 'layouts/inbox'
%><span class='username'><%= @user.display_name %></span>
<b class="caret"></b>
</a>
<ul class='dropdown-menu'>
<li>
<%= link_to inbox_path(:display_name => @user.display_name) do %>
<span class='count-number'><%= number_with_delimiter(@user.new_messages.size) %></span>
<%= t('message.inbox.my_inbox') %>
<% end %>
</li>
<li>
<%= link_to t('user.view.my profile'), user_path(:display_name => @user.display_name) %>
</li>
<li>
<%= link_to t('user.view.my settings'), :controller => 'user', :action => 'account', :display_name => @user.display_name %>
</li>
<li class="divider"></li>
<li>
<%= yield :greeting %>
</li>
<li>
<%= link_to t('layouts.logout'), logout_path(:session => request.session_options[:id], :referer => request.fullpath) %>
</li>
</ul>
</div>