Merge pull request #632 from lbryio/multisite-styling

Osprey landing page and styling
This commit is contained in:
Travis Eden 2018-10-15 13:42:35 -04:00 committed by GitHub
commit 8e5cb3b3d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 75 additions and 76 deletions

View file

@ -1,11 +1,20 @@
.asset-preview-image { .asset-preview-image {
width : 100%; width : 100%;
padding: 0px; padding: 0;
margin : 0px margin : 0;
} }
.asset-preview-video { .asset-preview-video {
cursor: pointer; cursor: pointer;
background-color: #ffffff; 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;
} }

View file

@ -1,5 +1,23 @@
.channel-claims-display { .channel-claims-display {
.button--secondary { width: 100%;
margin-right: $secondary-padding; 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;
} }
} }

View file

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

View file

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

View file

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

View file

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