fix channel page style

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

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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;

View file

@ -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,