fix channel page style
This commit is contained in:
Sean Yesmunt
parent
1bff9845ae
commit
a31178318a
5 changed files with 102 additions and 106 deletions
|
|
@ -22,7 +22,7 @@ function ChannelContent(props: Props) {
|
|||
const showAbout = description || email || website;
|
||||
|
||||
return (
|
||||
<section className="card--section">
|
||||
<section className="section">
|
||||
{!showAbout && <h2 className="main--empty empty">{__('Nothing here yet')}</h2>}
|
||||
{showAbout && (
|
||||
<Fragment>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ type Props = {
|
|||
function ChannelDiscussion(props: Props) {
|
||||
const uri = props.uri;
|
||||
return (
|
||||
<div className="card--section">
|
||||
<div className="">
|
||||
<section className="section">
|
||||
<CommentCreate uri={uri} />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -165,110 +165,104 @@ function ChannelPage(props: Props) {
|
|||
<Page>
|
||||
<ClaimUri uri={uri} />
|
||||
|
||||
<div className="card">
|
||||
<header className="channel-cover">
|
||||
<div className="channel__quick-actions">
|
||||
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} isChannel />}
|
||||
{!channelIsMine && (
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.TIP}
|
||||
label={__('Tip')}
|
||||
title={__('Send a tip to this creator')}
|
||||
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
|
||||
/>
|
||||
)}
|
||||
{(channelIsMine || (!channelIsMine && supportOption)) && (
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.SUPPORT}
|
||||
label={__('Support')}
|
||||
title={__('Support this creator')}
|
||||
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
|
||||
/>
|
||||
)}
|
||||
{!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
|
||||
{!isSubscribed && <BlockButton uri={permanentUrl} />}
|
||||
</div>
|
||||
{!editing && cover && (
|
||||
<img
|
||||
className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
|
||||
src={cover}
|
||||
<header className="channel-cover">
|
||||
<div className="channel__quick-actions">
|
||||
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} isChannel />}
|
||||
{!channelIsMine && (
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.TIP}
|
||||
label={__('Tip')}
|
||||
title={__('Send a tip to this creator')}
|
||||
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
|
||||
/>
|
||||
)}
|
||||
{editing && <img className="channel-cover__custom" src={coverPreview} />}
|
||||
{/* component that offers select/upload */}
|
||||
<div className="channel__primary-info">
|
||||
{!editing && (
|
||||
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
|
||||
)}
|
||||
{editing && (
|
||||
<ChannelThumbnail
|
||||
className="channel__thumbnail--channel-page"
|
||||
uri={uri}
|
||||
thumbnailPreview={thumbPreview}
|
||||
/>
|
||||
)}
|
||||
<h1 className="channel__title">{title || '@' + channelName}</h1>
|
||||
{channelIsMine && !editing && (
|
||||
<Button button="alt" title={__('Edit')} onClick={() => setEditing(!editing)} icon={ICONS.EDIT} />
|
||||
)}
|
||||
<div className="channel__meta">
|
||||
<span>
|
||||
{subCount} {subCount !== 1 ? __('Followers') : __('Follower')}
|
||||
<HelpLink href="https://lbry.com/faq/views" />
|
||||
</span>
|
||||
</div>
|
||||
{(channelIsMine || (!channelIsMine && supportOption)) && (
|
||||
<Button
|
||||
button="alt"
|
||||
icon={ICONS.SUPPORT}
|
||||
label={__('Support')}
|
||||
title={__('Support this creator')}
|
||||
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
|
||||
/>
|
||||
)}
|
||||
{!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
|
||||
{!isSubscribed && <BlockButton uri={permanentUrl} />}
|
||||
</div>
|
||||
{!editing && cover && (
|
||||
<img
|
||||
className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
|
||||
src={cover}
|
||||
/>
|
||||
)}
|
||||
{editing && <img className="channel-cover__custom" src={coverPreview} />}
|
||||
{/* component that offers select/upload */}
|
||||
<div className="channel__primary-info">
|
||||
{!editing && (
|
||||
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
|
||||
)}
|
||||
{editing && (
|
||||
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} thumbnailPreview={thumbPreview} />
|
||||
)}
|
||||
<h1 className="channel__title">{title || '@' + channelName}</h1>
|
||||
{channelIsMine && !editing && (
|
||||
<Button button="alt" title={__('Edit')} onClick={() => setEditing(!editing)} icon={ICONS.EDIT} />
|
||||
)}
|
||||
<div className="channel__meta">
|
||||
<span>
|
||||
{subCount} {subCount !== 1 ? __('Followers') : __('Follower')}
|
||||
<HelpLink href="https://lbry.com/faq/views" />
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
<Tabs onChange={onTabChange} index={tabIndex}>
|
||||
<TabList className="tabs__list--channel-page">
|
||||
<Tab disabled={editing}>{__('Content')}</Tab>
|
||||
<Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
|
||||
<Tab disabled={editing}>{__('Comments')}</Tab>
|
||||
{/* only render searchbar on content page (tab index 0 === content page) */}
|
||||
{tabIndex === 0 ? (
|
||||
<Form onSubmit={handleSearch} className="wunderbar--inline">
|
||||
<Icon icon={ICONS.SEARCH} />
|
||||
<FormField
|
||||
className="wunderbar__input"
|
||||
value={searchQuery}
|
||||
onChange={handleInputChange}
|
||||
type="text"
|
||||
placeholder={__('Search')}
|
||||
/>
|
||||
</Form>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</TabList>
|
||||
</div>
|
||||
</header>
|
||||
<Tabs onChange={onTabChange} index={tabIndex}>
|
||||
<TabList className="tabs__list--channel-page">
|
||||
<Tab disabled={editing}>{__('Content')}</Tab>
|
||||
<Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
|
||||
<Tab disabled={editing}>{__('Comments')}</Tab>
|
||||
{/* only render searchbar on content page (tab index 0 === content page) */}
|
||||
{tabIndex === 0 ? (
|
||||
<Form onSubmit={handleSearch} className="wunderbar--inline">
|
||||
<Icon icon={ICONS.SEARCH} />
|
||||
<FormField
|
||||
className="wunderbar__input"
|
||||
value={searchQuery}
|
||||
onChange={handleInputChange}
|
||||
type="text"
|
||||
placeholder={__('Search')}
|
||||
/>
|
||||
</Form>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</TabList>
|
||||
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
{searchResults ? (
|
||||
searchResults.map(url => <ClaimPreview key={url} uri={url} />)
|
||||
) : (
|
||||
<ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
|
||||
)}
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
{editing ? (
|
||||
<ChannelEdit
|
||||
uri={uri}
|
||||
setEditing={setEditing}
|
||||
updateThumb={v => setThumbPreview(v)}
|
||||
updateCover={v => setCoverPreview(v)}
|
||||
/>
|
||||
) : (
|
||||
<ChannelAbout uri={uri} />
|
||||
)}
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<ChannelDiscussion uri={uri} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</div>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
{searchResults ? (
|
||||
searchResults.map(url => <ClaimPreview key={url} uri={url} />)
|
||||
) : (
|
||||
<ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
|
||||
)}
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
{editing ? (
|
||||
<ChannelEdit
|
||||
uri={uri}
|
||||
setEditing={setEditing}
|
||||
updateThumb={v => setThumbPreview(v)}
|
||||
updateCover={v => setCoverPreview(v)}
|
||||
/>
|
||||
) : (
|
||||
<ChannelAbout uri={uri} />
|
||||
)}
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<ChannelDiscussion uri={uri} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ $metadata-z-index: 1;
|
|||
align-items: flex-end;
|
||||
box-sizing: content-box;
|
||||
color: #fff;
|
||||
border-top-left-radius: var(--card-radius);
|
||||
border-top-right-radius: var(--card-radius);
|
||||
|
||||
.button {
|
||||
color: #fff;
|
||||
|
|
@ -28,6 +26,8 @@ $metadata-z-index: 1;
|
|||
.channel-cover__custom {
|
||||
height: var(--cover-photo-height);
|
||||
width: 100%;
|
||||
border-top-left-radius: var(--card-radius);
|
||||
border-top-right-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
.channel-thumbnail {
|
||||
|
|
@ -47,7 +47,6 @@ $metadata-z-index: 1;
|
|||
position: absolute;
|
||||
height: var(--channel-thumbnail-width);
|
||||
width: var(--channel-thumbnail-width);
|
||||
box-shadow: 0px 8px 40px -3px #000;
|
||||
left: var(--spacing-medium);
|
||||
top: 4rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,10 @@
|
|||
.tabs__list--channel-page {
|
||||
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
|
||||
padding-right: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-large);
|
||||
height: 4rem;
|
||||
border-bottom-left-radius: var(--card-radius);
|
||||
border-bottom-right-radius: var(--card-radius);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding-left: var(--spacing-medium);
|
||||
|
|
@ -47,7 +50,7 @@
|
|||
|
||||
.tab__divider {
|
||||
position: absolute;
|
||||
margin-top: calc(var(--tab-indicator-size) * -1);
|
||||
margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-large));
|
||||
}
|
||||
|
||||
.tab::after,
|
||||
|
|
|
|||
Loading…
Reference in a new issue