Draw focus to search form during active search

4 files changed, 115 insertions, 66 deletions

diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index 8bf6f6c2..b5d09523 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -109,6 +109,13 @@
       }
       .gl-search-box-by-type-input {
         height: auto;
+        &:focus {
+          box-shadow: inset 0 0 0 1px $landing-gl-form-border, 0 0 0 1px #fff, 0 0 0 3px $blue-400;
+        }
+      }
+      .gs-results {
+        border: 1px solid $landing-gl-form-border;
+        border-width: 0 1px 1px;
       }
 
       // Lunr.js
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 6018def3..13b01b5c 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -8,8 +8,8 @@ $header-height: 3rem;
 $sidebar-width: 16.66667%;
 $sidebar-mobile-width: 20rem;
 $search-sm-width: 90vw;
+$search-md-width: auto;
 $search-lg-width: 25rem;
-$search-md-width: 18rem;
 
 // GitLab colors
 // Tanuki
@@ -141,6 +141,7 @@ $landing-gl-blue-200: rgba(102, 102, 196, 0.24);
 $landing-gl-blue-600: #171537;
 $landing-gl-blue-950: rgba(36, 34, 66, 0.24);
 $landing-gl-blue-1000: rgba(36, 34, 66, 0.25);
+$landing-gl-form-border: #89888d;
 
 // Footer colors
 $footer-gray-400: #868686;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 781d5122..6ee3638c 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -300,14 +300,19 @@ ol {
   .gs-wrapper {
     width: $search-sm-width;
     @media (min-width: $bp-md) {
+      width: $search-md-width;
+    }
+    @media (min-width: $bp-lg) {
       width: $search-lg-width;
     }
   }
   .gs-results {
+    margin-top: 1px;
     width: $search-sm-width;
-    top: 5.25rem;
     @media (min-width: $bp-md) {
-      top: 2.75rem;
+      width: $search-md-width;
+    }
+    @media (min-width: $bp-lg) {
       width: $search-lg-width;
     }
   }
@@ -343,7 +348,17 @@ ol {
 .gl-search-box-by-click {
   width: $search-lg-width;
 }
-// Results page
+
+// Search overlay
+body.landing .modal-backdrop {
+  display: none;
+}
+.modal-backdrop {
+  z-index: 100;
+  top: $header-height;
+}
+
+// Search results page
 html.search-results {
   overflow-y: scroll;
 }
@@ -679,3 +694,14 @@ $gl-icon-check: 'data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7
   -webkit-mask-image: url('#{$gl-icon-check}');
   mask-image: url('#{$gl-icon-check}');
 }
