diff options
author | David O'Regan <doregan@gitlab.com> | 2023-07-18 13:34:05 +0300 |
---|---|---|
committer | David O'Regan <doregan@gitlab.com> | 2023-07-18 13:34:05 +0300 |
commit | b283296c2a550e4d7eeca96afd912c1419ec9a00 (patch) | |
tree | 3527e833a2551eda19f459c666a30208135341dc | |
parent | e0c8501d6add75e34cf7e276b836059cdb5d57a9 (diff) | |
parent | 7a0df95116957f33a62bec28c49c7149a7cf0a05 (diff) |
Merge branch 'gps-search-focus' into 'main'
Draw focus to search form during active search
See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/4045
Merged-by: David O'Regan <doregan@gitlab.com>
Approved-by: David O'Regan <doregan@gitlab.com>
Reviewed-by: Dan Mizzi-Harris <dmizzi-harris@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>
-rw-r--r-- | content/assets/stylesheets/_landing.scss | 7 | ||||
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 3 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 32 | ||||
-rw-r--r-- | content/frontend/search/components/google_search_form.vue | 139 |
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> |