fix: file page with large titles
This commit is contained in:
Sean Yesmunt
parent
5a8b31fb1e
commit
c8a6f4cfc7
3 changed files with 96 additions and 115 deletions
|
|
@ -219,92 +219,94 @@ class FilePage extends React.Component<Props> {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid-area--info media__content media__content--large">
|
<div className="columns">
|
||||||
<h1 className="media__title media__title--large">{title}</h1>
|
<div className="grid-area--info">
|
||||||
<div className="media__subtext media__subtext--large">
|
<h1 className="media__title media__title--large">{title}</h1>
|
||||||
<div className="media__subtitle__channel">
|
<div className="media__subtext media__subtext--large">
|
||||||
<UriIndicator uri={uri} link />
|
<div className="media__subtitle__channel">
|
||||||
|
<UriIndicator uri={uri} link />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="media__actions media__actions--between">
|
||||||
<div className="media__actions media__actions--between">
|
<div className="media__action-group--large">
|
||||||
<div className="media__action-group--large">
|
{claimIsMine && (
|
||||||
{claimIsMine && (
|
|
||||||
<Button
|
|
||||||
button="primary"
|
|
||||||
icon={icons.EDIT}
|
|
||||||
label={__('Edit')}
|
|
||||||
navigate="/$/publish"
|
|
||||||
onClick={() => {
|
|
||||||
prepareEdit(claim, editUri, fileInfo);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!claimIsMine && (
|
|
||||||
<React.Fragment>
|
|
||||||
{channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
button="alt"
|
button="primary"
|
||||||
icon={icons.TIP}
|
icon={icons.EDIT}
|
||||||
label={__('Send a tip')}
|
label={__('Edit')}
|
||||||
onClick={() => openModal(MODALS.SEND_TIP, { uri })}
|
navigate="/$/publish"
|
||||||
|
onClick={() => {
|
||||||
|
prepareEdit(claim, editUri, fileInfo);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</React.Fragment>
|
)}
|
||||||
)}
|
{!claimIsMine && (
|
||||||
<Button
|
<React.Fragment>
|
||||||
button="alt"
|
{channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
|
||||||
icon={icons.SHARE}
|
|
||||||
label={__('Share')}
|
<Button
|
||||||
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
|
button="alt"
|
||||||
/>
|
icon={icons.TIP}
|
||||||
|
label={__('Send a tip')}
|
||||||
|
onClick={() => openModal(MODALS.SEND_TIP, { uri })}
|
||||||
|
/>
|
||||||
|
</React.Fragment>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
button="alt"
|
||||||
|
icon={icons.SHARE}
|
||||||
|
label={__('Share')}
|
||||||
|
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="media__action-group--large">
|
||||||
|
<FileDownloadLink uri={uri} />
|
||||||
|
<FileActions
|
||||||
|
uri={uri}
|
||||||
|
claimId={claim.claim_id}
|
||||||
|
showFullscreen={isPreviewType}
|
||||||
|
viewerContainer={this.viewerContainer}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="media__action-group--large">
|
<div className="media__actions media__actions--between">
|
||||||
<FileDownloadLink uri={uri} />
|
<div className="media__subtext media__subtext--large">
|
||||||
<FileActions
|
<DateTime uri={uri} show={DateTime.SHOW_DATE} />
|
||||||
uri={uri}
|
</div>
|
||||||
claimId={claim.claim_id}
|
|
||||||
showFullscreen={isPreviewType}
|
<div className="media__subtext media__subtext--large">
|
||||||
viewerContainer={this.viewerContainer}
|
<VideoDuration uri={uri} />
|
||||||
/>
|
|
||||||
|
{claimIsMine && (
|
||||||
|
<p>
|
||||||
|
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="media__info--large">
|
||||||
|
<ClaimTags uri={uri} type="large" />
|
||||||
|
<FileDetails uri={uri} />
|
||||||
|
|
||||||
|
<div className="media__info-title">{__('Comments')}</div>
|
||||||
|
<CommentCreate uri={uri} />
|
||||||
|
<CommentsList uri={uri} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="grid-area--related">
|
||||||
<div className="media__actions media__actions--between">
|
<div className="media__actions media__actions--between media__actions--nowrap">
|
||||||
<div className="media__subtext media__subtext--large">
|
<ClaimUri uri={uri} />
|
||||||
<DateTime uri={uri} show={DateTime.SHOW_DATE} />
|
<div className="file-properties">
|
||||||
</div>
|
{isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
|
||||||
|
{nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
|
||||||
<div className="media__subtext media__subtext--large">
|
<FilePrice badge uri={normalizeURI(uri)} />
|
||||||
<VideoDuration uri={uri} />
|
</div>
|
||||||
|
|
||||||
{claimIsMine && (
|
|
||||||
<p>
|
|
||||||
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<RecommendedContent uri={uri} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="media__info--large">
|
|
||||||
<ClaimTags uri={uri} type="large" />
|
|
||||||
<FileDetails uri={uri} />
|
|
||||||
|
|
||||||
<div className="media__info-title">{__('Comments')}</div>
|
|
||||||
<CommentCreate uri={uri} />
|
|
||||||
<CommentsList uri={uri} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid-area--related">
|
|
||||||
<div className="media__actions media__actions--between">
|
|
||||||
<ClaimUri uri={uri} />
|
|
||||||
<div className="file-properties">
|
|
||||||
{isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
|
|
||||||
{nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
|
|
||||||
<FilePrice badge uri={normalizeURI(uri)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<RecommendedContent uri={uri} />
|
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -35,41 +35,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-wrapper {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.main--file-page {
|
.main--file-page {
|
||||||
display: grid;
|
position: relative;
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
max-width: calc(100% - var(--side-nav-width) - var(--spacing-main-padding));
|
|
||||||
|
|
||||||
grid-template-areas:
|
|
||||||
'content content'
|
|
||||||
'info related';
|
|
||||||
|
|
||||||
.grid-area--content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-area--content {
|
|
||||||
grid-area: content;
|
|
||||||
}
|
|
||||||
.grid-area--info {
|
.grid-area--info {
|
||||||
grid-area: info;
|
margin-right: var(--spacing-large);
|
||||||
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-area--related {
|
.grid-area--related {
|
||||||
grid-area: related;
|
width: calc(50% - var(--spacing-large));
|
||||||
width: 35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
grid-template-areas:
|
|
||||||
'content'
|
|
||||||
'info'
|
|
||||||
'related';
|
|
||||||
|
|
||||||
.grid-area--related {
|
|
||||||
grid-area: related;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,9 @@
|
||||||
|
|
||||||
.media__title--large {
|
.media__title--large {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
display: inline;
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
line-height: 1.33;
|
line-height: 1.33;
|
||||||
margin-right: var(--spacing-small);
|
margin-right: var(--spacing-small);
|
||||||
|
|
@ -86,6 +88,10 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media__actions--nowrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.media__action-group {
|
.media__action-group {
|
||||||
> *:not(:last-child) {
|
> *:not(:last-child) {
|
||||||
margin-right: var(--spacing-medium);
|
margin-right: var(--spacing-medium);
|
||||||
|
|
@ -110,13 +116,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// M E D I A
|
|
||||||
// C O N T E N T
|
|
||||||
|
|
||||||
.media__content--large {
|
|
||||||
padding-right: var(--spacing-large);
|
|
||||||
}
|
|
||||||
|
|
||||||
// M E D I A
|
// M E D I A
|
||||||
// S U B T E X T
|
// S U B T E X T
|
||||||
//
|
//
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue