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);