From 70634198a4a7d79649816fc95171414147aa540c Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 18 Oct 2021 15:36:30 +0200
Subject: [PATCH] UX: Display full-page user search in a grid (#14636)

Two reasons for this change:
1. Better utilization of the screen space (i.e. displaying more than 5 entries on a 13" display)
2. Making user link elements smaller fixes user-card positioning (it no longer displays far to the right, away from the user name/avatar)
---
 .../app/templates/full-page-search.hbs        | 56 ++++++++++---------
 .../stylesheets/common/base/search.scss       | 26 ++++++++-
 2 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
index cf7fbd179e4..4c9eee8c2a4 100644
--- a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
@@ -114,7 +114,7 @@
               highlightQuery=highlightQuery
             }}
 
-            {{#conditional-loading-spinner condition=loading }}
+            {{#conditional-loading-spinner condition=loading}}
               {{#unless hasResults}}
                 {{#if searchActive}}
                   <h3>{{i18n "search.no_results"}}</h3>
@@ -144,21 +144,19 @@
               {{/unless}}
 
               {{#if hasResults}}
-                {{#unless loading}}
-                  <h3 class="search-footer">
-                    {{#if model.grouped_search_result.more_full_page_results}}
-                      {{#if isLastPage }}
-                        {{i18n "search.more_results"}}
-                      {{/if}}
-                    {{else}}
-                      {{i18n "search.no_more_results"}}
+                <h3 class="search-footer">
+                  {{#if model.grouped_search_result.more_full_page_results}}
+                    {{#if isLastPage}}
+                      {{i18n "search.more_results"}}
                     {{/if}}
-                  </h3>
-                {{/unless}}
+                  {{else}}
+                    {{i18n "search.no_more_results"}}
+                  {{/if}}
+                </h3>
               {{/if}}
             {{/conditional-loading-spinner}}
           {{else}}
-            {{#conditional-loading-spinner condition=loading }}
+            {{#conditional-loading-spinner condition=loading}}
               {{#if hasResults}}
                 {{#if model.categories.length}}
                   <h4 class="category-heading">
@@ -175,6 +173,7 @@
                   <h4 class="tag-heading">
                     {{i18n "search.tags"}}
                   </h4>
+
                   <div class="tag-items">
                     {{#each model.tags as |tag|}}
                       <div class="fps-tag-item">
@@ -187,28 +186,31 @@
                 {{/if}}
 
                 {{#if model.users}}
-                  {{#each model.users as |user|}}
-                    {{#user-link user=user class="fps-user-item"}}
-                      {{avatar user imageSize="large"}}
-                      <div class="user-titles">
-                        {{#if user.name}}
-                          <span class="name">
-                            {{user.name}}
+                  <div class="user-items">
+                    {{#each model.users as |user|}}
+                      {{#user-link user=user class="fps-user-item"}}
+                        {{avatar user imageSize="large"}}
+
+                        <div class="user-titles">
+                          {{#if user.name}}
+                            <span class="name">
+                              {{user.name}}
+                            </span>
+                          {{/if}}
+
+                          <span class="username">
+                            {{user.username}}
                           </span>
-                        {{/if}}
-                        <span class="username">
-                          {{user.username}}
-                        </span>
-                      </div>
-                    {{/user-link}}
-                  {{/each}}
+                        </div>
+                      {{/user-link}}
+                    {{/each}}
+                  </div>
                 {{/if}}
               {{else}}
                 {{#if searchActive}}
                   <h3>{{i18n "search.no_results"}}</h3>
                 {{/if}}
               {{/if}}
-
             {{/conditional-loading-spinner}}
           {{/if}}
         {{/load-more}}
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 1d36792eba8..e54dbc40b37 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -1,9 +1,11 @@
 @mixin search-page-spacing {
-  padding: 1rem 10%;
+  padding: 2rem 10%;
+
   @include breakpoint(medium) {
     padding: 1rem;
   }
 }
+
 .search-highlight {
   font-weight: bold;
 }
@@ -61,6 +63,7 @@
 
   .search-advanced {
     position: relative;
+
     .search-actions,
     .search-title,
     .search-bar {
@@ -69,7 +72,6 @@
 
     .search-results {
       @include search-page-spacing();
-      padding-bottom: 3em;
     }
 
     .search-info {
@@ -122,6 +124,24 @@
     margin-top: 1em;
   }
 
+  .user-items {
+    display: grid;
+    gap: 2em 1em;
+    grid: auto-flow / repeat(4, 1fr);
+
+    @include breakpoint(medium) {
+      grid: auto-flow / repeat(3, 1fr);
+    }
+
+    @include breakpoint(tablet) {
+      grid: auto-flow / 1fr 1fr;
+    }
+
+    @include breakpoint(mobile-large) {
+      grid: auto-flow / 1fr;
+    }
+  }
+
   .search-filters {
     background: var(--primary-very-low);
     display: flex;
@@ -333,10 +353,10 @@
 
 .search-results {
   .fps-user-item {
-    margin-bottom: 1.5em;
     display: flex;
     flex-direction: row;
     align-items: center;
+
     .avatar {
       margin-right: 0.5em;
       min-width: 25px;