Change premium badge position on channel page (#1677)

This commit is contained in:
Rave | 図書館猫 2022-06-13 12:53:58 +02:00 committed by GitHub
parent 6690880241
commit f755423361
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 1 deletions

View file

@ -6,6 +6,7 @@ import {
selectCurrentChannelPage, selectCurrentChannelPage,
selectClaimForUri, selectClaimForUri,
makeSelectClaimIsPending, makeSelectClaimIsPending,
selectOdyseeMembershipForChannelId,
} from 'redux/selectors/claims'; } from 'redux/selectors/claims';
import { selectMyUnpublishedCollections } from 'redux/selectors/collections'; import { selectMyUnpublishedCollections } from 'redux/selectors/collections';
import { selectBlacklistedOutpointMap, doFetchSubCount, selectSubCountForUri } from 'lbryinc'; import { selectBlacklistedOutpointMap, doFetchSubCount, selectSubCountForUri } from 'lbryinc';
@ -37,6 +38,7 @@ const select = (state, props) => {
mutedChannels: selectMutedChannels(state), mutedChannels: selectMutedChannels(state),
unpublishedCollections: selectMyUnpublishedCollections(state), unpublishedCollections: selectMyUnpublishedCollections(state),
lang: selectLanguage(state), lang: selectLanguage(state),
odyseeMembership: selectOdyseeMembershipForChannelId(state, claim.claim_id),
}; };
}; };

View file

@ -28,6 +28,7 @@ import TruncatedText from 'component/common/truncated-text';
import PlaceholderTx from 'static/img/placeholderTx.gif'; import PlaceholderTx from 'static/img/placeholderTx.gif';
import Tooltip from 'component/common/tooltip'; import Tooltip from 'component/common/tooltip';
import { toCompactNotation } from 'util/string'; import { toCompactNotation } from 'util/string';
import PremiumBadge from 'component/common/premium-badge';
export const PAGE_VIEW_QUERY = `view`; export const PAGE_VIEW_QUERY = `view`;
export const DISCUSSION_PAGE = `discussion`; export const DISCUSSION_PAGE = `discussion`;
@ -60,6 +61,7 @@ type Props = {
mutedChannels: Array<string>, mutedChannels: Array<string>,
unpublishedCollections: CollectionGroup, unpublishedCollections: CollectionGroup,
lang: string, lang: string,
odyseeMembership: string,
}; };
function ChannelPage(props: Props) { function ChannelPage(props: Props) {
@ -80,6 +82,7 @@ function ChannelPage(props: Props) {
mutedChannels, mutedChannels,
unpublishedCollections, unpublishedCollections,
lang, lang,
odyseeMembership,
} = props; } = props;
const { const {
push, push,
@ -241,7 +244,6 @@ function ChannelPage(props: Props) {
className="channel__thumbnail--channel-page" className="channel__thumbnail--channel-page"
uri={uri} uri={uri}
allowGifs allowGifs
showMemberBadge
isChannel isChannel
hideStakedIndicator hideStakedIndicator
/> />
@ -249,6 +251,7 @@ function ChannelPage(props: Props) {
<TruncatedText lines={2} showTooltip> <TruncatedText lines={2} showTooltip>
{title || (channelName && '@' + channelName)} {title || (channelName && '@' + channelName)}
</TruncatedText> </TruncatedText>
<PremiumBadge membership={odyseeMembership} />
</h1> </h1>
<div className="channel__meta"> <div className="channel__meta">
<Tooltip title={formattedSubCount} followCursor placement="top"> <Tooltip title={formattedSubCount} followCursor placement="top">

View file

@ -393,6 +393,12 @@ $actions-z-index: 2;
} }
} }
.channel__title {
.comment__badge {
margin-left: var(--spacing-s);
}
}
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
padding-left: var(--spacing-m); padding-left: var(--spacing-m);
margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l)); margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));