Merge pull request #632 from lbryio/multisite-styling

Osprey landing page and styling

client/scss/asset-preview/_asset-preview.scss

@@ -1,11 +1,20 @@
 .asset-preview-image {
   width  : 100%;
-  padding: 0px;
-  margin : 0px
+  padding: 0;
+  margin : 0;
 }
 
 .asset-preview-video {
   cursor: pointer;
   background-color: #ffffff;
-  width: calc(100% - 12px - 12px - 2px);
+  width: 100%;
+}
+
+h3.list-title {
+  margin: 0;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow: hidden;
+  line-height: 1em;
+  max-height: 2em;
 }

client/scss/channel-claims-display/_channel-claims-display.scss

@@ -1,5 +1,23 @@
 .channel-claims-display {
-  .button--secondary {
-    margin-right: $secondary-padding;
+  width: 100%;
+  display: grid;
+  grid-gap: 16px;
+}
+
+@media (min-width: 1040px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1039px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 767px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr;
   }
 }

client/src/components/AssetPreview/index.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail } }) => {
+const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail, title } }) => {
   const embedUrl = `/${claimId}/${name}.${fileExt}`;
   const showUrl = `/${claimId}/${name}`;
   return (
-    <Link to={showUrl} >
+    <Link to={showUrl} className='asset-preview'>
       {(() => {
         switch (contentType) {
           case 'image/jpeg':
@@ -13,19 +13,25 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
           case 'image/png':
           case 'image/gif':
             return (
-              <img
-                className={'asset-preview-image'}
-                src={embedUrl}
-                alt={name}
-              />
+              <div>
+                <img
+                  className={'asset-preview-image'}
+                  src={embedUrl}
+                  alt={name}
+                />
+                <h3 className='list-title'>{title}</h3>
+              </div>
             );
           case 'video/mp4':
             return (
-              <img
-                className={'asset-preview-video'}
-                src={thumbnail || defaultThumbnail}
-                alt={name}
-              />
+              <div>
+                <img
+                  className={'asset-preview-video'}
+                  src={thumbnail || defaultThumbnail}
+                  alt={name}
+                />
+                <h3 className='list-title'>{title}</h3>
+              </div>
             );
           default:
             return (

client/src/containers/ChannelClaimsDisplay/view.jsx

@@ -27,58 +27,19 @@ class ChannelClaimsDisplay extends React.Component {
   }
   render () {
     const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props;
-    const groupedClaimsList = createGroupedList(claims, 4);
     if (claims.length > 0) {
       return (
-        <div className={'channel-claims-display'}>
+        <div>
           <div>
-            {groupedClaimsList.map((group, index) => {
-              const itemA = group[0];
-              const itemB = group[1];
-              const itemC = group[2];
-              const itemD = group[3];
-              return (
-                <HorizontalQuadSplit
-                  key={`claims-row-${index}`}
-                  columnA={
-                    itemA && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemA}
-                        key={`${itemA.name}-${itemA.id}`}
-                      />
-                    )
-                  }
-                  columnB={
-                    itemB && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemB}
-                        key={`${itemB.name}-${itemB.id}`}
-                      />
-                    )
-                  }
-                  columnC={
-                    itemC && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemC}
-                        key={`${itemC.name}-${itemC.id}`}
-                      />
-                    )
-                  }
-                  columnD={
-                    itemD && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemD}
-                        key={`${itemD.name}-${itemD.id}`}
-                      />
-                    )
-                  }
+            <div className={'channel-claims-display'}>
+              {claims.map(claim => (
+                <AssetPreview
+                  defaultThumbnail={defaultThumbnail}
+                  claimData={claim}
+                  key={`${claim.name}-${claim.id}`}
                 />
-              );
-            })}
+              ))}
+            </div>
           </div>
           <Row>
             {(currentPage > 1) &&

client/src/pages/ShowChannel/index.js

@@ -1,19 +1,20 @@
 import { connect } from 'react-redux';
 import View from './view';
 
-const mapStateToProps = ({ show }) => {
+const mapStateToProps = ({ show, site, channel }) => {
   // select request info
   const requestId = show.request.id;
   // select request
   const previousRequest = show.requestList[requestId] || null;
   // select channel
-  let channel;
+  let thisChannel;
   if (previousRequest) {
     const channelKey = previousRequest.key;
-    channel = show.channelList[channelKey] || null;
+    thisChannel = show.channelList[channelKey] || null;
   }
   return {
-    channel,
+    channel    : thisChannel,
+    homeChannel: site.publishOnlyApproved && !channel.loggedInChannel.name ? `${site.approvedChannels[0].name}:${site.approvedChannels[0].longId}` : null,
   };
 };
 

client/src/pages/ShowChannel/view.jsx

@@ -7,7 +7,7 @@ import Row from '@components/Row';
 
 class ShowChannel extends React.Component {
   render () {
-    const { channel } = this.props;
+    const { channel, homeChannel } = this.props;
     if (channel) {
       const { name, longId, shortId } = channel;
       return (
@@ -15,14 +15,18 @@ class ShowChannel extends React.Component {
           pageTitle={name}
           channel={channel}
         >
+          {!homeChannel && (
+            <Row>
+              <ChannelInfoDisplay
+                name={name}
+                longId={longId}
+                shortId={shortId}
+              />
+            </Row>
+          )}
           <Row>
-            <ChannelInfoDisplay
-              name={name}
-              longId={longId}
-              shortId={shortId}
-            />
+            <ChannelClaimsDisplay />
           </Row>
-          <ChannelClaimsDisplay />
         </PageLayout>
       );
     }