Merge branch 'master' into feat-expandingCards

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

ui/component/fileRenderHeader/index.js

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

ui/component/fileRenderHeader/view.jsx

@@ -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 (
-    <div>
-      <ClaimUri uri={uri} />
-
-      {claim.meta.reposted > 0 && (
-        <Button
-          button="link"
-          className="media__uri--right"
-          label={__('View %count% reposts', { count: claim.meta.reposted })}
-          navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
-        />
-      )}
-    </div>
-  );
-}
-
-export default FileRenderHeader;

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<Props> {
     if (RENDER_MODES.FLOATING_MODES.includes(mode)) {
       return (
         <React.Fragment>
-          <FileRenderHeader uri={uri} />
+          <ClaimUri uri={uri} />
           <div className={FILE_WRAPPER_CLASS}>
             <FileRenderInitiator uri={uri} />
           </div>
@@ -94,7 +94,7 @@ class FilePage extends React.Component<Props> {
     if (RENDER_MODES.UNRENDERABLE_MODES.includes(mode)) {
       return (
         <React.Fragment>
-          <FileRenderHeader uri={uri} />
+          <ClaimUri uri={uri} />
           <FileTitle uri={uri} />
           <FileRenderDownload uri={uri} isFree={cost === 0} />
         </React.Fragment>
@@ -104,7 +104,7 @@ class FilePage extends React.Component<Props> {
     if (RENDER_MODES.TEXT_MODES.includes(mode)) {
       return (
         <React.Fragment>
-          <FileRenderHeader uri={uri} />
+          <ClaimUri uri={uri} />
           <FileTitle uri={uri} />
           <FileRenderInitiator uri={uri} />
           <FileRenderInline uri={uri} />
@@ -114,7 +114,7 @@ class FilePage extends React.Component<Props> {
 
     return (
       <React.Fragment>
-        <FileRenderHeader uri={uri} />
+        <ClaimUri uri={uri} />
         <FileRenderInitiator uri={uri} />
         <FileRenderInline uri={uri} />
         <FileTitle uri={uri} />

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

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 {

ui/scss/component/_claim-list.scss

@@ -125,6 +125,10 @@
 
   .media__thumb {
     width: 14rem;
+
+    @media (max-width: $breakpoint-small) {
+      width: 5rem;
+    }
   }
 
   .channel-thumbnail {

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

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,

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

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 {

ui/scss/init/_gui.scss

@@ -23,10 +23,6 @@ html {
 
 body {
   font-size: 1em;
-
-  @media (max-width: $breakpoint-small) {
-    font-size: 1.3em;
-  }
 }
 
 h1,