mirror of
https://github.com/discourse/discourse.git
synced 2025-06-05 14:07:30 +08:00
UX: search CSS refactor + fixes (#32401)
* change spacing to use consistent values * change font weight and colours for search results * updated copy for mobile to reflect the removal of the search icon (using native keyboard CTA now) * results are full-width, in line with other dropdowns; noticable in hover effects * trying to make sure all search results items are of equal height, were possible * fixing missing `in-this-topic` context button **Ignore the silly emoji in the screenshots on mobile – different problem, alrdy fixed on main** ## Desktop ### Search Header | Before | After | |--------|--------| |  |  | | |  | |  |  | |  |  | |  |  | ### Search Welcome Banner | Before | After | |--------|--------| |  |  | |  |  | |  | | |  | | |  |  | ### Search in Topic | Before | After | |--------|--------| |  |  | |  |  | |  |  | |  |  | |  |  | |  | | ## Mobile | Before | After | |--------|--------| |  |  | |  |  | |  |  | |  |  | |  |  | |  |  | --------- Co-authored-by: Yuriy Kurant <yuriy@discourse.org>
This commit is contained in:
chapoi
@ -82,6 +82,7 @@ export default class Results extends Component {
|
||||
(and @inHeaderMobileView this.search.activeGlobalSearchTerm)
|
||||
"with-search-term"
|
||||
)
|
||||
(if this.search.contextType "has-context")
|
||||
}}
|
||||
data-test-selector="search-menu-results"
|
||||
>
|
||||
|
||||
@ -141,59 +141,62 @@ export default class AssistantItem extends Component {
|
||||
{{on "click" this.onClick}}
|
||||
data-usage={{@usage}}
|
||||
>
|
||||
<a class="search-link" href={{this.href}}>
|
||||
<a class={{concatClass @typeClass "search-link"}} href={{this.href}}>
|
||||
<span aria-label={{i18n "search.title"}}>
|
||||
{{icon (or @icon "magnifying-glass")}}
|
||||
</span>
|
||||
|
||||
{{#if this.prefix}}
|
||||
<span class="search-item-prefix">
|
||||
{{this.prefix}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if @withInLabel}}
|
||||
<span class="label-suffix">{{i18n "search.in"}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if @category}}
|
||||
<Category @result={{@category}} />
|
||||
{{#if (and @tag @isIntersection)}}
|
||||
<span class="search-item-tag">
|
||||
{{icon "tag"}}{{@tag}}
|
||||
<span class="search-item-wrapper">
|
||||
{{#if this.prefix}}
|
||||
<span class="search-item-prefix">
|
||||
{{this.prefix}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{else if @tag}}
|
||||
{{#if (and @isIntersection @additionalTags.length)}}
|
||||
<span class="search-item-tag">{{this.tagsSlug}}</span>
|
||||
{{else}}
|
||||
<span class="search-item-tag">
|
||||
<Tag @result={{@tag}} />
|
||||
|
||||
{{#if @withInLabel}}
|
||||
<span class="label-suffix">{{i18n "search.in"}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if @category}}
|
||||
<Category @result={{@category}} />
|
||||
{{#if (and @tag @isIntersection)}}
|
||||
<span class="search-item-tag">
|
||||
{{icon "tag"}}{{@tag}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{else if @tag}}
|
||||
{{#if (and @isIntersection @additionalTags.length)}}
|
||||
<span class="search-item-tag">{{this.tagsSlug}}</span>
|
||||
{{else}}
|
||||
<span class="search-item-tag">
|
||||
<Tag @result={{@tag}} />
|
||||
</span>
|
||||
{{/if}}
|
||||
{{else if @user}}
|
||||
<span class="search-item-user">
|
||||
<User @result={{@user}} />
|
||||
</span>
|
||||
{{/if}}
|
||||
{{else if @user}}
|
||||
<span class="search-item-user">
|
||||
<User @result={{@user}} />
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
<span class="search-item-slug">
|
||||
{{#if @suffix}}
|
||||
<span class="label-suffix">{{@suffix}}</span>
|
||||
{{#if (or @label @suffix)}}
|
||||
<span class="search-item-slug">
|
||||
{{#if @suffix}}
|
||||
<span class="label-suffix">{{@suffix}}</span>
|
||||
{{/if}}
|
||||
{{@label}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{#if @extraHint}}
|
||||
<span class="extra-hint">
|
||||
{{i18n
|
||||
(if
|
||||
this.site.mobileView
|
||||
"search.mobile_enter_hint"
|
||||
"search.enter_hint"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{@label}}
|
||||
</span>
|
||||
{{#if @extraHint}}
|
||||
<span class="extra-hint">
|
||||
{{i18n
|
||||
(if
|
||||
this.site.mobileView
|
||||
"search.mobile_enter_hint"
|
||||
"search.enter_hint"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import FlatButton from "discourse/components/flat-button";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import AssistantItem from "discourse/components/search-menu/results/assistant-item";
|
||||
import User from "discourse/models/user";
|
||||
import { i18n } from "discourse-i18n";
|
||||
@ -53,11 +53,11 @@ export default class RecentSearches extends Component {
|
||||
<div class="search-menu-recent">
|
||||
<div class="heading">
|
||||
<h4>{{i18n "search.recent"}}</h4>
|
||||
<FlatButton
|
||||
<DButton
|
||||
@title="search.clear_recent"
|
||||
@icon="xmark"
|
||||
@action={{this.clearRecent}}
|
||||
class="clear-recent-searches"
|
||||
class="btn-flat clear-recent-searches"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: z("header");
|
||||
|
||||
@include viewport.until(sm) {
|
||||
z-index: z("mobile-header");
|
||||
}
|
||||
}
|
||||
|
||||
.d-header {
|
||||
|
||||
@ -242,7 +242,7 @@
|
||||
&.search-menu-panel {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
padding: 0;
|
||||
transform-origin: 66%;
|
||||
transition: height 0.2s ease-in;
|
||||
|
||||
@ -278,7 +278,7 @@
|
||||
}
|
||||
|
||||
.btn-cancel-mobile-search {
|
||||
padding: 1rem 0.625rem;
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,25 +7,21 @@
|
||||
|
||||
@mixin separator {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
margin-top: 0.5em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
$search-pad-vertical: 0.25em;
|
||||
$search-pad-horizontal: 0.5em;
|
||||
$search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tight and .5 too loose
|
||||
|
||||
.search-menu.glimmer-search-menu {
|
||||
.search-input-wrapper {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
--search-input-wrapper-padding: 0.5rem;
|
||||
position: fixed;
|
||||
left: var(--search-input-wrapper-padding);
|
||||
right: var(--search-input-wrapper-padding);
|
||||
top: var(--search-input-wrapper-padding);
|
||||
width: calc(100dvw - calc(var(--search-input-wrapper-padding) * 2));
|
||||
padding-bottom: var(--search-input-wrapper-padding);
|
||||
left: 1rem;
|
||||
right: 0.35rem; // to compensate for cancel button padding
|
||||
top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
background-color: var(--secondary);
|
||||
z-index: z("base");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -40,7 +36,12 @@ $search-pad-horizontal: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem;
|
||||
|
||||
.search-menu-panel & {
|
||||
@include breakpoint("mobile-extra-large", $rule: min-width) {
|
||||
padding: $search-result-element-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@ -51,7 +52,7 @@ $search-pad-horizontal: 0.5em;
|
||||
background: var(--d-input-bg-color);
|
||||
border: var(--d-input-border);
|
||||
border-radius: var(--d-input-border-radius);
|
||||
padding: 0.25rem;
|
||||
padding: 0.25em 0;
|
||||
|
||||
input.search-term__input {
|
||||
background: none;
|
||||
@ -66,19 +67,8 @@ $search-pad-horizontal: 0.5em;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
.mobile-search-button + input.search-term__input {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.search-context {
|
||||
margin: 2px;
|
||||
margin-right: 0;
|
||||
white-space: nowrap;
|
||||
background-color: var(--primary-200);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-medium);
|
||||
.mobile-search-button ~ input.search-term__input {
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,18 +77,20 @@ $search-pad-horizontal: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
.btn.search-context {
|
||||
margin: 0.25em 0 0 0;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
}
|
||||
.menu-panel {
|
||||
border: 0;
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
padding: 0; // overrule generic menu panels to achieve full width hover effect
|
||||
|
||||
.heading {
|
||||
padding: 5px 0 5px 5px;
|
||||
@include breakpoint("mobile-extra-large", $rule: min-width) {
|
||||
// alignment adjustment for search menu panel (within topic) on desktop to align with results
|
||||
.search-input {
|
||||
padding-right: calc(1rem - 0.65em);
|
||||
}
|
||||
|
||||
.filter {
|
||||
padding: 0 5px;
|
||||
.search-term__input {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -114,292 +106,57 @@ $search-pad-horizontal: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.search-context {
|
||||
white-space: nowrap;
|
||||
background-color: var(--primary-200);
|
||||
|
||||
@include breakpoint("mobile-extra-large", $rule: min-width) {
|
||||
margin-left: 1rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
position: fixed;
|
||||
top: calc(var(--header-offset) + 0.75em);
|
||||
left: 1rem;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
&.with-search-term {
|
||||
padding-top: $search-pad-vertical;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
&,
|
||||
&.with-search-term {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
min-width: 100px;
|
||||
|
||||
.item {
|
||||
.blurb {
|
||||
// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
margin-top: 0.25em;
|
||||
color: var(--primary-high);
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-topic {
|
||||
.first-line {
|
||||
display: block;
|
||||
line-height: var(--line-height-medium);
|
||||
padding-top: calc(var(--header-offset));
|
||||
}
|
||||
|
||||
.second-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0 0.5em;
|
||||
// temporary solution while waiting for dev to add conditional class
|
||||
:has(.search-context) & {
|
||||
padding-top: calc(var(--header-offset) + 2.25em);
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-post {
|
||||
.blurb {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-category {
|
||||
.badge-category__wrapper {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
.widget-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-group .group-result,
|
||||
.search-result-user {
|
||||
.search-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img.avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-titles {
|
||||
@include user-item-flex;
|
||||
|
||||
.name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.username,
|
||||
.name,
|
||||
.custom-field {
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
|
||||
.custom-field {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
}
|
||||
|
||||
.user-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-group .group-result {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
|
||||
&:not(.--with-flair) {
|
||||
svg {
|
||||
padding: 0.43em; // matching avatar-flair width
|
||||
background: var(--primary-200);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.avatar-flair {
|
||||
width: 1.62em;
|
||||
height: 1.6em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--primary-200);
|
||||
color: var(--primary-medium);
|
||||
border-radius: 50%;
|
||||
|
||||
&.avatar-flair-image {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-down-2);
|
||||
color: currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
.group-names {
|
||||
@include user-item-flex;
|
||||
min-width: 0;
|
||||
|
||||
.name,
|
||||
.slug {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
&.--group-with-slug {
|
||||
.name {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-category,
|
||||
.search-result-tag {
|
||||
+ .search-result-user,
|
||||
+ .search-result-group {
|
||||
@include separator;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-user .user-result img.avatar,
|
||||
.search-item-user {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
img.avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.username {
|
||||
margin-right: 0.33em;
|
||||
}
|
||||
}
|
||||
|
||||
.label-suffix {
|
||||
color: var(--primary-medium);
|
||||
margin-right: 0.33em;
|
||||
}
|
||||
|
||||
.badge-category__wrapper + .search-item-tag {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-left: 0.33em;
|
||||
}
|
||||
|
||||
.search-item-tag {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
.extra-hint {
|
||||
color: var(--primary-low-mid);
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.search-item-slug {
|
||||
overflow-wrap: anywhere;
|
||||
white-space: wrap;
|
||||
min-width: 0;
|
||||
|
||||
.keyword {
|
||||
margin-right: 0.33em;
|
||||
}
|
||||
|
||||
.badge-wrapper {
|
||||
font-size: var(--font-0);
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu-initial-options {
|
||||
+ .search-result-tag,
|
||||
+ .search-result-category,
|
||||
+ .search-result-user,
|
||||
+ .search-result-group {
|
||||
@include separator;
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu-initial-options,
|
||||
.search-result-tag,
|
||||
.search-menu-assistant {
|
||||
.search-item-prefix {
|
||||
margin-right: 0.33em;
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
.search-link {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
|
||||
@include ellipsis;
|
||||
|
||||
.d-icon {
|
||||
margin-right: 0.33em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.d-icon-tag {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.d-icon-magnifying-glass {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browser-search-tip,
|
||||
.search-random-quick-tip {
|
||||
padding: $search-pad-vertical 1px;
|
||||
font-size: var(--font-down-2);
|
||||
color: var(--primary-medium);
|
||||
|
||||
.tip-label {
|
||||
background-color: rgba(var(--tertiary-rgb), 0.1);
|
||||
margin-right: 4px;
|
||||
padding: 2px 4px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
|
||||
&.tip-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu-recent {
|
||||
@include separator;
|
||||
|
||||
.search-menu-assistant-item .search-link {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.heading {
|
||||
padding: 0.5em 0 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.menu-panel & {
|
||||
padding: 0.5em 0.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.filter {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--primary-medium);
|
||||
font-weight: normal;
|
||||
@ -413,58 +170,46 @@ $search-pad-horizontal: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.browser-search-tip {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.searching {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.spinner {
|
||||
width: 0.75rem; // 12px
|
||||
height: 0.75rem; // 12px
|
||||
border-width: 0.125rem; // 2px
|
||||
margin: 0 $hpad 0 0;
|
||||
}
|
||||
|
||||
.show-advanced-search,
|
||||
.clear-search {
|
||||
.d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
.d-icon {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
padding-right: 0.25rem; // 4px
|
||||
}
|
||||
|
||||
.show-advanced-search {
|
||||
padding-left: 0.375rem; // 6px
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: $search-pad-vertical $search-pad-horizontal;
|
||||
}
|
||||
|
||||
.search-link {
|
||||
display: block;
|
||||
padding: $search-pad-vertical $search-pad-horizontal;
|
||||
padding: $search-result-element-padding;
|
||||
|
||||
&.category,
|
||||
&.user,
|
||||
&.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
// This is purposefully redundant
|
||||
// the search widget can be used outside of the header
|
||||
// and the focus/hover styles from the header in those cases wouldn't follow
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--highlight-bg);
|
||||
background-color: var(--d-hover);
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
padding-block: 0.5em;
|
||||
}
|
||||
|
||||
.search-item-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
// overrules for legacy css
|
||||
.topic-statuses {
|
||||
float: none;
|
||||
|
||||
.topic-status .d-icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
.topic {
|
||||
@ -472,16 +217,254 @@ $search-pad-horizontal: 0.5em;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: var(--font-up-1-rem);
|
||||
color: var(--tertiary);
|
||||
overflow-wrap: anywhere;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu-initial-options,
|
||||
.search-result-tag,
|
||||
.search-result-user,
|
||||
.search-result-category {
|
||||
.search-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu-initial-options {
|
||||
+ .search-result-tag,
|
||||
+ .search-result-category,
|
||||
+ .search-result-user,
|
||||
+ .search-result-group {
|
||||
@include separator;
|
||||
}
|
||||
|
||||
.search-menu-recent {
|
||||
@include separator;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-category {
|
||||
.badge-category__wrapper {
|
||||
font-size: var(--font-0);
|
||||
|
||||
.badge-category {
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-topic,
|
||||
.search-result-post {
|
||||
.search-link {
|
||||
padding: 0.5em;
|
||||
.list {
|
||||
min-width: 100px;
|
||||
|
||||
.search-link {
|
||||
padding-block: 0.5em;
|
||||
}
|
||||
|
||||
.first-line {
|
||||
display: block;
|
||||
line-height: var(--line-height-medium);
|
||||
}
|
||||
|
||||
.second-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0 0.5em;
|
||||
}
|
||||
|
||||
.item {
|
||||
.blurb {
|
||||
// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
color: var(--primary-high);
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-group .group-result {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
|
||||
&:not(.--with-flair) {
|
||||
svg {
|
||||
padding: 0.36em; // matching avatar-flair width
|
||||
background: var(--primary-200);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.avatar-flair {
|
||||
width: 1.62em;
|
||||
height: 1.6em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--primary-200);
|
||||
color: var(--primary-medium);
|
||||
border-radius: 50%;
|
||||
|
||||
&.avatar-flair-image {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-down-2);
|
||||
color: currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
.group-names {
|
||||
@include user-item-flex;
|
||||
min-width: 0;
|
||||
|
||||
.name,
|
||||
.slug {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
&.--group-with-slug {
|
||||
.name {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-category,
|
||||
.search-result-tag {
|
||||
+ .search-result-user,
|
||||
+ .search-result-group {
|
||||
@include separator;
|
||||
}
|
||||
}
|
||||
|
||||
.user-titles {
|
||||
@include user-item-flex;
|
||||
|
||||
.name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.username,
|
||||
.name,
|
||||
.custom-field {
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
}
|
||||
|
||||
.custom-field {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
}
|
||||
|
||||
.user-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.search-result-user .user-result img.avatar,
|
||||
.search-item-user {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
gap: 0.5em;
|
||||
|
||||
img.avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-suffix {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.extra-hint {
|
||||
color: var(--primary-low-mid);
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.search-item-slug {
|
||||
overflow-wrap: anywhere;
|
||||
white-space: wrap;
|
||||
min-width: 0;
|
||||
|
||||
.keyword {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.badge-wrapper {
|
||||
font-size: var(--font-0);
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-random-quick-tip {
|
||||
padding: max(0.5rem, 0.5em) 1rem;
|
||||
font-size: var(--font-down-2);
|
||||
color: var(--primary-medium);
|
||||
|
||||
.tip-label {
|
||||
background-color: rgba(var(--tertiary-rgb), 0.1);
|
||||
margin-right: 0.25em;
|
||||
padding: 2px 4px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
|
||||
&.tip-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searching {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.spinner {
|
||||
width: 0.75rem; // 12px
|
||||
height: 0.75rem; // 12px
|
||||
border-width: 0.125rem; // 2px
|
||||
margin: 0 $hpad 0 0;
|
||||
}
|
||||
|
||||
.show-advanced-search,
|
||||
.clear-search {
|
||||
.d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
.d-icon {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: $search-result-element-padding;
|
||||
}
|
||||
|
||||
@ -55,10 +55,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.browser-search-tip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
.search-term__input {
|
||||
min-width: 0;
|
||||
@ -93,7 +89,9 @@
|
||||
color: var(--primary-medium);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
left: calc(
|
||||
1rem - 0.65em
|
||||
); // to align with result panel, minus padding of search icon btn
|
||||
|
||||
.rtl & {
|
||||
right: 0;
|
||||
@ -112,11 +110,11 @@
|
||||
}
|
||||
|
||||
+ .search-menu-container .search-input {
|
||||
padding-left: 1.75em;
|
||||
padding-left: 2em;
|
||||
|
||||
.rtl & {
|
||||
padding-left: unset;
|
||||
padding-right: 1.75em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,14 +129,10 @@
|
||||
border-radius: var(--d-border-radius);
|
||||
background: var(--secondary);
|
||||
z-index: 9;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
|
||||
@include float-down;
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -89,6 +89,7 @@ $z-layers: (
|
||||
"overlay": 1200,
|
||||
),
|
||||
"fullscreen": 1150,
|
||||
"mobile-header": 1150,
|
||||
"mobile-composer": 1100,
|
||||
"ipad-header-nav": 1020,
|
||||
"header": 1000,
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
.floating-search-input {
|
||||
width: 100%;
|
||||
max-width: 550px; // half of defualt d-max-width
|
||||
max-width: 550px; // half of default d-max-width
|
||||
|
||||
.search-banner {
|
||||
height: 100%;
|
||||
@ -80,10 +80,9 @@
|
||||
|
||||
.search-icon {
|
||||
background: transparent;
|
||||
padding: 0.25em;
|
||||
pointer-events: none;
|
||||
color: var(--header_primary-medium);
|
||||
margin-left: 0.3em;
|
||||
margin-left: calc(1rem - 0.65em);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
@ -97,7 +96,7 @@
|
||||
|
||||
.search-input {
|
||||
display: flex;
|
||||
padding: 0 0 0 1.5em;
|
||||
padding: 0 0 0 2em;
|
||||
border-radius: var(--d-input-border-radius);
|
||||
|
||||
.search-term__input {
|
||||
@ -118,7 +117,6 @@
|
||||
display: none;
|
||||
}
|
||||
background: var(--secondary);
|
||||
padding: 0.5em;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
@ -3050,7 +3050,7 @@ en:
|
||||
in_messages_tooltip: "switch to searching regular topics"
|
||||
in_topics_posts: "in all topics and posts"
|
||||
enter_hint: "or press Enter"
|
||||
mobile_enter_hint: "or tap Search icon"
|
||||
mobile_enter_hint: "or tap Search"
|
||||
in_posts_by: "in posts by %{username}"
|
||||
recent: "Recent Searches"
|
||||
clear_recent: "Clear Recent Searches"
|
||||
|
||||
Reference in New Issue
Block a user