FIX: add clearContext, general cleanup (#25)

common/common.scss

@@ -28,7 +28,7 @@ $max-width: 600px;
   padding: 2.5em 0 3em;
   margin: 1em auto;
   @include breakpoint(tablet) {
-    padding: 1em 8px 2em;
+    padding: 1em 8px 1.25em;
     margin-top: 0.5em;
   }
 
@@ -40,6 +40,10 @@ $max-width: 600px;
   .search-menu {
     position: relative;
     display: flex;
+    flex-wrap: wrap;
+    .browser-search-tip {
+      display: none;
+    }
     input[type="text"] {
       margin: 0;
       width: 100%;
@@ -53,7 +57,7 @@ $max-width: 600px;
     padding: 0;
     .searching {
       // spinner
-      top: 0.5em;
+      top: 0.4em;
       right: 2.25em;
     }
   }
@@ -76,7 +80,6 @@ $max-width: 600px;
     z-index: 2;
     order: 2;
     right: 0;
-    height: 100%;
     background: transparent;
     .discourse-no-touch & {
       &:hover {
@@ -88,22 +91,8 @@ $max-width: 600px;
     }
   }
 
-  .search-context,
-  .results {
-    margin: 0 auto;
-    max-width: $max-width;
-  }
-
-  .search-context {
-    position: absolute;
-    z-index: 10;
-    right: 0;
-    top: 2.67em;
-    display: inline-flex;
-    align-items: center;
-    label {
-      margin-right: 1em;
-    }
+  .search-input .btn.search-context {
+    margin: 0;
   }
 
   .results {
@@ -111,7 +100,6 @@ $max-width: 600px;
     background: var(--secondary);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
     position: absolute;
-    width: $max-width;
     z-index: 9;
     margin-left: auto;
     margin-right: auto;

javascripts/discourse/api-initializers/init-search-banner.js

@@ -82,6 +82,26 @@ export default apiInitializer("0.8", (api) => {
       }
     },
 
+    focusSearchInput() {
+      const searchInput =
+        this.state.formFactor === "widget"
+          ? document.querySelector(".search-widget #search-term")
+          : document.querySelector(".search-menu #search-term");
+
+      searchInput.focus();
+      searchInput.select();
+    },
+
+    clearContext() {
+      this.sendWidgetAction("clearSearch");
+      this.sendWidgetAction("clearSearchWidgetContext");
+      this.state.inTopicContext = false;
+    },
+
+    clearSearchWidgetContext() {
+      this.state.inTopicContext = false;
+    },
+
     panelContents() {
       const formFactor = this.state.formFactor;
       let showHeaderResults =
@@ -100,12 +120,6 @@ export default apiInitializer("0.8", (api) => {
       }
 
       contents = contents.concat(...corePanelContents.call(this));
-      let results = contents.find((w) => w.name === "search-menu-results");
-      if (results && results.attrs.results) {
-        $(".search-menu.search-header").addClass("has-results");
-      } else {
-        $(".search-menu.search-header").removeClass("has-results");
-      }
       if (formFactor === "menu" || showHeaderResults) {
         return contents;
       } else {
@@ -121,17 +135,24 @@ export default apiInitializer("0.8", (api) => {
 
   api.createWidget("search-widget", {
     tagName: "div.search-widget",
-  });
 
-  api.decorateWidget("search-widget:after", function (helper) {
-    const searchWidget = helper.widget;
-    const searchMenuVisible = searchWidget.state.searchVisible;
+    html() {
+      const searchMenuVisible = this.state.searchVisible;
 
-    if (!searchMenuVisible && !searchWidget.attrs.topic) {
-      return helper.attach("search-menu", {
-        contextEnabled: searchWidget.state.contextEnabled,
-        formFactor: "widget",
-      });
-    }
+      if (!searchMenuVisible && !this.attrs.topic) {
+        return this.attach("search-menu", {
+          contextEnabled: this.state.contextEnabled,
+          formFactor: "widget",
+        });
+      }
+    },
+
+    clearSearchWidgetContext() {
+      this.state.inTopicContext = false;
+    },
+
+    setTopicContext() {
+      this.state.inTopicContext = true;
+    },
   });
 });

mobile/mobile.scss

@@ -6,6 +6,10 @@
   }
 }
 
-.custom-search-banner-wrap .results {
-  padding: 2em 0.5em 0.5em;
+.search-menu .search-input input#search-term {
+  width: 100%;
+}
+
+.custom-search-banner-wrap .search-icon {
+  top: 0.15em;
 }

stylesheets/special-styles.scss

@@ -11,12 +11,16 @@
       }
     }
 
-    .search-context,
     .results {
       max-width: unset;
       width: 100%;
     }
 
+    .search-context {
+      max-width: unset;
+      width: auto;
+    }
+
     > h1,
     > p {
       display: none;
@@ -107,7 +111,7 @@
     }
 
     .search-input .searching {
-      top: 0.75em;
+      top: 0.45em;
     }
 
     .no-results {