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!"); loadStatusMessage = __("Downloading stream... not long left now!");
} }
let klasses = ["card"]; let klasses = [];
klasses.push(obscureNsfw ? "video--obscured " : ""); klasses.push(obscureNsfw ? "video--obscured " : "");
if (isLoading || isDownloading) klasses.push("video-embedded", "video"); if (isLoading || isDownloading) klasses.push("video-embedded", "video");
if (mediaType === "video") { if (mediaType === "video") {

View file

@ -63,44 +63,42 @@ class FilePage extends React.PureComponent {
mediaType === "audio"; mediaType === "audio";
return ( return (
<div> <section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
<section className="show-page-media"> <div className="show-page-media">
{isPlayable {isPlayable
? <Video className="video-embedded" uri={uri} /> ? <Video className="video-embedded" uri={uri} />
: metadata && metadata.thumbnail : metadata && metadata.thumbnail
? <Thumbnail src={metadata.thumbnail} /> ? <Thumbnail src={metadata.thumbnail} />
: <Thumbnail />} : <Thumbnail />}
</section> </div>
<section className={"card " + (obscureNsfw ? "card--obscured " : "")}> <div className="card__inner">
<div className="card__inner"> {(!tab || tab === "details") &&
{(!tab || tab === "details") && <div>
<div> {" "} {" "}
{" "} {" "} <div className="card__title-identity">
<div className="card__title-identity"> {!fileInfo || fileInfo.written_bytes <= 0
{!fileInfo || fileInfo.written_bytes <= 0 ? <span style={{ float: "right" }}>
? <span style={{ float: "right" }}> <FilePrice uri={lbryuri.normalize(uri)} />
<FilePrice uri={lbryuri.normalize(uri)} /> {isRewardContent &&
{isRewardContent && <span>{" "}<Icon icon={icons.FEATURED} /></span>}
<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} />
</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> </div>
<FileDetails uri={uri} /> </div>
</div>} <FileDetails uri={uri} />
{tab === "tip" && </div>}
<WalletSendTip claim_id={claim.claim_id} uri={uri} />} {tab === "tip" &&
</div> <WalletSendTip claim_id={claim.claim_id} uri={uri} />}
</section> </div>
</div> </section>
); );
} }
} }

View file

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

View file

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