Minor style overhaul to sidebar
A number of small usability improvements / fixes, including: * Small inconsistencies in spacing fixed * Links now visually differentiated from headings in the menu * Search bar actually looks right (or at least not as broken) in IE7 now * New heart on the donate button + larger click area on the donate button!
This commit is contained in:
Saman Bemel-Benrud
Tom Hughes
parent
6c2bca73c1
commit
2e2ebbf959
5 changed files with 103 additions and 58 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 445 B |
|
|
@ -17,7 +17,7 @@
|
|||
inkscape:export-filename="/Users/tmcw/src/openstreetmap-website/app/assets/images/sprite.png"
|
||||
inkscape:export-xdpi="90"
|
||||
inkscape:export-ydpi="90"
|
||||
sodipodi:docname="New document 1">
|
||||
sodipodi:docname="sprite.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
|
|
@ -27,12 +27,17 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="28.421709"
|
||||
inkscape:cx="7.0037552"
|
||||
inkscape:cy="187.29226"
|
||||
inkscape:zoom="8"
|
||||
inkscape:cx="9.2822526"
|
||||
inkscape:cy="168.88141"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true">
|
||||
showgrid="true"
|
||||
inkscape:window-width="1289"
|
||||
inkscape:window-height="904"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid2985"
|
||||
|
|
@ -66,10 +71,28 @@
|
|||
<rect
|
||||
style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.55720866px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
|
||||
id="rect3033"
|
||||
width="7"
|
||||
width="6.3023868"
|
||||
height="3"
|
||||
x="679.2984"
|
||||
x="679.99603"
|
||||
y="-530.39673"
|
||||
transform="matrix(-0.60876143,0.79335334,-0.79335334,-0.60876143,0,0)" />
|
||||
<path
|
||||
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
|
||||
d="m 1,35 c 0,-1.827643 1,-4 3.75,-4 1.8276427,0 2.75,2 2.75,2 0,0 0.9223573,-2 2.75,-2 C 13,31 14,33.172357 14,35 14,40 7.5,43 7.5,43 7.5,43 1,40 1,35 z"
|
||||
id="path3843"
|
||||
inkscape:connector-curvature="0"
|
||||
transform="translate(0,852.36218)"
|
||||
sodipodi:nodetypes="sscsscs" />
|
||||
<rect
|
||||
style="color:#000000;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
|
||||
id="rect3845"
|
||||
width="15"
|
||||
height="45"
|
||||
x="0"
|
||||
y="0"
|
||||
transform="translate(0,852.36218)"
|
||||
inkscape:export-filename="/Users/saman/work_repos/openstreetmap-website/app/assets/images/sprite.png"
|
||||
inkscape:export-xdpi="90"
|
||||
inkscape:export-ydpi="90" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.9 KiB |
|
|
@ -57,11 +57,12 @@ h2 {
|
|||
/* Rules for the OpenStreetMap logo in the top left corner */
|
||||
|
||||
#logo {
|
||||
display: block;
|
||||
width: 170px;
|
||||
min-width: 170px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
margin: 25px 0 5px 0;
|
||||
margin: 25px auto 5px auto;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
|
|
@ -94,7 +95,7 @@ h2 {
|
|||
/* Rules for the introductory text displayed in the left sidebar to new users */
|
||||
|
||||
.sidebar-copy {
|
||||
padding: 0px 10px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.sidebar-copy p {
|
||||
|
|
@ -150,38 +151,34 @@ h2 {
|
|||
/* Rules for the menu displayed in the left sidebar */
|
||||
|
||||
.left_menu {
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
margin: 4px 0;
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
list-style-type: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.left_menu h1 {
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.left_menu ul {
|
||||
margin: 0px;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left_menu li {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* submenus */
|
||||
.left_menu ul li ul {
|
||||
font-weight: normal;
|
||||
line-height: 15px;
|
||||
.left_menu h4 {
|
||||
padding: 5px 0 5px 0;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left_menu a {
|
||||
color: #000;
|
||||
.left_menu li:last-child h4 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Rules for SOTM advert */
|
||||
|
|
@ -206,7 +203,7 @@ h2 {
|
|||
|
||||
.optionalbox {
|
||||
padding: 5px 10px;
|
||||
margin: 4px 0;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.optionalbox h1 {
|
||||
|
|
@ -223,7 +220,7 @@ h2 {
|
|||
}
|
||||
|
||||
#search_field form {
|
||||
width: 100%;
|
||||
width: 165px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -234,7 +231,7 @@ h2 {
|
|||
|
||||
#search_field input[type="text"] {
|
||||
width: 165px;
|
||||
padding: 5px;
|
||||
padding: 2px 0 2px 5px;
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
height: 25px;
|
||||
|
|
@ -255,17 +252,19 @@ h2 {
|
|||
height: 15px;
|
||||
border:0;
|
||||
text-indent:-1000px;
|
||||
overflow: hidden;
|
||||
text-transform: capitalize;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: url(sprite.png);
|
||||
position:absolute;
|
||||
right:2px;
|
||||
right:4px;
|
||||
top:5px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.search_help {
|
||||
margin:0;
|
||||
margin:5px 0 0 0;
|
||||
}
|
||||
|
||||
.deemphasize {
|
||||
|
|
@ -279,8 +278,10 @@ h2 {
|
|||
/* Rules for donation request box */
|
||||
|
||||
.donate {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 153px;
|
||||
margin: 10px 10px;
|
||||
margin: 10px 10px 0px 10px;
|
||||
padding: 5px;
|
||||
border: 1px solid #AED1A0;
|
||||
background: #cbeea7;
|
||||
|
|
@ -289,10 +290,29 @@ h2 {
|
|||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.donate a {
|
||||
color:#222;
|
||||
.donate:hover {
|
||||
background: #9ed485;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.donate p {
|
||||
text-indent: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.donate .donate-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: url(sprite.png) 0 -30px no-repeat;
|
||||
position: absolute;
|
||||
left: 17px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* Rules for Creative Commons logo button */
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
<div id='top-bar'>
|
||||
<span id="greeting">
|
||||
<% if @user and @user.id %>
|
||||
<span id="full-greeting"><%= raw(t 'layouts.welcome_user', :user_link => (link_to h(@user.display_name), user_path(:display_name => @user.display_name), :title => t('layouts.welcome_user_link_tooltip'))) %></span>
|
||||
<span id="small-greeting"><%= link_to t('layouts.welcome_user_link_tooltip'), user_path(:display_name => @user.display_name) %></span> |
|
||||
<span id="full-greeting"><%= raw(t 'layouts.welcome_user', :user_link => (link_to h(@user.display_name), user_path(:display_name => @user.display_name), :title => t('layouts.welcome_user_link_tooltip'))) %></span>
|
||||
<span id="small-greeting"><%= link_to t('layouts.welcome_user_link_tooltip'), user_path(:display_name => @user.display_name) %></span> |
|
||||
<%= yield :greeting %>
|
||||
<%= render :partial => "layouts/inbox" %> |
|
||||
<%= link_to t('layouts.logout'), logout_path(:session => request.session_options[:id], :referer => request.fullpath), {:id => 'logoutanchor', :title => t('layouts.logout_tooltip')}%>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
<%= link_to(image_tag("osm_logo.png",
|
||||
:size => "120x120",
|
||||
:alt => t('layouts.logo.alt_text')),
|
||||
root_path) %><br/>
|
||||
root_path) %>
|
||||
<h1><%= t 'layouts.project_name.h1' %></h1>
|
||||
<h2 class="nowrap"><%= t('layouts.tag_line') %></h2>
|
||||
</div>
|
||||
|
|
@ -102,34 +102,36 @@
|
|||
<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>
|
||||
<ul id="left_menu" class="left_menu">
|
||||
<li>
|
||||
<h4><%= t'layouts.help' %></h4>
|
||||
<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'), copyright_path %></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><%= t'layouts.community' %>
|
||||
<ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h4><%= t'layouts.community' %></h4>
|
||||
<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'), diary_path, {
|
||||
:title => t('layouts.user_diaries_tooltip')
|
||||
}) %></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><%= link_to t('layouts.gps_traces'), traces_path, {
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h4><%= link_to t('layouts.gps_traces'), traces_path, {
|
||||
:id => 'traceanchor',
|
||||
:title => t('layouts.gps_traces_tooltip')
|
||||
} %></li>
|
||||
<%= yield :left_menu %>
|
||||
</ul>
|
||||
</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>
|
||||
} %></h4>
|
||||
</li>
|
||||
<%= yield :left_menu %>
|
||||
</ul>
|
||||
<a title="<%= h(t('layouts.make_a_donation.title')) %>" href="http://donate.openstreetmap.org/" class="donate">
|
||||
<span class='donate-icon'></span><p><%= h(t('layouts.make_a_donation.text')) %></p>
|
||||
</a>
|
||||
<div class='sidebar-copy'>
|
||||
<p class='deemphasize'><%= t 'layouts.partners_html',
|
||||
:ucl => link_to(t('layouts.partners_ucl'), "http://www.vr.ucl.ac.uk"),
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<% end -%>
|
||||
|
||||
<% content_for :left_menu do %>
|
||||
<li><%= link_to t("site.key.map_key"), {:action => :key}, :id => "open_map_key", :title => t("site.key.map_key_tooltip") %></li>
|
||||
<li><h4><%= link_to t("site.key.map_key"), {:action => :key}, :id => "open_map_key", :title => t("site.key.map_key_tooltip") %></h4></li>
|
||||
<% end %>
|
||||
|
||||
<%= render :partial => 'home_link' %>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue