From: Saman Bemel-Benrud Date: Wed, 24 Oct 2012 22:47:03 +0000 (-0400) Subject: Minor style overhaul to sidebar X-Git-Tag: live~5240 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/2e2ebbf959b14dee40ee1522a2fbbed23156488c 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 f422d70c4..d13dbaa8f 100644 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 f6c1209ef..a70a7532b 100644 --- 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"> + showgrid="true" + inkscape:window-width="1289" + inkscape:window-height="904" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="0"> + + diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 8b334a3e4..5762d7251 100644 --- 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 383941685..cee35efb6 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -13,8 +13,8 @@
<% if @user and @user.id %> - <%= 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'))) %> - <%= link_to t('layouts.welcome_user_link_tooltip'), user_path(:display_name => @user.display_name) %> | + <%= 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'))) %> + <%= link_to t('layouts.welcome_user_link_tooltip'), user_path(:display_name => @user.display_name) %> | <%= 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) %>
+ root_path) %>

<%= t 'layouts.project_name.h1' %>

<%= t('layouts.tag_line') %>

@@ -102,34 +102,36 @@

<%= raw t 'layouts.donate', :link => "#{t('layouts.donate_link_text')}" %>

<% end %> -
-
    -
  • <%= t'layouts.help' %> -
      +
        +
      • +

        <%= t'layouts.help' %>

        +
        • <%= link_to(t('layouts.help_centre'), t('layouts.help_url'), :title => t('layouts.help_title')) %>
        • <%= link_to(t('layouts.documentation'), t('layouts.wiki_url'), :title => t('layouts.documentation_title')) %>
        • <%= link_to t('layouts.copyright'), copyright_path %>
          • -
        -
        • -
      • <%= t'layouts.community' %> -
          +
        +
        • +
      • +

        <%= t'layouts.community' %>

        + -
        • -
      • <%= link_to t('layouts.gps_traces'), traces_path, { +
      + +
    • +

      <%= link_to t('layouts.gps_traces'), traces_path, { :id => 'traceanchor', :title => t('layouts.gps_traces_tooltip') - } %>

      • - <%= yield :left_menu %> -
    -
- + } %> + + <%= yield :left_menu %> + +

<%= 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 b65aa2ffa..43485b27f 100644 --- a/app/views/site/index.html.erb +++ b/app/views/site/index.html.erb @@ -9,7 +9,7 @@ <% end -%> <% content_for :left_menu do %> -

  • <%= link_to t("site.key.map_key"), {:action => :key}, :id => "open_map_key", :title => t("site.key.map_key_tooltip") %>
    • +

  • <%= link_to t("site.key.map_key"), {:action => :key}, :id => "open_map_key", :title => t("site.key.map_key_tooltip") %>

    • <% end %> <%= render :partial => 'home_link' %>