From c63118928d9612009bd4770054bfffb1d43607df Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 14 Feb 2019 11:43:48 -0400 Subject: [PATCH] clean up file-card/file-tile --- src/renderer/component/channelTile/view.jsx | 18 +- src/renderer/component/common/yrbl.jsx | 6 +- src/renderer/component/fileCard/view.jsx | 20 +- .../component/fileListSearch/view.jsx | 8 +- src/renderer/component/fileTile/view.jsx | 137 ++++--- .../component/recommendedContent/view.jsx | 14 +- src/renderer/constants/icons.js | 1 + src/renderer/page/file/view.jsx | 4 +- src/renderer/page/search/view.jsx | 34 +- src/renderer/page/show/view.jsx | 10 +- src/renderer/redux/reducers/navigation.js | 5 +- src/renderer/scss/component/_button.scss | 19 + src/renderer/scss/component/_media.scss | 355 ++++++------------ src/renderer/scss/component/_placeholder.scss | 80 ++-- src/renderer/scss/component/_search.scss | 25 +- src/renderer/scss/component/_yrbl.scss | 9 + yarn.lock | 7 + 17 files changed, 334 insertions(+), 418 deletions(-) diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx index 23ff90b35f9..8de51a7b2a2 100644 --- a/src/renderer/component/channelTile/view.jsx +++ b/src/renderer/component/channelTile/view.jsx @@ -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 { @@ -38,16 +36,7 @@ class ChannelTile extends React.PureComponent { } 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 { 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', })} > diff --git a/src/renderer/component/common/yrbl.jsx b/src/renderer/component/common/yrbl.jsx index dded77f12cb..9b05e777549 100644 --- a/src/renderer/component/common/yrbl.jsx +++ b/src/renderer/component/common/yrbl.jsx @@ -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 { }; render() { - const { title, subtitle, type } = this.props; + const { title, subtitle, type, className } = this.props; const image = yrblTypes[type]; return ( -
+
Friendly gerbil

{title}

diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx index e8e17ef2368..62d53644f3e 100644 --- a/src/renderer/component/fileCard/view.jsx +++ b/src/renderer/component/fileCard/view.jsx @@ -82,12 +82,12 @@ class FileCard extends React.PureComponent { if (!claim && (!pending || placeholder)) { return ( -
  • -
    -
    -
    -
    -
    +
  • +
    +
    +
    +
    +
    • ); } @@ -127,11 +127,9 @@ class FileCard extends React.PureComponent {
    -
    -
    - {pending ?
    Pending...
    : } -
    -
    +
    + {pending ?
    Pending...
    : } +
    diff --git a/src/renderer/component/fileListSearch/view.jsx b/src/renderer/component/fileListSearch/view.jsx index ad7ae496840..2196c1e0004 100644 --- a/src/renderer/component/fileListSearch/view.jsx +++ b/src/renderer/component/fileListSearch/view.jsx @@ -39,7 +39,7 @@ class FileListSearch extends React.PureComponent {
    {__('Search Results')}
    {!isSearching && fileResults.length ? ( - fileResults.map(uri => ) + fileResults.slice(0, 5).map(uri => ) ) : ( )} @@ -48,7 +48,7 @@ class FileListSearch extends React.PureComponent {
    {__('Channels')}
    {!isSearching && channelResults.length ? ( - channelResults.map(uri => ) + channelResults.map(uri => ) ) : ( )} @@ -57,9 +57,7 @@ class FileListSearch extends React.PureComponent {
    {__('Your downloads')}
    {downloadUris && downloadUris.length ? ( - downloadUris.map(uri => ( - - )) + downloadUris.map(uri => ) ) : ( )} diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index 0f5245e8098..9527ed0dc60 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -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, @@ -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 { static defaultProps = { - displayDescription: true, size: 'regular', }; @@ -57,7 +55,6 @@ class FileTile extends React.PureComponent { claim, uri, rewardedContentClaimIds, - size, isNew, claimIsMine, } = this.props; @@ -70,7 +67,7 @@ class FileTile extends React.PureComponent { return ( // TODO: turn this into it's own component and share it with FileCard // The only issue is icon placement on the search page -
    +
    {isNew && {__('NEW')}} {isSubscribed && } @@ -86,7 +83,6 @@ class FileTile extends React.PureComponent { claim, metadata, isResolvingUri, - isSearchResult, navigate, obscureNsfw, claimIsMine, @@ -94,22 +90,21 @@ class FileTile extends React.PureComponent { updatePublishForm, hideNoResult, displayHiddenMessage, - displayDescription, size, } = this.props; if (!claim && isResolvingUri) { return (
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    ); @@ -132,7 +127,6 @@ class FileTile extends React.PureComponent { 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 { ({ name, height } = claim); } + const wrapperProps = name + ? { + onClick: () => navigate('/show', { uri }), + role: 'button', + } + : {}; + return !name && hideNoResult ? null : (
    -
    - {(title || name) && ( - - )} -
    -
    -
    - -
    -
    -
    - + {name && ( + +
    + {(title || name) && ( + + )}
    - {size !== 'large' && this.renderFileProperties()} -
    -
    - {displayDescription && ( -
    + + {size !== 'small' ? ( +
    + {__('Published to')} {' '} + +
    + ) : ( + +
    + +
    +
    + +
    +     + )} + + )} + + {size !== 'small' && ( +
    )} - {size === 'large' && this.renderFileProperties()} + + {this.renderFileProperties()} + {!name && ( - - {__('This location is unused.')}{' '} -
    diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx index 5d8fd7edf28..7dcf10b3e26 100644 --- a/src/renderer/component/recommendedContent/view.jsx +++ b/src/renderer/component/recommendedContent/view.jsx @@ -54,17 +54,11 @@ export default class RecommendedContent extends React.PureComponent { Related {recommendedContent && recommendedContent.map(recommendedUri => ( - + ))} - {recommendedContent && !recommendedContent.length && !isSearching && ( -
    No related content found
    - )} + {recommendedContent && + !recommendedContent.length && + !isSearching &&
    No related content found
    }
    ); } diff --git a/src/renderer/constants/icons.js b/src/renderer/constants/icons.js index 52754f7d3a8..67128dc92c5 100644 --- a/src/renderer/constants/icons.js +++ b/src/renderer/constants/icons.js @@ -41,3 +41,4 @@ export const WALLET = 'CreditCard'; export const SETTINGS = 'Settings'; export const INVITE = 'Users'; export const FILE = 'File'; +export const OPTIONS = 'Sliders'; diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index e106576a29d..5290b6bd883 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -182,12 +182,12 @@ class FilePage extends React.Component {
    -
    +
    -
    +
    {__('Published on')}
    diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx index 7ce29057e58..fd947d965db 100644 --- a/src/renderer/page/search/view.jsx +++ b/src/renderer/page/search/view.jsx @@ -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 { 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 { {isChannel ? ( - + ) : ( - + )} )} + {/* + Commented out until I figure out what to do with it in my next PR +
    + + */} +
    - - { - // 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 - // - }
    {__('These search results are provided by LBRY, Inc.')}
    diff --git a/src/renderer/page/show/view.jsx b/src/renderer/page/show/view.jsx index b2160e8d89d..b7a481ebb4f 100644 --- a/src/renderer/page/show/view.jsx +++ b/src/renderer/page/show/view.jsx @@ -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 { innerContent = ( {isResolvingUri && } - {claim === null && !isResolvingUri && ( - {__("There's nothing at this location.")} - )} + {claim === null && + !isResolvingUri && ( + {__("There's nothing at this location.")} + )} ); } else if (claim && claim.name.length && claim.name[0] === '@') { innerContent = ; - } else if (claim) { + } else if (claim && blackListedOutpoints) { let isClaimBlackListed = false; for (let i = 0; i < blackListedOutpoints.length; i += 1) { diff --git a/src/renderer/redux/reducers/navigation.js b/src/renderer/redux/reducers/navigation.js index 8a6c40e023b..bcdceb0b947 100644 --- a/src/renderer/redux/reducers/navigation.js +++ b/src/renderer/redux/reducers/navigation.js @@ -3,13 +3,14 @@ import * as ACTIONS from 'constants/action_types'; const getCurrentPath = () => { const { hash } = document.location; if (hash !== '') return hash.replace(/^#/, ''); - return '/settings'; + // return '/show?uri=lbry://bittorrent-token-and-tron-everything-you#056bfd5c9ae0cf94d25e67363e3add68cc34e96b'; + return '/discover'; }; const reducers = {}; const defaultState = { currentPath: getCurrentPath(), - pathAfterAuth: '/discover', + pathAfterAuth: '/discosver', index: 0, stack: [], }; diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss index c4cfc73c37d..64d77ce128d 100644 --- a/src/renderer/scss/component/_button.scss +++ b/src/renderer/scss/component/_button.scss @@ -95,3 +95,22 @@ color: $lbry-teal-3; } } + +.button--uri-indicator { + color: rgba($lbry-white, 0.9); + transition: color 0.2s; + // 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; + // } + + &:hover { + color: $lbry-teal-3; + } +} diff --git a/src/renderer/scss/component/_media.scss b/src/renderer/scss/component/_media.scss index 0b82b164932..b29641c7331 100644 --- a/src/renderer/scss/component/_media.scss +++ b/src/renderer/scss/component/_media.scss @@ -1,71 +1,79 @@ // M E D I A -// L A R G E +// C A R D +.media-card { + font-size: 1.2rem; -.media--large { + .media__title { + margin-bottom: var(--spacing-vertical-small); + } +} + +// M E D I A +// T I L E + +.media-tile { display: flex; font-size: 1.5rem; - .media__info { - margin-left: var(--spacing-vertical-large); - width: calc(100% - 20rem); + &:not(:last-of-type) { + margin-bottom: var(--spacing-vertical-large); } .media__thumb { - margin-bottom: var(--spacing-vertical-medium); - width: 40rem; + width: 20rem; } - // Titles need adjusted styles at different - // screen widths - - .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); - } + .media__info { + margin-left: var(--spacing-vertical-medium); + width: calc(80% - 20rem); } } -// M E D I A -// P L A C E H O L D E R +.media-tile--large { + font-size: 2rem; -.media--placeholder { - .media__channel, - .media__date, - .media__title, - .media__properties { - min-height: 1rem; + .media__thumb { + width: 30rem; } - // Margins for channel name and titles need to be adjusted - // for smaller screen widths + .media__info { + margin-left: var(--spacing-vertical-large); + width: calc(80% - 30rem); + } - .media__channel, - .media__title { - @media (min-width: 601px) { - margin-bottom: var(--spacing-vertical-small); - } + .media__subtext { + font-size: 0.7em; } +} - .media__channel { - width: 70%; +.media-tile--small { + font-size: 1.2rem; - @media (max-width: 600px) { - margin-bottom: var(--spacing-vertical-small); - } + &:not(:last-of-type) { + margin-bottom: var(--spacing-vertical-medium); } - .media__date { - width: 30%; + .media__thumb { + width: 10em; + } + + .media__info { + // padding-left: var(--spacing-vertical-medium); + width: calc(100% - 10em); } .media__title { - width: 100%; + margin-bottom: var(--spacing-vertical-small); + } + + .media__properties { + 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 - -.media--search-result { - display: flex; - - &:not(:last-of-type) { - margin-bottom: var(--spacing-vertical-large); - } - - .media__info { - margin-left: var(--spacing-vertical-medium); - width: calc(100% - 20rem); - } +// T H U M B - .media__properties { - bottom: -4.5rem; - left: -20rem; - position: absolute; - } +.media__thumb { + @include thumbnail; - .media__subtext { - padding-top: var(--spacing-vertical-medium); - } + &:not(.media__thumb--nsfw) { + background-color: $lbry-gray-2; + background-position: center; + background-repeat: no-repeat; + background-size: cover; - .media__thumb { - width: 20rem; + html[data-mode='dark'] & { + background-color: rgba($lbry-white, 0.1); + } } +} - .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 - -.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%; - } +// T I T L E - .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; +.media__properties--large { + display: inline-block; + vertical-align: top; - .badge { - position: relative; - top: 0.2rem; - } - } + &:not(:empty) { + height: 2.55rem; + margin-top: -1px; - svg { - height: 100%; + margin-bottom: var(--spacing-vertical-small); + padding-top: var(--spacing-vertical-small); + padding-left: var(--spacing-vertical-small); } -} -.media__properties--large { .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; } diff --git a/src/renderer/scss/component/_placeholder.scss b/src/renderer/scss/component/_placeholder.scss index 49ef913b20c..14de02cd286 100644 --- a/src/renderer/scss/component/_placeholder.scss +++ b/src/renderer/scss/component/_placeholder.scss @@ -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%; + } -.placeholder__date { - width: 50%; - height: 1em; - margin-top: var(--spacing-vertical-small); -} + .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); + } -// Individual items we need a placeholder for -// FileCard -.placeholder__title { - height: 3rem; - margin-top: var(--spacing-vertical-emall); + .media__properties { + height: 1.1em; + } } -// FileTile -.placeholder__title--tile { - height: 3rem; +.media-tile--large.media-placeholder { + .media__title, + .media__channel, + .media__subtitle { + // display: block; + // padding-left: var(--spacing-vertical-large); + } + + .media__thumb { + // margin-right: var(--spacing-vertical-large); + } + + .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; + } } diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index f87882ea52f..5587d6bba80 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -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 { @@ -48,3 +46,8 @@ @extend .media-group__header-title; margin-bottom: var(--spacing-vertical-large); } + +.search__button { + position: absolute; + top: 411; +} diff --git a/src/renderer/scss/component/_yrbl.scss b/src/renderer/scss/component/_yrbl.scss index 09a232073bd..34d18a4cc34 100644 --- a/src/renderer/scss/component/_yrbl.scss +++ b/src/renderer/scss/component/_yrbl.scss @@ -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; diff --git a/yarn.lock b/yarn.lock index 8c06a0d9d73..1c3a24cb68d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"