LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

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>

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

@ -165,7 +165,6 @@ 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 />}
@ -203,11 +202,7 @@ function ChannelPage(props: Props) {
<ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} /> <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
)} )}
{editing && ( {editing && (
<ChannelThumbnail <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} thumbnailPreview={thumbPreview} />
className="channel__thumbnail--channel-page"
uri={uri}
thumbnailPreview={thumbPreview}
/>
)} )}
<h1 className="channel__title">{title || '@' + channelName}</h1> <h1 className="channel__title">{title || '@' + channelName}</h1>
{channelIsMine && !editing && ( {channelIsMine && !editing && (
@ -268,7 +263,6 @@ function ChannelPage(props: Props) {
</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,