Merge pull request #632 from lbryio/multisite-styling
Osprey landing page and styling
This commit is contained in:
commit
8e5cb3b3d4
6 changed files with 75 additions and 76 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -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) &&
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue