From f436a5cd2ba7f1e86c73fab06eae2e8da188f79f Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 7 Aug 2012 19:16:52 -0400 Subject: [PATCH] Improve presentation of homepage Collapse search button into icon, deemphasize copy and remove extraneous borders. --- app/assets/images/sprite.png | Bin 0 -> 1276 bytes app/assets/images/sprite.svg | 75 +++++++++++++++++++++++++ app/assets/stylesheets/common.css.scss | 67 +++++++++++++++++----- app/assets/stylesheets/ltr.css.scss | 6 -- app/assets/stylesheets/rtl.css.scss | 6 -- app/views/layouts/site.html.erb | 4 +- app/views/site/_search.html.erb | 7 +-- 7 files changed, 132 insertions(+), 33 deletions(-) create mode 100644 app/assets/images/sprite.png create mode 100644 app/assets/images/sprite.svg diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..f422d70c4f1008dc3d65c268f16ccbb53482fab7 GIT binary patch literal 1276 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!PjIjS$)NjpLV*-Zv6E*A2N2Y7q;vrJoCO|{ z#X$AfL734=V|E2lP_o1|q9iy!t)x7$D3zhSyj(9cFS|H7u^?41zbJk7I~ysWL6x2^ zjv*Cu-rljzc;YH^{Neq2^9~^azN5#yHrR^n_0rKf8pN_uWKs^tk_`emZ&?nCByG}f zdCTJHy_Qefaf`)$ExIM>-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 + + + + + + + + + + + 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 %> -- 2.43.2