From 2e2ebbf959b14dee40ee1522a2fbbed23156488c Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 24 Oct 2012 18:47:03 -0400 Subject: [PATCH] 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! --- app/assets/images/sprite.png | Bin 1276 -> 445 bytes app/assets/images/sprite.svg | 37 +++++++++--- app/assets/stylesheets/common.css.scss | 78 ++++++++++++++++--------- app/views/layouts/site.html.erb | 44 +++++++------- app/views/site/index.html.erb | 2 +- 5 files changed, 103 insertions(+), 58 deletions(-) diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png index f422d70c4f1008dc3d65c268f16ccbb53482fab7..d13dbaa8f3af70f0d8a6cd770192b6f473885bdc 100644 GIT binary patch literal 445 zcmV;u0Yd(XP)fcSX~2MQAdbbMn@dqCI=OU| z)*xM^S+4(qn{uMT+|WfK!_OuE`M-M)_ny>*5I+a`?)X*hdc;*&>3{iHcY}WT+hIs=PjTxl7UCpbr<=@?RI+uek|*~3=Cr@J+;+p zZ8DH|cEU0ZzVn4Fym5ewE-ZzS-<=7bvF-c|dse+LzVj`6s@f;bybB zWtwIOilLrmS=;2(O5f7&P%dRSm_UMQ0{@8CZ+=4gDJ)MECDh??ToR5sJS+(hIovG? zclm{#mVqfhg$=`~!|W@xIM>-c<4ESq_E-PW+@ zy~iKF4*ePxY8xBcAA0qB=-1THy<4|#{rWmKpCO|0UCoALk3UL>eoYI#TYm7@?X_DE zCK&uE5S`6z@jCvXRIl6mlGyM6imG<6vRkog{;F41p?hP>mA;j)zrK6p#*H8Et}^HT zvw!Ve9zH(4bzgt~EuVflKYjDf&(_w~`{(Ylo9S~eb8T%@=ykE~qg&q9#IQunymxZJ z{rC34q5Pqtx?$YuW#TGJl + 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' %> -- 2.39.5