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

WildWest: always show boosting message (#957)

Browse source 
## Ticket
948 wildwest: always show boosting message, move next to category name

## Changes
1. Make "Show less livestreams" share the same space as "Boosted by LBC", instead of only showing either 1.
    - It's a bit troublesome to move it next to the filter without tweaking the generic `ClaimListDiscover`, so I think this would be a good compromise.

2. Fix "show less livestreams" being super tiny in mobile.
    - I think it is caused by some component-specific changes are being applied at the global level (not sure).
This commit is contained in:
infinite-persistence 2022-02-23 20:24:41 -08:00 • committed by GitHub
parent c33f7338c7
commit 2b271730cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
ui/page/discover/view.jsx
View file

@ -89,38 +89,43 @@ function DiscoverPage(props: Props) {
const useDualList = liveSection === SECTION.LESS && liveTilesOverLimit; const useDualList = liveSection === SECTION.LESS && liveTilesOverLimit;
function getMeta() { function getMeta() {
if (liveSection === SECTION.MORE && liveTilesOverLimit) { return (
return ( <>
<Button {!dynamicRouteProps ? (
label={__('Show less livestreams')} <a
button="link" className="help"
iconRight={ICONS.UP} href="https://odysee.com/@OdyseeHelp:b/trending:50"
className="claim-grid__title--secondary" title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })}
onClick={() => setLiveSection(SECTION.LESS)} >
/> <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>Results boosted by %lbc%</I18nMessage>
); </a>
} ) : (
tag &&
!isMobile && (
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
)
)}
return !dynamicRouteProps ? ( {liveSection === SECTION.MORE && liveTilesOverLimit && (
<a <div className="livestream-list--view-more">
className="help" <Button
href="https://odysee.com/@OdyseeHelp:b/trending:50" label={__('Show less livestreams')}
title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })} button="link"
> iconRight={ICONS.UP}
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>Results boosted by %lbc%</I18nMessage> className="claim-grid__title--secondary"
</a> onClick={() => setLiveSection(SECTION.LESS)}
) : ( />
tag && !isMobile && ( </div>
<Button )}
ref={buttonRef} </>
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
)
); );
} }

19
ui/scss/component/_livestream.scss
View file

@ -171,6 +171,21 @@
.livestream-list--view-more { .livestream-list--view-more {
display: flex; display: flex;
align-items: flex-end; margin-left: var(--spacing-s);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-xxxs);
@media (max-width: $breakpoint-small) {
button {
.button__content {
span {
// This is being set in '.section__actions' to '--font-xxsmall',
// causing the button to shrink in mobile.
// I think it is only needed for the mobile comments and shouldn't
// be applied globally?
// Anyway, reverting for this use-case only for now to reduce testing.
font-size: unset;
}
}
}
}
} }