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!

diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png
index f422d70c4f1008dc3d65c268f16ccbb53482fab7..d13dbaa8f3af70f0d8a6cd770192b6f473885bdc 100644 (file)
Binary files a/app/assets/images/sprite.png and b/app/assets/images/sprite.png differ

diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg
index f6c1209efecd1628820ef151abe2d3557aa52b56..a70a7532b87b2b62f3f64dcc877fbc1a8b55917b 100644 (file)
--- a/app/assets/images/sprite.svg
+++ b/app/assets/images/sprite.svg
@@ -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>

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 8b334a3e46327cb3ca79fee4c07ce0e29d5f1d6b..5762d725178f6633a42127fdb57224d179fddbcd 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -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 */

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index 3839416859f227457b82f0686ae83c5668ad958d..cee35efb6b045da73aa44197469a20948ef3c456 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -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"),

diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb
index b65aa2ffa8c5055f6a8e7bdba4903bd770719939..43485b27f2434ab1f9a59496bdd46fef616d1156 100644 (file)
--- a/app/views/site/index.html.erb
+++ b/app/views/site/index.html.erb
@@ -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' %>