diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index 646e0754f..2adb1028f 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -11,8 +11,7 @@ import SubscribeButton from 'component/subscribeButton'; import useGetThumbnail from 'effects/use-get-thumbnail'; import { formatLbryUrlForWeb } from 'util/url'; import { parseURI } from 'lbry-redux'; -import VideoDuration from 'component/videoDuration'; -import FileType from 'component/fileType'; +import FileProperties from 'component/fileProperties'; type Props = { uri: string, @@ -149,19 +148,15 @@ function ClaimPreviewTile(props: Props) { })} > - - {!isChannel && ( -
- - -
- )} -
+
-

- -

+
+

+ +

+ {!isChannel && } +
{isChannel ? ( @@ -175,7 +170,7 @@ function ClaimPreviewTile(props: Props) {
) : ( - + diff --git a/ui/component/fileProperties/view.jsx b/ui/component/fileProperties/view.jsx index 3e6caa6de..286facc01 100644 --- a/ui/component/fileProperties/view.jsx +++ b/ui/component/fileProperties/view.jsx @@ -1,6 +1,7 @@ // @flow import * as icons from 'constants/icons'; import * as React from 'react'; +import classnames from 'classnames'; import Icon from 'component/common/icon'; import FilePrice from 'component/filePrice'; import VideoDuration from 'component/videoDuration'; @@ -12,13 +13,14 @@ type Props = { claimIsMine: boolean, isSubscribed: boolean, isNew: boolean, + small: boolean, }; export default function FileProperties(props: Props) { - const { uri, downloaded, claimIsMine, isSubscribed } = props; + const { uri, downloaded, claimIsMine, isSubscribed, small = false } = props; return ( -
+
{isSubscribed && } {!claimIsMine && downloaded && } diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx index 098254679..5c720472f 100644 --- a/ui/component/fileThumbnail/view.jsx +++ b/ui/component/fileThumbnail/view.jsx @@ -1,19 +1,17 @@ // @flow -import type { Node } from 'react'; import React from 'react'; // import FreezeframeWrapper from './FreezeframeWrapper'; import Placeholder from './placeholder.png'; type Props = { thumbnail: ?string, // externally sourced image - children?: Node, }; const className = 'media__thumb'; class CardMedia extends React.PureComponent { render() { - const { thumbnail, children } = this.props; + const { thumbnail } = this.props; // Disabling temporarily to see if people complain // if (thumbnail && thumbnail.endsWith('gif')) { @@ -34,11 +32,7 @@ class CardMedia extends React.PureComponent { url = thumbnail || Placeholder; // @endif - return ( -
- {children} -
- ); + return
; } } diff --git a/ui/component/uriIndicator/view.jsx b/ui/component/uriIndicator/view.jsx index 7f7f1f100..e7487f2e6 100644 --- a/ui/component/uriIndicator/view.jsx +++ b/ui/component/uriIndicator/view.jsx @@ -12,6 +12,7 @@ type Props = { link: ?boolean, claim: ?Claim, addTooltip: boolean, + hideAnonymous: boolean, // Lint thinks we aren't using these, even though we are. // Possibly because the resolve function is an arrow function that is passed in props? resolveUri: string => void, @@ -43,7 +44,7 @@ class UriIndicator extends React.PureComponent { }; render() { - const { link, isResolvingUri, claim, addTooltip, children, inline } = this.props; + const { link, isResolvingUri, claim, addTooltip, children, inline, hideAnonymous = false } = this.props; if (!claim) { return {isResolvingUri ? 'Validating...' : 'Unused'}; @@ -52,6 +53,10 @@ class UriIndicator extends React.PureComponent { const isChannelClaim = claim.value_type === 'channel'; if (!claim.signing_channel && !isChannelClaim) { + if (hideAnonymous) { + return null; + } + return Anonymous; } diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 30d2077a5..9f478632f 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -288,9 +288,11 @@ margin-left: var(--spacing-medium); justify-content: flex-start; - &:first-child, - &:nth-child(5n) { - margin-left: 0; + @media (min-width: $breakpoint-medium) { + &:first-child, + &:nth-child(5n) { + margin-left: 0; + } } &:hover { @@ -303,6 +305,13 @@ } @media (max-width: $breakpoint-medium) { + width: calc((100% - var(--spacing-medium) * 2) / 3); + + &:first-child, + &:nth-child(3n + 1) { + margin-left: 0; + } + .channel-thumbnail { display: none; } @@ -312,19 +321,24 @@ width: calc((100% - var(--spacing-medium) * 1) / 2); margin-bottom: var(--spacing-large); - .channel-thumbnail { - display: none; - } - &:first-child, &:nth-child(2n + 1) { margin-left: 0; } + + .channel-thumbnail { + display: none; + } + } +} + +.claim-preview--channel { + .media__thumb { + padding-top: 10%; } } .claim-tile__title { - margin: var(--spacing-small); margin-bottom: 0; font-weight: 600; font-size: var(--font-small); @@ -357,7 +371,7 @@ } .claim-tile__publishes { - font-size: var(--font-small); + font-size: var(--font-xsmall); } .claim-tile__about--channel { @@ -370,21 +384,9 @@ font-size: var(--font-body); } -.claim-tile__absolute-info { - position: absolute; - bottom: var(--spacing-small); - right: var(--spacing-small); - font-size: var(--font-xsmall); - padding: 0.2rem; - border-radius: var(--border-radius); - font-weight: bold; - background-color: black; - color: white; - +.claim-tile__title-and-properties { display: flex; - align-items: center; -} - -.claim-tile__video-length { - margin-right: var(--spacing-xsmall); + align-items: flex-start; + justify-content: space-between; + margin: var(--spacing-small); } diff --git a/ui/scss/component/_file-properties.scss b/ui/scss/component/_file-properties.scss index 60a86b171..6a34ff389 100644 --- a/ui/scss/component/_file-properties.scss +++ b/ui/scss/component/_file-properties.scss @@ -4,7 +4,7 @@ align-items: center; font-size: var(--font-small); color: var(--color-text-help); - margin-left: var(--spacing-small); + margin-left: var(--spacing-xsmall); & > *:not(:last-child) { margin-right: var(--spacing-small); @@ -15,6 +15,10 @@ } } +.file-properties--small { + font-size: var(--font-xsmall); +} + .file-properties--large { flex-wrap: wrap; margin-bottom: var(--spacing-large); diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss index c66c7359a..0e2ee9772 100644 --- a/ui/scss/component/_media.scss +++ b/ui/scss/component/_media.scss @@ -3,7 +3,6 @@ .media__thumb { @include thumbnail; - position: relative; border-radius: var(--card-radius); object-fit: cover; background-color: var(--color-placeholder-background);