clean up file-card/file-tile
This commit is contained in:
Sean Yesmunt
parent
3c67fa239a
commit
c234e3338f
16 changed files with 334 additions and 438 deletions
|
|
@ -9,13 +9,11 @@ import type { Claim } from 'types/claim';
|
|||
type Props = {
|
||||
uri: string,
|
||||
isResolvingUri: boolean,
|
||||
isSearchResult: boolean,
|
||||
totalItems: number,
|
||||
size: string,
|
||||
claim: ?Claim,
|
||||
resolveUri: string => void,
|
||||
navigate: (string, ?{}) => void,
|
||||
buttonStyle: string,
|
||||
};
|
||||
|
||||
class ChannelTile extends React.PureComponent<Props> {
|
||||
|
|
@ -38,16 +36,7 @@ class ChannelTile extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
claim,
|
||||
navigate,
|
||||
isResolvingUri,
|
||||
isSearchResult,
|
||||
totalItems,
|
||||
uri,
|
||||
size,
|
||||
buttonStyle,
|
||||
} = this.props;
|
||||
const { claim, navigate, isResolvingUri, totalItems, uri, size } = this.props;
|
||||
|
||||
let channelName;
|
||||
let subscriptionUri;
|
||||
|
|
@ -63,9 +52,8 @@ class ChannelTile extends React.PureComponent<Props> {
|
|||
onClick={onClick}
|
||||
role="button"
|
||||
className={classnames('media-tile card--link', {
|
||||
'media--search-result': isSearchResult,
|
||||
'media--small': size === 'small',
|
||||
'media--large': size === 'large',
|
||||
'media-tile--small': size === 'small',
|
||||
'media-tile--large': size === 'large',
|
||||
})}
|
||||
>
|
||||
<CardMedia title={channelName} thumbnail={null} />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import Native from 'native';
|
||||
import classnames from 'classnames';
|
||||
|
||||
type Props = {
|
||||
title: string,
|
||||
subtitle: string | React.Node,
|
||||
type: string,
|
||||
className: ?string,
|
||||
};
|
||||
|
||||
const yrblTypes = {
|
||||
|
|
@ -19,12 +21,12 @@ export default class extends React.PureComponent<Props> {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { title, subtitle, type } = this.props;
|
||||
const { title, subtitle, type, className } = this.props;
|
||||
|
||||
const image = yrblTypes[type];
|
||||
|
||||
return (
|
||||
<div className="yrbl-wrap">
|
||||
<div className={classnames('yrbl-wrap', className)}>
|
||||
<img alt="Friendly gerbil" className="yrbl" src={Native.imagePath(image)} />
|
||||
<div className="card__content">
|
||||
<h2 className="card__title">{title}</h2>
|
||||
|
|
|
|||
|
|
@ -82,12 +82,12 @@ class FileCard extends React.PureComponent<Props> {
|
|||
|
||||
if (!claim && (!pending || placeholder)) {
|
||||
return (
|
||||
<li className="media-card media--placeholder">
|
||||
<div className="media__thumb media__thumb--placeholder" />
|
||||
<div className="media__title media__title--placeholder" />
|
||||
<div className="media__channel media__channel--placeholder" />
|
||||
<div className="media__date media__date--placeholder" />
|
||||
<div className="media__properties media__properties--placeholder" />
|
||||
<li className="media-card media-placeholder">
|
||||
<div className="media__thumb placeholder" />
|
||||
<div className="media__title placeholder" />
|
||||
<div className="media__channel placeholder" />
|
||||
<div className="media__date placeholder" />
|
||||
<div className="media__properties" />
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
|
@ -127,11 +127,9 @@ class FileCard extends React.PureComponent<Props> {
|
|||
<div className="media__title">
|
||||
<TruncatedText text={title} lines={2} />
|
||||
</div>
|
||||
<div className="media__subtext">
|
||||
<div className="media__subtitle">
|
||||
{pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
|
||||
</div>
|
||||
<div className="media__date">
|
||||
<div className="media__subtitle">
|
||||
{pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
|
||||
<div>
|
||||
<DateTime timeAgo block={height} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ class FileListSearch extends React.PureComponent<Props> {
|
|||
<div className="search__results-title">{__('Search Results')}</div>
|
||||
<HiddenNsfwClaims uris={uris} />
|
||||
{!isSearching && fileResults.length ? (
|
||||
fileResults.map(uri => <FileTile isSearchResult key={uri} uri={uri} />)
|
||||
fileResults.map(uri => <FileTile key={uri} uri={uri} />)
|
||||
) : (
|
||||
<NoResults />
|
||||
)}
|
||||
|
|
@ -48,7 +48,7 @@ class FileListSearch extends React.PureComponent<Props> {
|
|||
<section className="search__results-section">
|
||||
<div className="search__results-title">{__('Channels')}</div>
|
||||
{!isSearching && channelResults.length ? (
|
||||
channelResults.map(uri => <ChannelTile isSearchResult key={uri} uri={uri} />)
|
||||
channelResults.map(uri => <ChannelTile key={uri} uri={uri} />)
|
||||
) : (
|
||||
<NoResults />
|
||||
)}
|
||||
|
|
@ -57,9 +57,7 @@ class FileListSearch extends React.PureComponent<Props> {
|
|||
<section className="search__results-section">
|
||||
<div className="search__results-title">{__('Your downloads')}</div>
|
||||
{downloadUris && downloadUris.length ? (
|
||||
downloadUris.map(uri => (
|
||||
<FileTile hideNoResult isSearchResult key={uri} uri={uri} />
|
||||
))
|
||||
downloadUris.map(uri => <FileTile hideNoResult key={uri} uri={uri} />)
|
||||
) : (
|
||||
<NoResults />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import type { Claim, Metadata } from 'types/claim';
|
||||
import * as ICONS from 'constants/icons';
|
||||
import * as React from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
import { normalizeURI, parseURI } from 'lbry-redux';
|
||||
import CardMedia from 'component/cardMedia';
|
||||
import TruncatedText from 'component/common/truncated-text';
|
||||
|
|
@ -11,12 +11,12 @@ import classnames from 'classnames';
|
|||
import FilePrice from 'component/filePrice';
|
||||
import UriIndicator from 'component/uriIndicator';
|
||||
import DateTime from 'component/dateTime';
|
||||
import Yrbl from 'component/common/yrbl';
|
||||
|
||||
type Props = {
|
||||
obscureNsfw: boolean,
|
||||
claimIsMine: boolean,
|
||||
isDownloaded: boolean,
|
||||
isSearchResult: boolean,
|
||||
uri: string,
|
||||
isResolvingUri: boolean,
|
||||
rewardedContentClaimIds: Array<string>,
|
||||
|
|
@ -28,7 +28,6 @@ type Props = {
|
|||
updatePublishForm: ({}) => void,
|
||||
hideNoResult: boolean, // don't show the tile if there is no claim at this uri
|
||||
displayHiddenMessage?: boolean,
|
||||
displayDescription?: boolean,
|
||||
size: string,
|
||||
isSubscribed: boolean,
|
||||
isNew: boolean,
|
||||
|
|
@ -36,7 +35,6 @@ type Props = {
|
|||
|
||||
class FileTile extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
displayDescription: true,
|
||||
size: 'regular',
|
||||
};
|
||||
|
||||
|
|
@ -57,7 +55,6 @@ class FileTile extends React.PureComponent<Props> {
|
|||
claim,
|
||||
uri,
|
||||
rewardedContentClaimIds,
|
||||
size,
|
||||
isNew,
|
||||
claimIsMine,
|
||||
} = this.props;
|
||||
|
|
@ -70,7 +67,7 @@ class FileTile extends React.PureComponent<Props> {
|
|||
return (
|
||||
// TODO: turn this into it's own component and share it with FileCard
|
||||
// The only issue is icon placement on the search page
|
||||
<div className={classnames('media__properties', { card__subtitle: size === 'large' })}>
|
||||
<div className="media__properties">
|
||||
<FilePrice hideFree uri={uri} />
|
||||
{isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
|
||||
{isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
|
||||
|
|
@ -86,7 +83,6 @@ class FileTile extends React.PureComponent<Props> {
|
|||
claim,
|
||||
metadata,
|
||||
isResolvingUri,
|
||||
isSearchResult,
|
||||
navigate,
|
||||
obscureNsfw,
|
||||
claimIsMine,
|
||||
|
|
@ -94,22 +90,21 @@ class FileTile extends React.PureComponent<Props> {
|
|||
updatePublishForm,
|
||||
hideNoResult,
|
||||
displayHiddenMessage,
|
||||
displayDescription,
|
||||
size,
|
||||
} = this.props;
|
||||
|
||||
if (!claim && isResolvingUri) {
|
||||
return (
|
||||
<div
|
||||
className={classnames('media-tile', {
|
||||
large: size === 'large',
|
||||
className={classnames('media-tile media-placeholder', {
|
||||
'media-tile--large': size === 'large',
|
||||
})}
|
||||
>
|
||||
<div className="card__placeholder card__media" />
|
||||
<div className="file-tile__info">
|
||||
<div className="card__placeholder title" />
|
||||
<div className="card__placeholder channel" />
|
||||
<div className="card__placeholder date" />
|
||||
<div className="media__thumb placeholder" />
|
||||
<div className="media__info">
|
||||
<div className="media__title placeholder" />
|
||||
<div className="media__channel placeholder" />
|
||||
<div className="media__subtitle placeholder" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -132,7 +127,6 @@ class FileTile extends React.PureComponent<Props> {
|
|||
const title =
|
||||
isClaimed && metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
|
||||
const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
|
||||
const onClick = () => navigate('/show', { uri });
|
||||
|
||||
let height;
|
||||
let name;
|
||||
|
|
@ -140,61 +134,84 @@ class FileTile extends React.PureComponent<Props> {
|
|||
({ name, height } = claim);
|
||||
}
|
||||
|
||||
const wrapperProps = name
|
||||
? {
|
||||
onClick: () => navigate('/show', { uri }),
|
||||
role: 'button',
|
||||
}
|
||||
: {};
|
||||
|
||||
return !name && hideNoResult ? null : (
|
||||
<section
|
||||
className={classnames('media-tile card--link', {
|
||||
'media--search-result': isSearchResult,
|
||||
'media--small': size === 'small',
|
||||
'media--large': size === 'large',
|
||||
className={classnames('media-tile', {
|
||||
'media-tile--small': size === 'small',
|
||||
'media-tile--large': size === 'large',
|
||||
'card--link': name,
|
||||
})}
|
||||
onClick={onClick}
|
||||
onKeyUp={onClick}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
{...wrapperProps}
|
||||
>
|
||||
<CardMedia title={title || name} thumbnail={thumbnail} />
|
||||
<div className="media__info">
|
||||
<div className="media__title">
|
||||
{(title || name) && (
|
||||
<TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
|
||||
)}
|
||||
</div>
|
||||
<div className="media__subtext">
|
||||
<div className="media__subtitle">
|
||||
<UriIndicator uri={uri} link />
|
||||
</div>
|
||||
<div className="media__subtitle card--space-between">
|
||||
<div className="media__date">
|
||||
<DateTime timeAgo block={height} />
|
||||
{name && (
|
||||
<Fragment>
|
||||
<div className="media__title">
|
||||
{(title || name) && (
|
||||
<TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
|
||||
)}
|
||||
</div>
|
||||
{size !== 'large' && this.renderFileProperties()}
|
||||
</div>
|
||||
</div>
|
||||
{displayDescription && (
|
||||
<div className="media__subtext">
|
||||
|
||||
{size !== 'small' ? (
|
||||
<div className="media__subtext">
|
||||
{__('Published to')} <UriIndicator uri={uri} link />{' '}
|
||||
<DateTime timeAgo block={height} />
|
||||
</div>
|
||||
) : (
|
||||
<Fragment>
|
||||
<div className="media__subtext">
|
||||
<UriIndicator uri={uri} link />
|
||||
</div>
|
||||
<div className="media__subtext">
|
||||
<DateTime timeAgo block={height} />
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
|
||||
{size !== 'small' && (
|
||||
<div className="media__subtitle">
|
||||
<TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
|
||||
</div>
|
||||
)}
|
||||
{size === 'large' && this.renderFileProperties()}
|
||||
|
||||
{this.renderFileProperties()}
|
||||
|
||||
{!name && (
|
||||
<React.Fragment>
|
||||
{__('This location is unused.')}{' '}
|
||||
<Button
|
||||
button="link"
|
||||
label={__('Put something here!')}
|
||||
onClick={e => {
|
||||
// avoid navigating to /show from clicking on the section
|
||||
e.stopPropagation();
|
||||
<Yrbl
|
||||
className="yrbl--search"
|
||||
title={__("You get first dibs! There aren't any files here yet.")}
|
||||
subtitle={
|
||||
<Button
|
||||
button="link"
|
||||
label={
|
||||
<Fragment>
|
||||
{__('Publish something at')} {uri}
|
||||
</Fragment>
|
||||
}
|
||||
onClick={e => {
|
||||
// avoid navigating to /show from clicking on the section
|
||||
e.stopPropagation();
|
||||
|
||||
// strip prefix from the Uri and use that as navigation parameter
|
||||
const { claimName } = parseURI(uri);
|
||||
// strip prefix from the Uri and use that as navigation parameter
|
||||
const { claimName } = parseURI(uri);
|
||||
|
||||
clearPublish(); // to remove any existing publish data
|
||||
updatePublishForm({ name: claimName }); // to populate the name
|
||||
navigate('/publish');
|
||||
}}
|
||||
/>
|
||||
</React.Fragment>
|
||||
clearPublish(); // to remove any existing publish data
|
||||
updatePublishForm({ name: claimName }); // to populate the name
|
||||
navigate('/publish');
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -54,17 +54,11 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
|||
<span>Related</span>
|
||||
{recommendedContent &&
|
||||
recommendedContent.map(recommendedUri => (
|
||||
<FileTile
|
||||
size="small"
|
||||
hideNoResult
|
||||
displayDescription={false}
|
||||
key={recommendedUri}
|
||||
uri={recommendedUri}
|
||||
/>
|
||||
<FileTile hideNoResult size="small" key={recommendedUri} uri={recommendedUri} />
|
||||
))}
|
||||
{recommendedContent && !recommendedContent.length && !isSearching && (
|
||||
<div className="media__subtitle">No related content found</div>
|
||||
)}
|
||||
{recommendedContent &&
|
||||
!recommendedContent.length &&
|
||||
!isSearching && <div className="media__subtitle">No related content found</div>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -182,14 +182,11 @@ class FilePage extends React.Component<Props> {
|
|||
<FilePrice badge uri={normalizeURI(uri)} />
|
||||
</div>
|
||||
|
||||
<div className="media__subtitle media__subtitle--large">
|
||||
<div className="media__subtext media__subtext--large">
|
||||
<div className="media__subtitle__channel">
|
||||
<UriIndicator uri={uri} link />
|
||||
</div>
|
||||
|
||||
<div className="media__subtitle__date media__subtext">
|
||||
{__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} />
|
||||
</div>
|
||||
{__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} />
|
||||
</div>
|
||||
|
||||
<div className="media__actions media__actions--between">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import * as SETTINGS from 'constants/settings';
|
|||
import * as ICONS from 'constants/icons';
|
||||
import * as React from 'react';
|
||||
import { isURIValid, normalizeURI, parseURI } from 'lbry-redux';
|
||||
import { FormField } from 'component/common/form';
|
||||
import FileTile from 'component/fileTile';
|
||||
import ChannelTile from 'component/channelTile';
|
||||
import FileListSearch from 'component/fileListSearch';
|
||||
|
|
@ -20,7 +19,6 @@ type Props = {
|
|||
class SearchPage extends React.PureComponent<Props> {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
(this: any).onShowUnavailableChange = this.onShowUnavailableChange.bind(this);
|
||||
(this: any).onSearchResultCountChange = this.onSearchResultCountChange.bind(this);
|
||||
}
|
||||
|
|
@ -64,35 +62,21 @@ class SearchPage extends React.PureComponent<Props> {
|
|||
</ToolTip>
|
||||
</h1>
|
||||
{isChannel ? (
|
||||
<ChannelTile size="large" uri={uri} />
|
||||
<ChannelTile size="large" isSearchResult uri={uri} />
|
||||
) : (
|
||||
<FileTile size="large" displayHiddenMessage uri={uri} />
|
||||
<FileTile size="large" isSearchResult displayHiddenMessage uri={uri} />
|
||||
)}
|
||||
</header>
|
||||
)}
|
||||
|
||||
{/*
|
||||
Commented out until I figure out what to do with it in my next PR
|
||||
<div>
|
||||
<FormField type="text" value={resultCount} label={__("Returned results")} /
|
||||
</div>
|
||||
*/}
|
||||
|
||||
<div className="search__results-wrapper">
|
||||
<FormField
|
||||
type="number"
|
||||
name="result_count"
|
||||
min={10}
|
||||
max={1000}
|
||||
value={resultCount}
|
||||
onChange={this.onSearchResultCountChange}
|
||||
postfix={__('returned results')}
|
||||
/>
|
||||
{
|
||||
// Removing this for now, it currently doesn't do anything but ideally it would
|
||||
// display content that we don't think is currently available to download
|
||||
// It is like a "display all" setting
|
||||
// <FormField
|
||||
// type="checkbox"
|
||||
// name="show_unavailable"
|
||||
// onChange={this.onShowUnavailableChange}
|
||||
// checked={showUnavailable}
|
||||
// postfix={__('Include unavailable content')}
|
||||
// />
|
||||
}
|
||||
<FileListSearch query={query} />
|
||||
<div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { parseURI } from 'lbry-redux';
|
||||
import BusyIndicator from 'component/common/busy-indicator';
|
||||
import ChannelPage from 'page/channel';
|
||||
import FilePage from 'page/file';
|
||||
|
|
@ -43,14 +42,15 @@ class ShowPage extends React.PureComponent<Props> {
|
|||
innerContent = (
|
||||
<Page notContained>
|
||||
{isResolvingUri && <BusyIndicator message={__('Loading decentralized data...')} />}
|
||||
{claim === null && !isResolvingUri && (
|
||||
<span className="empty">{__("There's nothing at this location.")}</span>
|
||||
)}
|
||||
{claim === null &&
|
||||
!isResolvingUri && (
|
||||
<span className="empty">{__("There's nothing at this location.")}</span>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
} else if (claim && claim.name.length && claim.name[0] === '@') {
|
||||
innerContent = <ChannelPage uri={uri} />;
|
||||
} else if (claim) {
|
||||
} else if (claim && blackListedOutpoints) {
|
||||
let isClaimBlackListed = false;
|
||||
|
||||
for (let i = 0; i < blackListedOutpoints.length; i += 1) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import * as ACTIONS from 'constants/action_types';
|
|||
const getCurrentPath = () => {
|
||||
const { hash } = document.location;
|
||||
if (hash !== '') return hash.replace(/^#/, '');
|
||||
return '/settings';
|
||||
return '/discover';
|
||||
};
|
||||
|
||||
const reducers = {};
|
||||
|
|
|
|||
|
|
@ -95,3 +95,12 @@
|
|||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
.button--uri-indicator {
|
||||
color: rgba($lbry-white, 0.9);
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,79 @@
|
|||
// M E D I A
|
||||
// L A R G E
|
||||
|
||||
.media--large {
|
||||
display: flex;
|
||||
font-size: 1.5rem;
|
||||
|
||||
.media__info {
|
||||
margin-left: var(--spacing-vertical-large);
|
||||
width: calc(100% - 20rem);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
// Titles need adjusted styles at different
|
||||
// screen widths
|
||||
// C A R D
|
||||
.media-card {
|
||||
font-size: 1.2rem;
|
||||
|
||||
.media__title {
|
||||
@media (min-width: 601px) {
|
||||
font-size: 2.15rem;
|
||||
line-height: 1.33;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// P L A C E H O L D E R
|
||||
// T I L E
|
||||
|
||||
.media-tile {
|
||||
display: flex;
|
||||
font-size: 1.5rem;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.media__info {
|
||||
margin-left: var(--spacing-vertical-medium);
|
||||
width: calc(80% - 20rem);
|
||||
}
|
||||
}
|
||||
|
||||
.media-tile--large {
|
||||
font-size: 2rem;
|
||||
|
||||
.media__thumb {
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
.media__info {
|
||||
margin-left: var(--spacing-vertical-large);
|
||||
width: calc(80% - 30rem);
|
||||
}
|
||||
|
||||
.media__subtext {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.media-tile--small {
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.media__info {
|
||||
// padding-left: var(--spacing-vertical-medium);
|
||||
width: calc(100% - 10em);
|
||||
}
|
||||
|
||||
.media__title {
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
.media--placeholder {
|
||||
.media__channel,
|
||||
.media__date,
|
||||
.media__title,
|
||||
.media__properties {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
// Margins for channel name and titles need to be adjusted
|
||||
// for smaller screen widths
|
||||
|
||||
.media__channel,
|
||||
.media__title {
|
||||
@media (min-width: 601px) {
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
}
|
||||
|
||||
.media__channel {
|
||||
width: 70%;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
}
|
||||
|
||||
.media__date {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
width: 100%;
|
||||
bottom: -1.5rem;
|
||||
left: calc(-100% - 1.5rem);
|
||||
position: absolute;
|
||||
padding: 0 var(--spacing-vertical-small);
|
||||
border-radius: 5px;
|
||||
background-color: $lbry-white;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -81,79 +89,42 @@
|
|||
}
|
||||
|
||||
// M E D I A
|
||||
// S E A R C H R E S U L T
|
||||
// T H U M B
|
||||
|
||||
.media--search-result {
|
||||
display: flex;
|
||||
.media__thumb {
|
||||
@include thumbnail;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-vertical-large);
|
||||
&:not(.media__thumb--nsfw) {
|
||||
background-color: $lbry-gray-2;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media__info {
|
||||
margin-left: var(--spacing-vertical-medium);
|
||||
width: calc(100% - 20rem);
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -4.5rem;
|
||||
left: -20rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__subtext {
|
||||
padding-top: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.media__thumb--nsfw {
|
||||
background-color: $lbry-grape-5;
|
||||
background-image: linear-gradient(to bottom right, $lbry-teal-3, $lbry-grape-5 100%);
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// S M A L L
|
||||
// T I T L E
|
||||
|
||||
.media--small {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.media__info {
|
||||
padding-left: var(--spacing-vertical-medium);
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -1.5rem;
|
||||
left: calc(-100% - 1.5rem);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
line-height: 1.33;
|
||||
height: 3rem;
|
||||
}
|
||||
.media__title {
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.media--search-result,
|
||||
.media--small {
|
||||
.media__properties {
|
||||
padding: 0 var(--spacing-vertical-small);
|
||||
border-radius: 5px;
|
||||
background-color: $lbry-white;
|
||||
color: $lbry-black;
|
||||
}
|
||||
.media__title--large {
|
||||
cursor: default;
|
||||
display: inline;
|
||||
font-size: 2rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
|
|
@ -188,13 +159,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// C H A N N E L
|
||||
|
||||
.media__channel--placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// C O N T E N T
|
||||
|
||||
|
|
@ -202,17 +166,6 @@
|
|||
padding-right: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// D A T E
|
||||
|
||||
.media__date {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.media__date--placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// S U B T E X T
|
||||
//
|
||||
|
|
@ -220,27 +173,26 @@
|
|||
//
|
||||
.media__subtext {
|
||||
color: rgba($lbry-black, 0.8);
|
||||
font-size: 0.9em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
color: rgba($lbry-white, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.media__subtext--large {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// S U B T I T L E
|
||||
|
||||
.media__subtitle {
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
|
||||
// Quick fix to fix channel overlapping on the home page. This style shouldn't exist here.
|
||||
.button--uri-indicator {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.media__subtitle--large {
|
||||
|
|
@ -252,7 +204,6 @@
|
|||
}
|
||||
|
||||
.media__subtitle__channel {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -308,28 +259,31 @@
|
|||
// P R O P E R T I E S
|
||||
|
||||
.media__properties {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:empty) {
|
||||
margin-top: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
&:not(.media__properties--large) {
|
||||
height: 2rem;
|
||||
|
||||
.badge {
|
||||
position: relative;
|
||||
top: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media__properties--large {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
&:not(:empty) {
|
||||
height: 2.55rem;
|
||||
margin-top: -1px;
|
||||
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
padding-top: var(--spacing-vertical-small);
|
||||
padding-left: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
.badge {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
|
@ -338,17 +292,6 @@
|
|||
margin-right: var(--spacing-vertical-small);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
height: 2.55rem;
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
padding-top: var(--spacing-vertical-small);
|
||||
padding-left: var(--spacing-vertical-small);
|
||||
}
|
||||
}
|
||||
|
||||
.media__properties--placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
|
|
@ -362,52 +305,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// T H U M B
|
||||
|
||||
.media__thumb {
|
||||
@include thumbnail;
|
||||
|
||||
&:not(.media__thumb--nsfw):not(.media__thumb--placeholder) {
|
||||
background-color: $lbry-gray-2;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media__thumb--nsfw {
|
||||
background-color: $lbry-grape-5;
|
||||
background-image: linear-gradient(to bottom right, $lbry-teal-3, $lbry-grape-5 100%);
|
||||
}
|
||||
|
||||
.media__thumb--placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// T I T L E
|
||||
|
||||
.media__title {
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.media__title--large {
|
||||
cursor: default;
|
||||
display: inline;
|
||||
font-size: 2rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.media__title--placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
// M E D I A
|
||||
// G R O U P
|
||||
|
||||
|
|
@ -458,21 +355,6 @@
|
|||
.media__thumb {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
// Titles need adjusting at different screen widths
|
||||
|
||||
.media__title {
|
||||
@media (min-width: 601px) {
|
||||
font-size: 1.15rem;
|
||||
height: 4rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
height: 3rem;
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-group--list-recommended {
|
||||
|
|
@ -671,35 +553,10 @@
|
|||
width: calc((100% / 6) - 2.25rem);
|
||||
margin-left: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
// May be needed for mobile design
|
||||
// @media (max-width: 600px) {
|
||||
// width: calc((100% / 3) - 3rem);
|
||||
//
|
||||
// &:not(:first-of-type) {
|
||||
// margin-left: var(--spacing-vertical-medium);
|
||||
// }
|
||||
//
|
||||
// &:first-of-type {
|
||||
// margin-left: var(--spacing-vertical-large);
|
||||
// }
|
||||
//
|
||||
// &:last-of-type {
|
||||
// margin-right: var(--spacing-vertical-large);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.media__title {
|
||||
@media (min-width: 601px) {
|
||||
font-size: 1.15rem;
|
||||
height: 4rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
height: 3rem;
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge--alert {
|
||||
background-color: $lbry-red-2;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,66 @@
|
|||
.card--placeholder {
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
background-color: $lbry-gray-3;
|
||||
.media-placeholder {
|
||||
.placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder__channel {
|
||||
width: 70%;
|
||||
height: 1rem;
|
||||
margin-top: var(--spacing-vertical-small);
|
||||
.media-card.media-placeholder {
|
||||
.media__title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.media__title {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.media__channel {
|
||||
width: 70%;
|
||||
height: 0.6em;
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
.media__date {
|
||||
height: 0.6em;
|
||||
width: 30%;
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
height: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder__date {
|
||||
width: 50%;
|
||||
height: 1em;
|
||||
margin-top: var(--spacing-vertical-small);
|
||||
}
|
||||
.media-tile--large.media-placeholder {
|
||||
.media__title,
|
||||
.media__channel,
|
||||
.media__subtitle {
|
||||
// display: block;
|
||||
// padding-left: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
// Individual items we need a placeholder for
|
||||
// FileCard
|
||||
.placeholder__title {
|
||||
height: 3rem;
|
||||
margin-top: var(--spacing-vertical-emall);
|
||||
}
|
||||
.media__thumb {
|
||||
// margin-right: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
// FileTile
|
||||
.placeholder__title--tile {
|
||||
height: 3rem;
|
||||
.media__title {
|
||||
width: 60%;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.media__channel {
|
||||
width: 35%;
|
||||
height: 1.75rem;
|
||||
margin-top: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
.media__subtitle {
|
||||
margin-top: var(--spacing-vertical-large);
|
||||
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,14 @@
|
|||
min-height: 300px;
|
||||
padding: var(--spacing-vertical-large);
|
||||
|
||||
.placeholder {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
|
||||
.media__subtext {
|
||||
color: rgba($lbry-white, 0.6);
|
||||
}
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid rgba($lbry-white, 0.1);
|
||||
|
|
@ -11,6 +19,7 @@
|
|||
}
|
||||
|
||||
.search__title {
|
||||
font-size: 3em;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
|
|
@ -21,17 +30,6 @@
|
|||
> * {
|
||||
margin-left: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
// The search page title size needs tweaking
|
||||
// dependant on screen width
|
||||
|
||||
@media (min-width: 601px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search__results-wrapper {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,15 @@
|
|||
margin: 0 var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
.yrbl--search {
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
|
||||
.yrbl {
|
||||
height: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Get weird here
|
||||
.yrbl--enhanced {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -8540,6 +8540,13 @@ sass-loader@^6.0.7:
|
|||
neo-async "^2.5.0"
|
||||
pify "^3.0.0"
|
||||
|
||||
sass@^1.17.0:
|
||||
version "1.17.0"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.17.0.tgz#e370b9302af121c9eadad5639619127772094ae6"
|
||||
integrity sha512-aFi9RQqrCYkHB2DaLKBBbdUhos1N5o3l1ke9N5JqWzgSPmYwZsdmA+ViPVatUy/RPA21uejgYVUXM7GCh8lcdw==
|
||||
dependencies:
|
||||
chokidar "^2.0.0"
|
||||
|
||||
sax@1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue