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
}}
{{#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}}

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

@ -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;