Change premium badge position on channel page (#1677)
This commit is contained in:
parent
6690880241
commit
f755423361
3 changed files with 12 additions and 1 deletions
|
@ -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),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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));
|
||||||
|
|
Loading…
Reference in a new issue