From: Tom MacWright Date: Tue, 7 Aug 2012 23:16:52 +0000 (-0400) Subject: Improve presentation of homepage X-Git-Tag: live~5451 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/f436a5cd2ba7f1e86c73fab06eae2e8da188f79f Improve presentation of homepage Collapse search button into icon, deemphasize copy and remove extraneous borders. --- diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png new file mode 100644 index 000000000..f422d70c4 Binary files /dev/null and b/app/assets/images/sprite.png differ diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg new file mode 100644 index 000000000..f6c1209ef --- /dev/null +++ b/app/assets/images/sprite.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 35b1d3389..17f512e98 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -86,12 +86,16 @@ h2 { /* Rules for the introductory text displayed in the left sidebar to new users */ .sidebar-copy { - border-top: 1px solid #ccc; - padding: 0px 5px; + padding: 0px 10px; } .sidebar-copy p { - margin: 5px; + margin: 5px 0; +} + +.sidebar-copy.intro { + margin-top: -1px; + border-top: 1px solid #ccc; } /* @@ -141,7 +145,6 @@ h2 { padding: 5px 10px; margin: 4px 0; border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; line-height: 20px; font-size: 14px; font-weight: bold; @@ -193,7 +196,6 @@ h2 { .optionalbox { padding: 5px 10px; margin: 4px 0; - border-top: 1px solid #ccc; } .optionalbox h1 { @@ -207,8 +209,6 @@ h2 { /* Rules for the search box */ .whereami { - line-height: 20px; - vertical-align: bottom; } #search_field form { @@ -217,19 +217,52 @@ h2 { padding: 0px; } +#search_field { + position:relative; +} + #search_field input[type="text"] { - width: 130px; + width: 165px; + padding: 5px; + font-size: 14px; + line-height: 15px; + height: 25px; + box-shadow: inset #DDD 0px 1px 3px; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; +} + +#search_field input[type="text"]:focus { + outline: none; + border: 1px solid #000; } #search_field input[type="submit"] { - width: 26px; + width: 15px; + height: 15px; + border:0; + text-indent:-1000px; padding-left: 0px; padding-right: 0px; + background: url(sprite.png); + position:absolute; + right:2px; + top:5px; + cursor:pointer; } .search_help { - margin-top: 2px; - margin-bottom: 0px; + margin:0; +} + +.deemphasize { + color: #999; +} + +.deemphasize a { + color: #7092FF; } /* Rules for donation request box */ @@ -238,13 +271,17 @@ h2 { width: 153px; margin: 10px 10px; padding: 5px; - border: 1px solid #ccc; + border: 1px solid #AED1A0; background: #cbeea7; line-height: 20px; text-align: center; font-size: 14px; - border-radius: 5px; - -moz-border-radius: 5px; + border-radius: 2px; + -moz-border-radius: 2px; +} + +.donate a { + color:#222; } /* Rules for Creative Commons logo button */ @@ -1016,7 +1053,7 @@ input[type="email"], input[type="url"], input[type="password"], textarea { - border: 1px solid #888; + border: 1px solid #ccc; } /* Rules for user images */ diff --git a/app/assets/stylesheets/ltr.css.scss b/app/assets/stylesheets/ltr.css.scss index bbfebdbc1..aaa182b8f 100644 --- a/app/assets/stylesheets/ltr.css.scss +++ b/app/assets/stylesheets/ltr.css.scss @@ -40,12 +40,6 @@ html body { text-align: left; } -/* Rules for the search box */ - -.whereami { - float: right; -} - /* Rules for tabbed navigation bar */ #top-bar { diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss index 439877669..c4cb08521 100644 --- a/app/assets/stylesheets/rtl.css.scss +++ b/app/assets/stylesheets/rtl.css.scss @@ -40,12 +40,6 @@ html body { text-align: right; } -/* Rules for the search box */ - -.whereami { - float: left; -} - /* Rules for tabbed navigation bar */ #top-bar { diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb index 2c6752ab9..1984f686c 100644 --- a/app/views/layouts/site.html.erb +++ b/app/views/layouts/site.html.erb @@ -66,7 +66,7 @@ <%= yield :optionals %> <% unless @user %> -
+

<%= t 'layouts.intro_1' %>

@@ -130,7 +130,7 @@ <%= h(t('layouts.make_a_donation.text')) %>
-

<%= t 'layouts.partners_html', +

<%= t 'layouts.partners_html', :ucl => link_to(t('layouts.partners_ucl'), "http://www.vr.ucl.ac.uk"), :ic => link_to(t('layouts.partners_ic'), "http://www.imperial.ac.uk/"), :bytemark => link_to(t('layouts.partners_bytemark'), "http://www.bytemark.co.uk"), diff --git a/app/views/site/_search.html.erb b/app/views/site/_search.html.erb index f82f19d84..9adc3dafe 100644 --- a/app/views/site/_search.html.erb +++ b/app/views/site/_search.html.erb @@ -43,18 +43,17 @@ <% content_for :optionals do %>

- <%= t 'site.search.where_am_i' %> -

<%= t 'site.search.search' %>

<%= form_tag "#", :id => "search_form" do %> - <%= text_field_tag :query, h(params[:query]), :tabindex => "1" %> <%= submit_tag t('site.search.submit_text') %> + <%= text_field_tag :query, h(params[:query]), :tabindex => "1", :placeholder => t('site.search.search') %> <% end %>
-

+

<%= raw(t 'site.search.search_help') %> + <%= t 'site.search.where_am_i' %>

<% end %>