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;
function getMeta() {
if (liveSection === SECTION.MORE && liveTilesOverLimit) {
return (
<Button
label={__('Show less livestreams')}
button="link"
iconRight={ICONS.UP}
className="claim-grid__title--secondary"
onClick={() => setLiveSection(SECTION.LESS)}
/>
);
}
return (
<>
{!dynamicRouteProps ? (
<a
className="help"
href="https://odysee.com/@OdyseeHelp:b/trending:50"
title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })}
>
<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 ? (
<a
className="help"
href="https://odysee.com/@OdyseeHelp:b/trending:50"
title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })}
>
<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}
/>
)
{liveSection === SECTION.MORE && liveTilesOverLimit && (
<div className="livestream-list--view-more">
<Button
label={__('Show less livestreams')}
button="link"
iconRight={ICONS.UP}
className="claim-grid__title--secondary"
onClick={() => setLiveSection(SECTION.LESS)}
/>
</div>
)}
</>
);
}

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

@ -171,6 +171,21 @@
.livestream-list--view-more {
display: flex;
align-items: flex-end;
margin-bottom: var(--spacing-m);
margin-left: var(--spacing-s);
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;
}
}
}
}
}