Merge pull request #776 from lbryio/alignment-issues

fix channel name alignment on file page

ui/js/component/fileCard/view.jsx

@@ -59,9 +59,8 @@ class FileCard extends React.PureComponent {
 
     const uri = lbryuri.normalize(this.props.uri);
     const title = metadata && metadata.title ? metadata.title : uri;
-    const thumbnail = metadata && metadata.thumbnail
-      ? metadata.thumbnail
-      : null;
+    const thumbnail =
+      metadata && metadata.thumbnail ? metadata.thumbnail : null;
     const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
     const isRewardContent =
       claim && rewardedContentClaimIds.includes(claim.claim_id);
@@ -96,13 +95,11 @@ class FileCard extends React.PureComponent {
               </div>
               <div className="card__subtitle">
                 <span className="card__indicators">
-                  <FilePrice uri={uri} />
-                  {" "}
-                  {isRewardContent && <Icon icon={icons.FEATURED} />}
-                  {" "}
+                  <FilePrice uri={uri} />{" "}
+                  {isRewardContent && <Icon icon={icons.FEATURED} />}{" "}
                   {fileInfo && <Icon icon={icons.LOCAL} />}
                 </span>
-                <UriIndicator uri={uri} />
+                <UriIndicator uri={uri} smallCard />
               </div>
             </div>
             {/* Test for nizuka's design: should we remove description?

ui/js/component/uriIndicator/view.jsx

@@ -21,7 +21,7 @@ class UriIndicator extends React.PureComponent {
   }
 
   render() {
-    const { claim, link, uri, isResolvingUri } = this.props;
+    const { claim, link, uri, isResolvingUri, smallCard } = this.props;
 
     if (isResolvingUri && !claim) {
       return <span className="empty">Validating...</span>;
@@ -60,7 +60,9 @@ class UriIndicator extends React.PureComponent {
 
     const inner = (
       <span>
-        <span className="channel-name">{channelName}</span>{" "}
+        <span className={`channel-name ${smallCard && "channel-name--small"}`}>
+          {channelName}
+        </span>{" "}
         {!signatureIsValid ? (
           <Icon
             icon={icon}

ui/js/page/file/view.jsx

@@ -65,38 +65,45 @@ class FilePage extends React.PureComponent {
     return (
       <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 />}
+          {isPlayable ? (
+            <Video className="video-embedded" uri={uri} />
+          ) : metadata && metadata.thumbnail ? (
+            <Thumbnail src={metadata.thumbnail} />
+          ) : (
+            <Thumbnail />
+          )}
         </div>
         <div className="card__inner">
-          {(!tab || tab === "details") &&
+          {(!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}
+                {!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">
+                <div className="card__subtitle card--file-subtitle">
                   <UriIndicator uri={uri} link={true} />
-                  <span className="divider__vertical">&bull;</span>
-                  <span>
+                  <span className="card__publish-date">
                     Published on{" "}
                     <DateTime block={height} show={DateTime.SHOW_DATE} />
                   </span>
                 </div>
               </div>
               <FileDetails uri={uri} />
-            </div>}
-          {tab === "tip" &&
-            <WalletSendTip claim_id={claim.claim_id} uri={uri} />}
+            </div>
+          )}
+          {tab === "tip" && (
+            <WalletSendTip claim_id={claim.claim_id} uri={uri} />
+          )}
         </div>
       </section>
     );

ui/scss/component/_card.scss

@@ -194,6 +194,18 @@ $font-size-subtext-multiple: 0.82;
   line-height: calc( var(--font-line-height) * 1 / 0.85);
 }
 
+.card--file-subtitle {
+  display: flex;
+}
+
+// this is too specific
+// it should be a helper class
+// ex. ".m-padding-left"
+// will come back to this during the redesign - sean
+.card__publish-date {
+  padding-left: 20px;
+}
+
 .card-series-submit
 {
   margin-left: auto;

ui/scss/component/_channel-indicator.scss

@@ -1,12 +1,17 @@
 
 .channel-name {
-  width: calc(var(--card-small-width) * 2 / 3);
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis
 }
 
+// this shouldn't know about the card width
+// will come back to this for the redesign - sean
+.channel-name--small {
+  width: calc(var(--card-small-width) * 2 / 3);
+}
+
 .channel-indicator__icon--invalid {
   color: var(--color-error);
 }