diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index acaf49791..5a05aeda4 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -28,7 +28,7 @@ type Props = { hideNoResult: boolean, // don't show the tile if there is no claim at this uri displayHiddenMessage?: boolean, displayDescription?: boolean, - small?: boolean, + size: string, }; class FileTile extends React.PureComponent { @@ -36,6 +36,7 @@ class FileTile extends React.PureComponent { showUri: false, showLocal: false, displayDescription: true, + size: 'regular', }; componentDidMount() { @@ -65,7 +66,7 @@ class FileTile extends React.PureComponent { hideNoResult, displayHiddenMessage, displayDescription, - small, + size, } = this.props; const shouldHide = !claimIsMine && obscureNsfw && metadata && metadata.nsfw; @@ -98,7 +99,8 @@ class FileTile extends React.PureComponent { return !name && hideNoResult ? null : (
{ >
- {isResolvingUri &&
{__('Loading...')}
} + {isResolvingUri && ( +
+ {__('Loading...')} +
+ )} {!isResolvingUri && (
- {title || name} + {title || name}
@@ -133,8 +146,13 @@ class FileTile extends React.PureComponent { {showLocal && isDownloaded && }
{displayDescription && ( -
- {description} +
+ {description}
)} {!name && ( diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx index a713eaa26..5248d3859 100644 --- a/src/renderer/component/recommendedContent/view.jsx +++ b/src/renderer/component/recommendedContent/view.jsx @@ -10,7 +10,7 @@ type Props = { search: string => void, }; -export default class RecommendedContent extends React.PureComponent { +export default class RecommendedContent extends React.PureComponent { constructor() { super(); @@ -37,14 +37,7 @@ export default class RecommendedContent extends React.PureComponent ( { render() { const { query, resultCount } = this.props; return ( - - + + {query && + isURIValid(query) && ( +
+
{`lbry://${query}`}
+ +
+ )} +
{ // /> } - - {isURIValid(query) && ( - -
- {__('Exact URL')} - - - -
- -
- )} - -
{__('These search results are provided by LBRY, Inc.')}
+ +
{__('These search results are provided by LBRY, Inc.')}
+
); } diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 33899285f..74e51a715 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -196,6 +196,7 @@ p { .main--no-padding { padding-left: 0; padding-right: 0; + padding-top: 0; margin: 0; } diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 64fa23cfe..ce5caddf4 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -162,6 +162,8 @@ $large-breakpoint: 1921px; --file-tile-media-width: calc(125px * (16 / 9)); --file-tile-media-height-small: 60px; --file-tile-media-width-small: calc(60px * (16 / 9)); + --file-tile-media-height-large: 200px; + --file-tile-media-width-large: calc(200px * (16 / 9)); --file-page-min-width: 400px; --recommended-content-width: 300px; --recommended-content-width-medium: 400px; diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index 57f107813..c8fcf54b2 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -125,6 +125,10 @@ line-height: 12px; } +.card__title--large { + font-size: 22px; +} + .card__title--file { font-family: 'metropolis-bold'; font-size: 28px; @@ -156,6 +160,11 @@ font-size: 12px; } +.card__subtitle--large { + font-size: 18px; + padding-bottom: $spacing-vertical * 1/3; +} + .card__subtitle-price { padding-top: $spacing-vertical * 1/3; } @@ -241,6 +250,10 @@ font-size: calc(var(--font-size-subtext-multiple) * 0.8em); } +.card__subtext--large { + font-size: calc(var(--font-size-subtext-multiple) * 0.9em); +} + .card__actions { margin-top: $spacing-vertical * 2/3; display: flex; @@ -308,10 +321,6 @@ width: 100%; padding-top: $spacing-vertical; - &:first-of-type { - padding-top: 0; - } - &:last-of-type { padding-bottom: $spacing-vertical * 2/3; } diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss index ee2583015..bff379d27 100644 --- a/src/renderer/scss/component/_file-list.scss +++ b/src/renderer/scss/component/_file-list.scss @@ -12,7 +12,7 @@ } .file-list__header { - margin-top: $spacing-vertical * 4/3; + padding-top: $spacing-vertical * 4/3; font-size: 24px; .tooltip { @@ -49,6 +49,13 @@ } } +.file-tile.file-tile--large { + .card__media { + height: var(--file-tile-media-height-large); + flex: 0 0 var(--file-tile-media-width-large); + } +} + .file-tile__info { display: flex; flex-direction: column; diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index 0bc2b341b..fb61a21e5 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -85,7 +85,17 @@ background-color: var(--color-secondary); } +.search__top { + padding: 0 $spacing-width $spacing-width; + background-color: var(--card-bg); +} + +.search__content { + padding: $spacing-width; +} + .search__results { + margin-top: -$spacing-width; padding-bottom: $spacing-vertical; flex-flow: wrap column; diff --git a/src/renderer/types/claim.js b/src/renderer/types/claim.js index ec060f2e6..1ed0d64c9 100644 --- a/src/renderer/types/claim.js +++ b/src/renderer/types/claim.js @@ -35,7 +35,7 @@ export type Claim = { certificateId: ?string, }, stream: { - metadata: ?Metadata, + metadata: Metadata, }, }, };