Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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)
This commit is contained in:
Jarek Radosz 2021-10-18 15:36:30 +02:00 committed by GitHub
parent 6275658e3d
commit 70634198a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/assets/javascripts/discourse/app/templates/full-page-search.hbs
View File

@ -114,7 +114,7 @@
highlightQuery=highlightQuery highlightQuery=highlightQuery
}} }}
{{#conditional-loading-spinner condition=loading }} {{#conditional-loading-spinner condition=loading}}
{{#unless hasResults}} {{#unless hasResults}}
{{#if searchActive}} {{#if searchActive}}
<h3>{{i18n "search.no_results"}}</h3> <h3>{{i18n "search.no_results"}}</h3>
@ -144,21 +144,19 @@
{{/unless}} {{/unless}}
{{#if hasResults}} {{#if hasResults}}
{{#unless loading}} <h3 class="search-footer">
<h3 class="search-footer"> {{#if model.grouped_search_result.more_full_page_results}}
{{#if model.grouped_search_result.more_full_page_results}} {{#if isLastPage}}
{{#if isLastPage }} {{i18n "search.more_results"}}
{{i18n "search.more_results"}}
{{/if}}
{{else}}
{{i18n "search.no_more_results"}}
{{/if}} {{/if}}
</h3> {{else}}
{{/unless}} {{i18n "search.no_more_results"}}
{{/if}}
</h3>
{{/if}} {{/if}}
{{/conditional-loading-spinner}} {{/conditional-loading-spinner}}
{{else}} {{else}}
{{#conditional-loading-spinner condition=loading }} {{#conditional-loading-spinner condition=loading}}
{{#if hasResults}} {{#if hasResults}}
{{#if model.categories.length}} {{#if model.categories.length}}
<h4 class="category-heading"> <h4 class="category-heading">
@ -175,6 +173,7 @@
<h4 class="tag-heading"> <h4 class="tag-heading">
{{i18n "search.tags"}} {{i18n "search.tags"}}
</h4> </h4>
<div class="tag-items"> <div class="tag-items">
{{#each model.tags as |tag|}} {{#each model.tags as |tag|}}
<div class="fps-tag-item"> <div class="fps-tag-item">
@ -187,28 +186,31 @@
{{/if}} {{/if}}
{{#if model.users}} {{#if model.users}}
{{#each model.users as |user|}} <div class="user-items">
{{#user-link user=user class="fps-user-item"}} {{#each model.users as |user|}}
{{avatar user imageSize="large"}} {{#user-link user=user class="fps-user-item"}}
<div class="user-titles"> {{avatar user imageSize="large"}}
{{#if user.name}}
<span class="name"> <div class="user-titles">
{{user.name}} {{#if user.name}}
<span class="name">
{{user.name}}
</span>
{{/if}}
<span class="username">
{{user.username}}
</span> </span>
{{/if}} </div>
<span class="username"> {{/user-link}}
{{user.username}} {{/each}}
</span> </div>
</div>
{{/user-link}}
{{/each}}
{{/if}} {{/if}}
{{else}} {{else}}
{{#if searchActive}} {{#if searchActive}}
<h3>{{i18n "search.no_results"}}</h3> <h3>{{i18n "search.no_results"}}</h3>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{/conditional-loading-spinner}} {{/conditional-loading-spinner}}
{{/if}} {{/if}}
{{/load-more}} {{/load-more}}

26
app/assets/stylesheets/common/base/search.scss
View File

@ -1,9 +1,11 @@
@mixin search-page-spacing { @mixin search-page-spacing {
padding: 1rem 10%; padding: 2rem 10%;
@include breakpoint(medium) { @include breakpoint(medium) {
padding: 1rem; padding: 1rem;
} }
} }
.search-highlight { .search-highlight {
font-weight: bold; font-weight: bold;
} }
@ -61,6 +63,7 @@
.search-advanced { .search-advanced {
position: relative; position: relative;
.search-actions, .search-actions,
.search-title, .search-title,
.search-bar { .search-bar {
@ -69,7 +72,6 @@
.search-results { .search-results {
@include search-page-spacing(); @include search-page-spacing();
padding-bottom: 3em;
} }
.search-info { .search-info {
@ -122,6 +124,24 @@
margin-top: 1em; 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 { .search-filters {
background: var(--primary-very-low); background: var(--primary-very-low);
display: flex; display: flex;
@ -333,10 +353,10 @@
.search-results { .search-results {
.fps-user-item { .fps-user-item {
margin-bottom: 1.5em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
.avatar { .avatar {
margin-right: 0.5em; margin-right: 0.5em;
min-width: 25px; min-width: 25px;