layout search form with button on right hand side

basically flips inverts the layout and targets the
button rather than the label.

Having the button on the right is a familiar pattern
from Google, Facebook, all the other search froms in alaveteli etc.

It would also be strange to have the button before the input for keyboard access.

relates to #2210

2 files changed, 10 insertions, 7 deletions

diff --git a/app/assets/stylesheets/responsive/_header_layout.scss b/app/assets/stylesheets/responsive/_header_layout.scss
index b3103e3a9..a1f4ab9de 100644
--- a/app/assets/stylesheets/responsive/_header_layout.scss
+++ b/app/assets/stylesheets/responsive/_header_layout.scss
@@ -131,25 +131,22 @@
   }
   form{
         @include grid-row;
-        padding-right: 1em;
+        padding: 1em 1em 0;
         @include lte-ie7 {
            display: inline;
         }
     }
     input{
         @include grid-column($columns:9);
-        margin:0;
+        margin-right:0;
         @include lte-ie7 {
           width: 10.063em;
         }
     }
-    label{
+    button[type="submit"]{
         @include prefix-postfix-base;
-        @include grid-column($columns:3,$float:left);
+        @include grid-column($columns:3,$float:right);
         border:none;
-        img{
-            max-width: 100%;
-        }
         @include lte-ie7 {
            width: 2.125em;
         }
diff --git a/app/assets/stylesheets/responsive/_header_style.scss b/app/assets/stylesheets/responsive/_header_style.scss
index 9008a73a7..ec1e8ea5c 100644
--- a/app/assets/stylesheets/responsive/_header_style.scss
+++ b/app/assets/stylesheets/responsive/_header_style.scss
@@ -2,3 +2,9 @@
 #navigation {
     border-bottom: 1px solid #e9e9e9;
 }
+
+#navigation_search {
+  button[type="submit"] {
+    background:image-url('/assets/search.png') transparent no-repeat center center;
+  }
+}