diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/asset-preview/_asset-preview.scss index 9b4043cc..5ad362d7 100644 --- a/client/scss/asset-preview/_asset-preview.scss +++ b/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; } diff --git a/client/scss/channel-claims-display/_channel-claims-display.scss b/client/scss/channel-claims-display/_channel-claims-display.scss index 8d907e9b..e605dde8 100644 --- a/client/scss/channel-claims-display/_channel-claims-display.scss +++ b/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; } } diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx index be09c200..17a26f1f 100644 --- a/client/src/components/AssetPreview/index.jsx +++ b/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 ( - + {(() => { switch (contentType) { case 'image/jpeg': @@ -13,19 +13,25 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c case 'image/png': case 'image/gif': return ( - {name} +
+ {name} +

{title}

+
); case 'video/mp4': return ( - {name} +
+ {name} +

{title}

+
); default: return ( diff --git a/client/src/containers/ChannelClaimsDisplay/view.jsx b/client/src/containers/ChannelClaimsDisplay/view.jsx index 83cfad9e..1f29b65b 100644 --- a/client/src/containers/ChannelClaimsDisplay/view.jsx +++ b/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 ( -
+
- {groupedClaimsList.map((group, index) => { - const itemA = group[0]; - const itemB = group[1]; - const itemC = group[2]; - const itemD = group[3]; - return ( - - ) - } - columnB={ - itemB && ( - - ) - } - columnC={ - itemC && ( - - ) - } - columnD={ - itemD && ( - - ) - } +
+ {claims.map(claim => ( + - ); - })} + ))} +
{(currentPage > 1) && diff --git a/client/src/pages/ShowChannel/index.js b/client/src/pages/ShowChannel/index.js index 120f75b4..e741d3da 100644 --- a/client/src/pages/ShowChannel/index.js +++ b/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, }; }; diff --git a/client/src/pages/ShowChannel/view.jsx b/client/src/pages/ShowChannel/view.jsx index 1805d3da..34a23b3a 100644 --- a/client/src/pages/ShowChannel/view.jsx +++ b/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 && ( + + + + )} - + - ); }