diff --git a/ui/component/fileDetails/view.jsx b/ui/component/fileDetails/view.jsx index 28d380e8c..e1bd3d792 100644 --- a/ui/component/fileDetails/view.jsx +++ b/ui/component/fileDetails/view.jsx @@ -1,4 +1,6 @@ // @flow +import * as PAGES from 'constants/pages'; +import * as CS from 'constants/claim_search'; import React, { Fragment, PureComponent } from 'react'; import Button from 'component/button'; import path from 'path'; diff --git a/ui/component/fileRenderHeader/index.js b/ui/component/fileRenderHeader/index.js deleted file mode 100644 index e54062ecb..000000000 --- a/ui/component/fileRenderHeader/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import { connect } from 'react-redux'; -import { makeSelectClaimForUri } from 'lbry-redux'; -import ClaimUri from './view'; - -const select = (state, props) => ({ - claim: makeSelectClaimForUri(props.uri)(state), -}); - -export default connect(select)(ClaimUri); diff --git a/ui/component/fileRenderHeader/view.jsx b/ui/component/fileRenderHeader/view.jsx deleted file mode 100644 index 614af1a40..000000000 --- a/ui/component/fileRenderHeader/view.jsx +++ /dev/null @@ -1,32 +0,0 @@ -// @flow -import * as PAGES from 'constants/pages'; -import * as CS from 'constants/claim_search'; -import React from 'react'; -import ClaimUri from 'component/claimUri'; -import Button from 'component/button'; - -type Props = { - uri: string, - claim: ?Claim, -}; - -function FileRenderHeader(props: Props) { - const { uri, claim } = props; - - return ( -
- - - {claim.meta.reposted > 0 && ( -
- ); -} - -export default FileRenderHeader; diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx index 48f8cd65e..07f440085 100644 --- a/ui/page/file/view.jsx +++ b/ui/page/file/view.jsx @@ -3,7 +3,7 @@ import * as React from 'react'; import classnames from 'classnames'; import Page from 'component/page'; import * as RENDER_MODES from 'constants/file_render_modes'; -import FileRenderHeader from 'component/fileRenderHeader'; +import ClaimUri from 'component/claimUri'; import FileTitle from 'component/fileTitle'; import FileRenderInitiator from 'component/fileRenderInitiator'; import FileRenderInline from 'component/fileRenderInline'; @@ -81,7 +81,7 @@ class FilePage extends React.Component { if (RENDER_MODES.FLOATING_MODES.includes(mode)) { return ( - +
@@ -94,7 +94,7 @@ class FilePage extends React.Component { if (RENDER_MODES.UNRENDERABLE_MODES.includes(mode)) { return ( - + @@ -104,7 +104,7 @@ class FilePage extends React.Component { if (RENDER_MODES.TEXT_MODES.includes(mode)) { return ( - + @@ -114,7 +114,7 @@ class FilePage extends React.Component { return ( - + diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 2582c5e4f..bf674ba7d 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -1,3 +1,11 @@ +.button--primary, +.button--secondary, +.button--alt { + @media (max-width: $breakpoint-small) { + font-size: var(--font-small); + } +} + .button--uri-indicator { @extend .button--link; color: var(--color-text-subtitle); diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss index 52245f7ee..a606297c4 100644 --- a/ui/scss/component/_channel.scss +++ b/ui/scss/component/_channel.scss @@ -8,10 +8,6 @@ $metadata-z-index: 1; align-items: flex-end; box-sizing: content-box; color: #fff; - - .button--alt { - padding: 0 var(--spacing-small); - } } .channel-cover__custom { @@ -144,7 +140,7 @@ $metadata-z-index: 1; } .channel__quick-actions { - @extend .card__actions; + @extend .section__actions; margin-left: var(--spacing-medium); position: absolute; top: 0; @@ -152,6 +148,17 @@ $metadata-z-index: 1; margin-top: var(--spacing-medium); z-index: $metadata-z-index; flex-wrap: wrap; + font-size: var(--font-base); + + > * { + padding: 0 var(--spacing-xsmall); + } + + @media (max-width: $breakpoint-small) { + > * { + margin-bottom: var(--spacing-xsmall); + } + } } .channel-name--inline { diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 795ca947e..9b5ea21b8 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -125,6 +125,10 @@ .media__thumb { width: 14rem; + + @media (max-width: $breakpoint-small) { + width: 5rem; + } } .channel-thumbnail { diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index 9f5f15eb5..70b807242 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -70,6 +70,12 @@ } } +.file-render__header { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + .file-render__viewer { width: 100%; height: 100%; diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index 63df8dc04..818665cdf 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -7,6 +7,10 @@ margin-bottom: 0; } + @media (max-width: $breakpoint-small) { + font-size: var(--font-base); + } + // Headers h1, h2, diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss index 2e95d0a17..df2ef5b2c 100644 --- a/ui/scss/component/_media.scss +++ b/ui/scss/component/_media.scss @@ -24,6 +24,7 @@ @media (max-width: $breakpoint-small) { position: static; transform: none; + margin-bottom: var(--spacing-xsmall); } // This is terrible and should not be removed diff --git a/ui/scss/component/_placeholder.scss b/ui/scss/component/_placeholder.scss index 0badb7083..6369b7cb7 100644 --- a/ui/scss/component/_placeholder.scss +++ b/ui/scss/component/_placeholder.scss @@ -31,12 +31,6 @@ width: 40%; height: 2rem; } - - @media (max-width: $breakpoint-small) { - &.media__thumb { - display: none; - } - } } .placeholder--text-document { diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index f0936d01f..0b3a91316 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -23,10 +23,6 @@ html { body { font-size: 1em; - - @media (max-width: $breakpoint-small) { - font-size: 1.3em; - } } h1,