From 3911139b17a63efcc4be74a49e508e907b1b452d Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Thu, 27 Aug 2015 08:34:13 +0930
Subject: [PATCH] Collapse search input on tablets. closes flarum/core#162

While this solution isn't perfect (perhaps a search icon which opens a
dropdown would be better, like Discourse does) - it'll do for now :)
---
 framework/core/js/forum/src/components/Search.js |  1 +
 framework/core/less/lib/App.less                 | 12 ++++++++++++
 framework/core/less/lib/Search.less              | 13 ++++++++-----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/framework/core/js/forum/src/components/Search.js b/framework/core/js/forum/src/components/Search.js
index b4dc07596..afc1cf91c 100644
--- a/framework/core/js/forum/src/components/Search.js
+++ b/framework/core/js/forum/src/components/Search.js
@@ -77,6 +77,7 @@ export default class Search extends Component {
     return (
       <div className={'Search ' + classList({
         open: this.value() && this.hasFocus,
+        focused: this.hasFocus,
         active: !!currentSearch,
         loading: !!this.loadingSources
       })}>
diff --git a/framework/core/less/lib/App.less b/framework/core/less/lib/App.less
index f49cb630c..9148271de 100755
--- a/framework/core/less/lib/App.less
+++ b/framework/core/less/lib/App.less
@@ -266,6 +266,18 @@
   }
 }
 
+@media @tablet {
+  .Header-secondary .Search {
+    input {
+      width: 1px;
+      background: transparent;
+    }
+    &:not(.active) input {
+      padding-right: 0;
+    }
+  }
+}
+
 // ------------------------------------
 // Content Area
 
diff --git a/framework/core/less/lib/Search.less b/framework/core/less/lib/Search.less
index bbb90e034..ccad7be8c 100755
--- a/framework/core/less/lib/Search.less
+++ b/framework/core/less/lib/Search.less
@@ -2,8 +2,11 @@
   position: relative;
 }
 @media @tablet-up {
-  .Search {
-    input:focus, &.active input, .Search-results {
+  .Search.focused {
+    margin-left: -400px;
+    .transition(all 0.4s);
+
+    input, .Search-results {
       width: 400px;
     }
   }
@@ -51,9 +54,9 @@
   input {
     float: left;
     width: 225px;
-    padding-left: 36px;
-    padding-right: 36px;
-    .transition(~"all 0.4s");
+    padding-left: 32px;
+    padding-right: 32px;
+    .transition(all 0.4s);
   }
   .Button {
     float: left;