LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-03 12:30:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix channel page style

Browse source
This commit is contained in:
Sean Yesmunt 2020-01-03 11:36:15 -05:00
parent 1bff9845ae
commit a31178318a
5 changed files with 102 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/channelAbout/view.jsx
View file

@ -22,7 +22,7 @@ function ChannelContent(props: Props) {
const showAbout = description || email || website; const showAbout = description || email || website;
return ( return (
<section className="card--section"> <section className="section">
{!showAbout && <h2 className="main--empty empty">{__('Nothing here yet')}</h2>} {!showAbout && <h2 className="main--empty empty">{__('Nothing here yet')}</h2>}
{showAbout && ( {showAbout && (
<Fragment> <Fragment>

2
ui/component/channelDiscussion/view.jsx
View file

@ -10,7 +10,7 @@ type Props = {
function ChannelDiscussion(props: Props) { function ChannelDiscussion(props: Props) {
const uri = props.uri; const uri = props.uri;
return ( return (
<div className="card--section"> <div className="">
<section className="section"> <section className="section">
<CommentCreate uri={uri} /> <CommentCreate uri={uri} />
</section> </section>

194
ui/page/channel/view.jsx
View file

@ -165,110 +165,104 @@ function ChannelPage(props: Props) {
<Page> <Page>
<ClaimUri uri={uri} /> <ClaimUri uri={uri} />
<div className="card"> <header className="channel-cover">
<header className="channel-cover"> <div className="channel__quick-actions">
<div className="channel__quick-actions"> {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} isChannel />}
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} isChannel />} {!channelIsMine && (
{!channelIsMine && ( <Button
<Button button="alt"
button="alt" icon={ICONS.TIP}
icon={ICONS.TIP} label={__('Tip')}
label={__('Tip')} title={__('Send a tip to this creator')}
title={__('Send a tip to this creator')} onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
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}
/> />
)} )}
{editing && <img className="channel-cover__custom" src={coverPreview} />} {(channelIsMine || (!channelIsMine && supportOption)) && (
{/* component that offers select/upload */} <Button
<div className="channel__primary-info"> button="alt"
{!editing && ( icon={ICONS.SUPPORT}
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} /> label={__('Support')}
)} title={__('Support this creator')}
{editing && ( onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
<ChannelThumbnail />
className="channel__thumbnail--channel-page" )}
uri={uri} {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
thumbnailPreview={thumbPreview} {!isSubscribed && <BlockButton uri={permanentUrl} />}
/> </div>
)} {!editing && cover && (
<h1 className="channel__title">{title || '@' + channelName}</h1> <img
{channelIsMine && !editing && ( className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
<Button button="alt" title={__('Edit')} onClick={() => setEditing(!editing)} icon={ICONS.EDIT} /> src={cover}
)} />
<div className="channel__meta"> )}
<span> {editing && <img className="channel-cover__custom" src={coverPreview} />}
{subCount} {subCount !== 1 ? __('Followers') : __('Follower')} {/* component that offers select/upload */}
<HelpLink href="https://lbry.com/faq/views" /> <div className="channel__primary-info">
</span> {!editing && (
</div> <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> </div>
</header> </div>
<Tabs onChange={onTabChange} index={tabIndex}> </header>
<TabList className="tabs__list--channel-page"> <Tabs onChange={onTabChange} index={tabIndex}>
<Tab disabled={editing}>{__('Content')}</Tab> <TabList className="tabs__list--channel-page">
<Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab> <Tab disabled={editing}>{__('Content')}</Tab>
<Tab disabled={editing}>{__('Comments')}</Tab> <Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
{/* only render searchbar on content page (tab index 0 === content page) */} <Tab disabled={editing}>{__('Comments')}</Tab>
{tabIndex === 0 ? ( {/* only render searchbar on content page (tab index 0 === content page) */}
<Form onSubmit={handleSearch} className="wunderbar--inline"> {tabIndex === 0 ? (
<Icon icon={ICONS.SEARCH} /> <Form onSubmit={handleSearch} className="wunderbar--inline">
<FormField <Icon icon={ICONS.SEARCH} />
className="wunderbar__input" <FormField
value={searchQuery} className="wunderbar__input"
onChange={handleInputChange} value={searchQuery}
type="text" onChange={handleInputChange}
placeholder={__('Search')} type="text"
/> placeholder={__('Search')}
</Form> />
) : ( </Form>
<div /> ) : (
)} <div />
</TabList> )}
</TabList>
<TabPanels> <TabPanels>
<TabPanel> <TabPanel>
{searchResults ? ( {searchResults ? (
searchResults.map(url => <ClaimPreview key={url} uri={url} />) searchResults.map(url => <ClaimPreview key={url} uri={url} />)
) : ( ) : (
<ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} /> <ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
)} )}
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
{editing ? ( {editing ? (
<ChannelEdit <ChannelEdit
uri={uri} uri={uri}
setEditing={setEditing} setEditing={setEditing}
updateThumb={v => setThumbPreview(v)} updateThumb={v => setThumbPreview(v)}
updateCover={v => setCoverPreview(v)} updateCover={v => setCoverPreview(v)}
/> />
) : ( ) : (
<ChannelAbout uri={uri} /> <ChannelAbout uri={uri} />
)} )}
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<ChannelDiscussion uri={uri} /> <ChannelDiscussion uri={uri} />
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</Tabs> </Tabs>
</div>
</Page> </Page>
); );
} }

5
ui/scss/component/_channel.scss
View file

@ -8,8 +8,6 @@ $metadata-z-index: 1;
align-items: flex-end; align-items: flex-end;
box-sizing: content-box; box-sizing: content-box;
color: #fff; color: #fff;
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
.button { .button {
color: #fff; color: #fff;
@ -28,6 +26,8 @@ $metadata-z-index: 1;
.channel-cover__custom { .channel-cover__custom {
height: var(--cover-photo-height); height: var(--cover-photo-height);
width: 100%; width: 100%;
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
} }
.channel-thumbnail { .channel-thumbnail {
@ -47,7 +47,6 @@ $metadata-z-index: 1;
position: absolute; position: absolute;
height: var(--channel-thumbnail-width); height: var(--channel-thumbnail-width);
width: var(--channel-thumbnail-width); width: var(--channel-thumbnail-width);
box-shadow: 0px 8px 40px -3px #000;
left: var(--spacing-medium); left: var(--spacing-medium);
top: 4rem; top: 4rem;

5
ui/scss/component/tabs.scss
View file

@ -17,7 +17,10 @@
.tabs__list--channel-page { .tabs__list--channel-page {
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large)); padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
padding-right: var(--spacing-medium); padding-right: var(--spacing-medium);
margin-bottom: var(--spacing-large);
height: 4rem; height: 4rem;
border-bottom-left-radius: var(--card-radius);
border-bottom-right-radius: var(--card-radius);
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
padding-left: var(--spacing-medium); padding-left: var(--spacing-medium);
@ -47,7 +50,7 @@
.tab__divider { .tab__divider {
position: absolute; position: absolute;
margin-top: calc(var(--tab-indicator-size) * -1); margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-large));
} }
.tab::after, .tab::after,