LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Wunderbar: re-arrange static buttons to the top

Browse source 
## Issue
7075 Move "explore tags" to a stable position

## Changes
Move the buttons in the suggestions popup to the top row so that it's position won't be constantly changing depending on the number of results.
This commit is contained in:
infinite-persistence 2021-09-14 14:47:39 +08:00
parent 2899ce5f9a
commit 939d26801a
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/component/wunderbarSuggestions/view.jsx
View file

@ -321,16 +321,6 @@ export default function WunderBarSuggestions(props: Props) {
className={classnames('wunderbar__suggestions', { 'wunderbar__suggestions--mobile': isMobile })}
>
<ComboboxList>
{uriFromQueryIsValid && !noTopSuggestion ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
<div className="wunderbar__label">{__('Search Results')}</div>
{showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? <Spinner type="small" /> : null}
{!showPlaceholder && results
? results.slice(0, isMobile ? 20 : 5).map((uri) => <WunderbarSuggestion key={uri} uri={uri} />)
: null}
{!noBottomLinks && (
<div className="wunderbar__bottom-links">
<ComboboxOption value={term} className="wunderbar__more-results">
@ -344,6 +334,18 @@ export default function WunderBarSuggestions(props: Props) {
</ComboboxOption>
</div>
)}
<hr className="wunderbar__top-separator" />
{uriFromQueryIsValid && !noTopSuggestion ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
<div className="wunderbar__label">{__('Search Results')}</div>
{showPlaceholder && term.length > LIGHTHOUSE_MIN_CHARACTERS ? <Spinner type="small" /> : null}
{!showPlaceholder && results
? results.slice(0, isMobile ? 20 : 5).map((uri) => <WunderbarSuggestion key={uri} uri={uri} />)
: null}
</ComboboxList>
</ComboboxPopover>
)}

11
ui/scss/component/_wunderbar.scss
View file

@ -264,6 +264,17 @@
:first-child {
flex: 1;
}
.wunderbar__more-results {
margin-top: 0;
margin-left: var(--spacing-xxs);
margin-bottom: 0;
@media (min-width: $breakpoint-small) {
margin-top: var(--spacing-xxs);
margin-bottom: 0;
}
}
}
[data-reach-combobox-option] {