+
+// Vue transitions
+// See https://v2.vuejs.org/v2/guide/transitions.html
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s linear;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/content/frontend/search/components/google_search_form.vue b/content/frontend/search/components/google_search_form.vue
index 3f3a0197..101971f7 100644
--- a/content/frontend/search/components/google_search_form.vue
+++ b/content/frontend/search/components/google_search_form.vue
@@ -29,17 +29,18 @@ export default {
   },
   data() {
     return {
+      activeLink: -1,
+      historyItems: 0,
       isLoading: false,
       moreResultsPath: '',
       results: [],
+      showTooltip: true,
+      suggestion: '',
       searchQuery: '',
+      showModal: false,
       showResultPanel: false,
       submitted: false,
       totalCount: 0,
-      activeLink: -1,
-      showTooltip: true,
-      suggestion: '',
-      historyItems: 0,
     };
   },
   computed: {
@@ -55,6 +56,8 @@ export default {
   },
   watch: {
     searchQuery() {
+      this.results = [];
+      this.showResultPanel = false;
       this.showTooltip = this.searchQuery.length === 0;
       this.submitted = false;
       this.moreResultsPath = `/search/?q=${encodeURI(this.searchQuery)}`;
@@ -122,6 +125,7 @@ export default {
     },
     deactivate() {
       this.showResultPanel = false;
+      this.showModal = false;
       this.activeLink = -1;
       this.showTooltip = this.searchQuery.length === 0;
     },
@@ -130,67 +134,78 @@ export default {
 </script>
 
 <template>
-  <div
-    v-click-outside="() => deactivate()"
-    class="gs-wrapper gl-m-auto gl-my-3 gl-md-mt-0 gl-md-mb-0"
-    @keydown.arrow-down.prevent="keyboardNav"
-    @keydown.arrow-up.prevent="keyboardNav"
-    @keydown.escape="deactivate()"
-  >
-    <form class="gl-relative">
-      <gl-search-box-by-type
-        v-model="searchQuery"
-        :is-loading="isLoading"
-        :borderless="borderless"
-        placeholder=""
-        autocomplete="off"
-        aria-label="Search"
-        @focus="showResultPanel = true"
-        @keydown.enter.prevent="showAllResults()"
-      />
-      <kbd
-        v-show="showTooltip && !isLoading"
-        v-gl-tooltip.bottom.hover.html
-        class="gl-absolute gl-z-index-1 gl-bg-gray-100 gl-text-gray-700"
-        title="Use the shortcut keys<br><kbd>/</kbd> or <kbd>s</kbd> to start a search"
-        >/</kbd
-      >
-    </form>
-
+  <div>
     <div
-      v-show="showResultPanel"
-      class="gs-results gl-absolute gl-z-index-200 gl-bg-white gl-rounded gl-px-3 gl-shadow"
+      v-click-outside="() => deactivate()"
+      class="gs-wrapper gl-m-auto gl-my-3 gl-md-mt-0 gl-md-mb-0"
+      @keydown.arrow-down.prevent="keyboardNav"
+      @keydown.arrow-up.prevent="keyboardNav"
+      @keydown.escape="deactivate()"
     >
-      <ul v-show="results.length" data-testid="search-results" class="gl-pl-0 gl-mb-3 gl-pt-3">
-        <li v-for="(result, index) in results" :key="result.cacheId" class="gl-list-style-none">
-          <gl-link
-            v-safe-html="result.formattedTitle"
-            data-result-type="dropdown"
-            :data-search-query="searchQuery"
-            :href="result.relativeLink"
-            :data-link-index="index"
-            class="gl-text-gray-700 gl-py-3 gl-px-2 gl-display-block gl-text-left"
-          />
-        </li>
-        <li v-if="hasMoreResults" class="gl-list-style-none gl-border-t gl-my-2 gl-py-2">
-          <gl-link
-            :data-link-index="results.length"
-            data-testid="more-results"
-            :href="moreResultsPath"
-            class="gl-text-gray-700 gl-py-3 gl-pb-2 gl-px-2 gl-display-block gl-text-left"
-          >
-            See all results
-          </gl-link>
-        </li>
-      </ul>
-      <p
-        v-if="hasNoResults && !suggestion"
-        data-testid="no-results"
-        class="gl-text-left gl-pt-3 gl-my-2 gl-pb-2"
+      <form class="gl-relative">
+        <gl-search-box-by-type
+          v-model="searchQuery"
+          :is-loading="isLoading"
+          :borderless="borderless"
+          placeholder=""
+          autocomplete="off"
+          aria-label="Search"
+          @focus="
+            showResultPanel = true;
+            showModal = true;
+          "
+          @keydown.enter.prevent="showAllResults()"
+        />
+        <kbd
+          v-show="showTooltip && !isLoading"
+          v-gl-tooltip.bottom.hover.html
+          class="gl-absolute gl-z-index-1 gl-bg-gray-100 gl-text-gray-700"
+          title="Use the shortcut keys<br><kbd>/</kbd> or <kbd>s</kbd> to start a search"
+          >/</kbd
+        >
+      </form>
+
+      <div
+        v-if="showResultPanel"
+        class="gs-results gl-absolute gl-z-index-200 gl-bg-white gl-px-4 gl-rounded gl-shadow"
       >
-        No results found.
-      </p>
-      <suggested-items v-if="showSuggested" @pageHistoryInit="(items) => (historyItems = items)" />
+        <ul v-if="results.length" data-testid="search-results" class="gl-pl-0 gl-mb-0 gl-py-3">
+          <li v-for="(result, index) in results" :key="result.cacheId" class="gl-list-style-none">
+            <gl-link
+              v-safe-html="result.formattedTitle"
+              data-result-type="dropdown"
+              :data-search-query="searchQuery"
+              :href="result.relativeLink"
+              :data-link-index="index"
+              class="gl-text-gray-700 gl-py-3 gl-px-2 gl-display-block gl-text-left"
+            />
+          </li>
+          <li v-if="hasMoreResults" class="gl-list-style-none gl-border-t gl-my-2 gl-py-2">
+            <gl-link
+              :data-link-index="results.length"
+              data-testid="more-results"
+              :href="moreResultsPath"
+              class="gl-text-gray-700 gl-pt-3 gl-pb-2 gl-px-2 gl-display-block gl-text-left"
+            >
+              See all results
+            </gl-link>
+          </li>
+        </ul>
+        <p
+          v-if="hasNoResults && !suggestion"
+          data-testid="no-results"
+          class="gl-text-left gl-pt-3 gl-my-2 gl-pb-2"
+        >
+          No results found.
+        </p>
+        <suggested-items
+          v-if="showSuggested"
+          @pageHistoryInit="(items) => (historyItems = items)"
+        />
+      </div>
     </div>
+    <transition name="fade">
+      <div v-if="showModal" class="gl-display-none gl-md-display-block modal-backdrop"></div>
+    </transition>
   </div>
 </template>