update file layout and more fixes :)

This commit is contained in:
btzr-io 2017-10-09 22:53:50 -06:00
parent 3c31ad69ea
commit 2039ab7f21
4 changed files with 34 additions and 35 deletions

View file

@ -80,7 +80,7 @@ class Video extends React.PureComponent {
loadStatusMessage = __("Downloading stream... not long left now!");
}
let klasses = ["card"];
let klasses = [];
klasses.push(obscureNsfw ? "video--obscured " : "");
if (isLoading || isDownloading) klasses.push("video-embedded", "video");
if (mediaType === "video") {

View file

@ -63,44 +63,42 @@ class FilePage extends React.PureComponent {
mediaType === "audio";
return (
<div>
<section className="show-page-media">
<section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
<div className="show-page-media">
{isPlayable
? <Video className="video-embedded" uri={uri} />
: metadata && metadata.thumbnail
? <Thumbnail src={metadata.thumbnail} />
: <Thumbnail />}
</section>
<section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
<div className="card__inner">
{(!tab || tab === "details") &&
<div>
{" "} {" "}
<div className="card__title-identity">
{!fileInfo || fileInfo.written_bytes <= 0
? <span style={{ float: "right" }}>
<FilePrice uri={lbryuri.normalize(uri)} />
{isRewardContent &&
<span>{" "}<Icon icon={icons.FEATURED} /></span>}
</span>
: null}
<h1>{title}</h1>
<div className="card__subtitle">
<UriIndicator uri={uri} link={true} />
<span className="divider__vertical">&bull;</span>
<span>
Published on{" "}
<DateTime block={height} show={DateTime.SHOW_DATE} />
</div>
<div className="card__inner">
{(!tab || tab === "details") &&
<div>
{" "} {" "}
<div className="card__title-identity">
{!fileInfo || fileInfo.written_bytes <= 0
? <span style={{ float: "right" }}>
<FilePrice uri={lbryuri.normalize(uri)} />
{isRewardContent &&
<span>{" "}<Icon icon={icons.FEATURED} /></span>}
</span>
</div>
: null}
<h1>{title}</h1>
<div className="card__subtitle">
<UriIndicator uri={uri} link={true} />
<span className="divider__vertical">&bull;</span>
<span>
Published on{" "}
<DateTime block={height} show={DateTime.SHOW_DATE} />
</span>
</div>
<FileDetails uri={uri} />
</div>}
{tab === "tip" &&
<WalletSendTip claim_id={claim.claim_id} uri={uri} />}
</div>
</section>
</div>
</div>
<FileDetails uri={uri} />
</div>}
{tab === "tip" &&
<WalletSendTip claim_id={claim.claim_id} uri={uri} />}
</div>
</section>
);
}
}

View file

@ -44,7 +44,7 @@
text-overflow: ellipsis;
}
.card__title-identity {
margin: $spacing-vertical * 1/2 0;
margin: 16px 0;
}
.card__actions {
margin-top: var(--card-margin);

View file

@ -1,6 +1,7 @@
.show-page-media {
text-align: center;
margin-bottom: $spacing-vertical;
margin-bottom: 16px;
overflow: auto;
img {
max-width: 100%;
}
@ -9,4 +10,4 @@
width: 100%;
min-height: 500px;
}
}
}