fix channel page style
This commit is contained in:
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,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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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