Small UI tweaks on search results pages

app/assets/javascripts/search/sidebar/components/group_filter.vue

@@ -67,7 +67,7 @@ export default {
 
 <template>
   <div>
-    <h5 :id="labelId" class="gl-mt-0 gl-mb-5 gl-font-sm">
+    <h5 :id="labelId" class="gl-mt-0 gl-mb-2 gl-font-sm">
       {{ $options.i18n.groupFieldLabel }}
     </h5>
     <searchable-dropdown

app/assets/javascripts/search/sidebar/components/project_filter.vue

@@ -76,7 +76,7 @@ export default {
 
 <template>
   <div>
-    <h5 :id="labelId" class="gl-mt-0 gl-mb-5 gl-font-sm">
+    <h5 :id="labelId" class="gl-mt-0 gl-mb-2 gl-font-sm">
       {{ $options.i18n.projectFieldLabel }}
     </h5>
     <searchable-dropdown

app/assets/javascripts/search/topbar/components/app.vue

@@ -22,7 +22,7 @@ export default {
   i18n: {
     searchPlaceholder: s__(`GlobalSearch|Search for projects, issues, etc.`),
     searchLabel: s__(`GlobalSearch|What are you searching for?`),
-    syntaxOptionsLabel: s__('GlobalSearch|Syntax options'),
+    syntaxOptionsLabel: s__('GlobalSearch|View syntax options.'),
     groupFieldLabel: s__('GlobalSearch|Group'),
     projectFieldLabel: s__('GlobalSearch|Project'),
   },
@@ -102,43 +102,27 @@ export default {
 
 <template>
   <section>
-    <div
-      class="gl-lg-display-flex gl-flex-direction-row gl-py-5"
-      :class="{
-        'gl-justify-content-space-between': showSyntaxOptions,
-        'gl-justify-content-end': !showSyntaxOptions,
-      }"
-    >
+    <div class="search-page-form gl-mt-5">
+      <search-type-indicator />
       <template v-if="showSyntaxOptions">
-        <div>
-          <gl-button
-            category="tertiary"
-            variant="link"
-            size="small"
-            button-text-classes="gl-font-sm!"
-            @click="onToggleDrawer"
+        <div class="gl-display-inline-block">
+          <gl-button category="tertiary" variant="link" @click="onToggleDrawer"
             >{{ $options.i18n.syntaxOptionsLabel }}
           </gl-button>
         </div>
         <markdown-drawer ref="markdownDrawer" :document-path="documentBasedOnSearchType" />
       </template>
-      <search-type-indicator />
-    </div>
-    <div class="search-page-form gl-lg-display-flex gl-flex-direction-column">
-      <div class="gl-lg-display-flex gl-flex-direction-row gl-align-items-flex-start">
-        <div class="gl-flex-grow-1 gl-pb-8 gl-lg-mb-0 gl-lg-mr-2">
-          <gl-search-box-by-type
-            id="dashboard_search"
-            v-model="search"
-            name="search"
-            :regex-button-is-visible="isRegexButtonVisible"
-            :regex-button-state="regexEnabled"
-            :regex-button-handler="regexButtonHandler"
-            :placeholder="$options.i18n.searchPlaceholder"
-            @keydown.enter.stop.prevent="applyQuery"
-          />
-        </div>
-      </div>
+      <gl-search-box-by-type
+        id="dashboard_search"
+        v-model="search"
+        name="search"
+        class="gl-mt-2"
+        :regex-button-is-visible="isRegexButtonVisible"
+        :regex-button-state="regexEnabled"
+        :regex-button-handler="regexButtonHandler"
+        :placeholder="$options.i18n.searchPlaceholder"
+        @keydown.enter.stop.prevent="applyQuery"
+      />
     </div>
   </section>
 </template>

app/assets/javascripts/search/topbar/components/search_type_indicator.vue

@@ -28,7 +28,7 @@ export default {
   },
   i18n: {
     zoekt_enabled: s__(
-      'GlobalSearch|%{linkStart}Exact code search (powered by Zoekt)%{linkEnd} is enabled',
+      'GlobalSearch|%{linkStart}Exact code search (powered by Zoekt)%{linkEnd} is enabled.',
     ),
     zoekt_disabled: s__(
       'GlobalSearch|%{linkStart}Exact code search (powered by Zoekt)%{linkEnd} is disabled since %{ref_elem} is not the default branch. %{docs_link}',
@@ -119,19 +119,19 @@ export default {
 </script>
 
 <template>
-  <div class="gl-text-gray-600">
-    <div v-if="isBasicSearch" data-testid="basic">&nbsp;</div>
-    <div v-else-if="isEnabled" :data-testid="`${searchTypeTestId}-enabled`">
+  <div class="gl-inline gl-text-gray-600">
+    <div v-if="isBasicSearch" data-testid="basic"></div>
+    <div v-else-if="isEnabled" :data-testid="`${searchTypeTestId}-enabled`" class="gl-inline">
       <gl-sprintf :message="enabledMessage">
         <template #link="{ content }">
-          <gl-link :href="helpUrl" target="_blank" data-testid="docs-link">{{ content }} </gl-link>
+          <gl-link :href="helpUrl" target="_blank" data-testid="docs-link">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </div>
-    <div v-else :data-testid="`${searchTypeTestId}-disabled`">
+    <div v-else :data-testid="`${searchTypeTestId}-disabled`" class="gl-inline">
       <gl-sprintf :message="disabledMessage">
         <template #link="{ content }">
-          <gl-link :href="helpUrl" target="_blank" data-testid="docs-link">{{ content }} </gl-link>
+          <gl-link :href="helpUrl" target="_blank" data-testid="docs-link">{{ content }}</gl-link>
         </template>
         <template #ref_elem>
           <code v-gl-tooltip :title="query.repository_ref">{{ query.repository_ref }}</code>

app/views/search/_results_status.html.haml

-.section{ class: ('gl-lg-display-none' if @search_objects.to_a.empty?) }
-  .search-results-status
-    .gl-display-flex.gl-flex-direction-column
-      .gl-p-5.gl-display-flex.gl-flex-wrap
-        - unless @search_objects.to_a.empty?
-          .gl-display-flex.gl-text-left.gl-flex-grow-1.gl-flex-shrink-1.gl-white-space-nowrap.gl-flex-wrap.gl-sm-w-half
+.search-results-status.gl-sm-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-my-4{ class: ('gl-lg-display-none' if @search_objects.to_a.empty?) }
+  - unless @search_objects.to_a.empty?
+    %p.gl-text-truncate.gl-my-auto
+      - unless @search_service_presenter.without_count?
+        = search_entries_info(@search_objects, @scope, @search_term)
+      - unless @search_service_presenter.show_snippets?
+        - if @project
+          - link_to_project = link_to(@project.full_name, @project, class: 'search-wrap-f-md-down')
+          - if @scope == 'blobs'
+            = _("in")
+            .mx-md-1.gl-my-auto
+              #js-blob-ref-switcher{ data: { "project-id" => @project.id, "ref" => repository_ref(@project), "field-name": "repository_ref" } }
             %p.gl-text-truncate.gl-my-auto
-              - unless @search_service_presenter.without_count?
-                = search_entries_info(@search_objects, @scope, @search_term)
-              - unless @search_service_presenter.show_snippets?
-                - if @project
-                  - link_to_project = link_to(@project.full_name, @project, class: 'search-wrap-f-md-down')
-                  - if @scope == 'blobs'
-                    = _("in")
-                    .mx-md-1.gl-my-auto
-                      #js-blob-ref-switcher{ data: { "project-id" => @project.id, "ref" => repository_ref(@project), "field-name": "repository_ref" } }
-                    %p.gl-text-truncate.gl-my-auto
-                      = s_('SearchCodeResults|of %{link_to_project}').html_safe % { link_to_project: link_to_project }
-                  - else
-                    = _("in project %{link_to_project}").html_safe % { link_to_project: link_to_project }
-                - elsif @group
-                  - link_to_group = link_to(@group.name, @group, class: 'ml-md-1')
-                  = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
-        .gl-display-flex.gl-my-3.gl-flex-grow-1.gl-flex-shrink-1.gl-justify-content-end
-          = render Pajamas::ButtonComponent.new(category: 'primary', icon: 'filter', button_options: {id: 'js-open-mobile-filters', class: 'gl-lg-display-none'}) do
-            = s_('GlobalSearch|Filters')
-          - if @search_service_presenter.show_sort_dropdown? && !@search_objects.to_a.empty?
-            .gl-ml-3
-              #js-search-sort{ data: { "search-sort-options" => search_sort_options.to_json } }
-    %hr.gl-mb-5.gl-mt-0.gl-border-gray-100.gl-w-full
+              = s_('SearchCodeResults|of %{link_to_project}').html_safe % { link_to_project: link_to_project }
+          - else
+            = _("in project %{link_to_project}").html_safe % { link_to_project: link_to_project }
+        - elsif @group
+          - link_to_group = link_to(@group.name, @group, class: 'ml-md-1')
+          = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
+  .gl-display-flex
+    = render Pajamas::ButtonComponent.new(category: 'primary', icon: 'filter', button_options: {id: 'js-open-mobile-filters', class: 'gl-lg-display-none'}) do
+      = s_('GlobalSearch|Filters')
+    - if @search_service_presenter.show_sort_dropdown? && !@search_objects.to_a.empty?
+      .gl-ml-3
+        #js-search-sort{ data: { "search-sort-options" => search_sort_options.to_json } }

app/views/search/results/_issuable.html.haml

-%div{ class: 'search-result-row gl-display-flex gl-sm-flex-direction-row gl-flex-direction-column gl-align-items-center gl-pb-5! gl-mt-5 gl-mb-0!' }
+.search-result-row.row.gl-display-flex.gl-sm-flex-direction-row.gl-flex-direction-column.gl-align-items-center.gl-mt-5{ class: 'gl-pb-5! gl-mb-0!' }
   .col-sm-9
     %span.gl-display-flex.gl-align-items-center
       = gl_badge_tag issuable_state_text(issuable), variant: issuable_state_to_badge_class(issuable), size: :sm

locale/gitlab.pot

@@ -23664,7 +23664,7 @@ msgstr ""
 msgid "GlobalSearch|%{linkStart}Exact code search (powered by Zoekt)%{linkEnd} is disabled since %{ref_elem} is not the default branch. %{docs_link}"
 msgstr ""
-msgid "GlobalSearch|%{linkStart}Exact code search (powered by Zoekt)%{linkEnd} is enabled"
+msgid "GlobalSearch|%{linkStart}Exact code search (powered by Zoekt)%{linkEnd} is enabled."
 msgstr ""
 msgid "GlobalSearch|Aggregations load error."
@@ -23838,9 +23838,6 @@ msgstr ""
 msgid "GlobalSearch|Showing top %{maxItems}"
 msgstr ""
-msgid "GlobalSearch|Syntax options"
-msgstr ""
-
 msgid "GlobalSearch|The search term must be at least 3 characters long."
 msgstr ""
@@ -23874,6 +23871,9 @@ msgstr ""
 msgid "GlobalSearch|Users"
 msgstr ""
+msgid "GlobalSearch|View syntax options."
+msgstr ""
+
 msgid "GlobalSearch|What are you searching for?"
 msgstr ""