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 (file)
index 0000000..f422d70
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 (file)
index 0000000..f6c1209
--- /dev/null
+++ b/app/assets/images/sprite.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="300"
+   height="200"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   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">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="28.421709"
+     inkscape:cx="7.0037552"
+     inkscape:cy="187.29226"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2985"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-852.36218)">
+    <path
+       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"
+       d="m 8.4000012,852.36218 c -3.3137081,0 -5.9999994,2.68629 -5.9999994,6 0,3.31371 2.6862913,6 5.9999994,6 3.3137078,0 5.9999988,-2.68629 5.9999988,-6 0,-3.31371 -2.686291,-6 -5.9999988,-6 z m 0,2.4 c 1.9882248,0 3.5999988,1.61178 3.5999988,3.6 0,1.98822 -1.611774,3.6 -3.5999988,3.6 -1.9882249,0 -3.5999997,-1.61178 -3.5999997,-3.6 0,-1.98822 1.6117748,-3.6 3.5999997,-3.6 z"
+       id="path2987"
+       inkscape:connector-curvature="0" />
+    <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"
+       height="3"
+       x="679.2984"
+       y="-530.39673"
+       transform="matrix(-0.60876143,0.79335334,-0.79335334,-0.60876143,0,0)" />
+  </g>
+</svg>

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 35b1d3389dc3ca9ef8ea17617df23beacda6fd3e..17f512e98d8f68917e0c0a1c1fe2e9337932f27e 100644 (file)
--- 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 bbfebdbc1fc22aa8e4cc5ece6812be3e9789738a..aaa182b8f84eb1f296a3b0d0551aba671764ff75 100644 (file)
--- 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 439877669e5868de596cfb39be1f6841ac0e9926..c4cb08521c1e3583e995440902f038ee48d978d8 100644 (file)
--- 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 2c6752ab9d76f5e16d948bf4f6359227d928a428..1984f686c6a1e1a877bdc20f401ef16529290d58 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -66,7 +66,7 @@
       <%= yield :optionals %>
 
       <% unless @user %>
-      <div class="sidebar-copy">
+      <div class="sidebar-copy intro">
         <p>
           <%= t 'layouts.intro_1' %>
         </p>
@@ -130,7 +130,7 @@
         <a href="http://donate.openstreetmap.org/" title="<%= h(t('layouts.make_a_donation.title')) %>"><%= h(t('layouts.make_a_donation.text')) %></a>
       </div>
       <div class='sidebar-copy'>
-          <p><%= t 'layouts.partners_html',
+          <p class='deemphasize'><%= 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 f82f19d8429d803f46fc4110762cea69005b9010..9adc3dafe09c588f3a435c521e9c4d79e2dabeb2 100644 (file)
--- a/app/views/site/_search.html.erb
+++ b/app/views/site/_search.html.erb
@@ -43,18 +43,17 @@
 
 <% content_for :optionals do %>
   <div class="optionalbox">
-    <span class="whereami"><a href="javascript:describeLocation()" title="<%= t 'site.search.where_am_i_title' %>"><%= t 'site.search.where_am_i' %></a></span>
-    <h1><%= t 'site.search.search' %></h1>
     <div class="search_container">
     <div id="search_field">
     <%= 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 %>
     </div>
     </div>
-    <p class="search_help">
+    <p class='search_help deemphasize'>
       <%= raw(t 'site.search.search_help') %>
+      <span class="whereami"><a href="javascript:describeLocation()" title="<%= t 'site.search.where_am_i_title' %>"><%= t 'site.search.where_am_i' %></a></span>
     </p>
   </div>
 <% end %>