diff --git a/client/scss/all.scss b/client/scss/all.scss index c21d276c..6629e7d1 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -31,7 +31,6 @@ @import '~space-between/_space-between'; @import '~space-around/_space-around'; @import '~row/_row'; -@import '~vertical-split/_vertical-split'; @import '~tooltip/_tooltip'; @import '~social-share-link/_social-share-link'; diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss index 29397d33..40800f02 100644 --- a/client/scss/asset-display/_asset-display.scss +++ b/client/scss/asset-display/_asset-display.scss @@ -5,23 +5,12 @@ justify-content: center; position: relative; width: 100%; - $height-delta: 43 / 16 + ($primary-padding * 2); //fix 43!!! nav height - //max-height: calc(100vh - #{$height-delta}); - height: calc(100vh - #{$height-delta}); overflow: hidden; + align-items: center; } .asset-title { - color: #2E2F31; - font-size: $text-x-large; - font-weight: normal; - letter-spacing: 0; - margin-top: $primary-padding; - text-align: center; - - @media (max-width: $break-point-tablet) { - padding: 0 $tertiary-padding; - } + padding-top: $secondary-padding; } .asset-image, .asset-video { @@ -31,6 +20,7 @@ margin-right: auto; object-fit: contain; object-position: center; + background: black; } /*below must die if this is intended to be shareable component! it also probably doesn't need to be*/ @@ -60,6 +50,59 @@ } } +/* +.vertical-split, .visible-content { + flex : 1 0 auto; + display : flex; + flex-direction : column; + justify-content: space-between; + align-items : center; +}; + +.collapse-content { + flex-grow: 0; + @media (max-width: $break-point-tablet) { + max-width: 100%; + width: 100%; + } +} + +.collapse-content.closed{ + display: none; +} + +.collapse-button { + background: none; + border: none; + display: block; + margin: 15px auto 0; + width: 25px; + height: 25px; + text-align: center; + padding: 0px; + padding-left: 10px; + + @media (max-width: $break-point-tablet) { + padding: 0; + } + + svg { + stroke: $primary-color; + &.plus-icon { + transform: rotate(0); + transition: all 0.4s ease; + } + + } + + &:hover { + .plus-icon { + transform: rotate(-180deg); + } + } +} + */ + .asset-info { $asset-info-width: 1000px; max-width: $asset-info-width; diff --git a/client/scss/body/_body.scss b/client/scss/body/_body.scss index 6072cbd4..0c1b55b5 100644 --- a/client/scss/body/_body.scss +++ b/client/scss/body/_body.scss @@ -1,7 +1,7 @@ body { margin: 0; padding: 0; - height: 100%; + min-height: 100%; word-wrap: break-word; display: -webkit-flex; display: flex; diff --git a/client/scss/nav-bar/_nav-bar.scss b/client/scss/nav-bar/_nav-bar.scss index 43a85bc1..f817e781 100644 --- a/client/scss/nav-bar/_nav-bar.scss +++ b/client/scss/nav-bar/_nav-bar.scss @@ -1,4 +1,5 @@ .nav-bar { + margin-top: $thin-padding; margin-left: $primary-padding; margin-right: $primary-padding; @@ -18,7 +19,7 @@ .nav-bar-link { padding: calc(1em - 2px); display: inline-block; - font-size: 14px; + font-size: $text-medium; letter-spacing: 0.4px; text-transform: uppercase; } diff --git a/client/scss/page-layout/_page-layout.scss b/client/scss/page-layout/_page-layout.scss index 0c51319a..e3092a65 100644 --- a/client/scss/page-layout/_page-layout.scss +++ b/client/scss/page-layout/_page-layout.scss @@ -12,7 +12,7 @@ } @media (max-width: $break-point-tablet) { - .page-layout .content { margin: $thin-padding; } + .page-layout .content { margin: $tertiary-padding; } } @media (max-width: $break-point-mobile) { diff --git a/client/scss/text/_text.scss b/client/scss/text/_text.scss index 125afe67..357099f2 100644 --- a/client/scss/text/_text.scss +++ b/client/scss/text/_text.scss @@ -57,97 +57,3 @@ h3 { .text--success { color: $success-color; } - -@media (max-width: $break-point-x-large ) { - h1 { - font-size: $text-x-large; - } - - h2 { - font-size: $text-large; - } - - h3 { - font-size: $text-medium; - } - - p, body, button, input, textarea, label, select, option { - font-size: $text-medium; - } - - .text--extra-large { - font-size: $text-x-large; - } - - .text--large { - font-size: $text-medium; - } - - .text--medium { - font-size: $text-small; - } - -} - -@media (max-width: $break-point-tablet) { - - h1 { - font-size: $text-large; - } - - h2 { - font-size: $text-medium; - } - - h3 { - font-size: $text-small; - } - - p, body, button, input, textarea, label, select, option { - font-size: 15px; - } - - .text--extra-large { - font-size: $text-large; - } - - .text--large { - font-size: $text-medium; - } - - .text--small { - font-size: $text-x-small; - } - - -} - -@media (max-width: $break-point-mobile) { - - h1 { - font-size: $text-medium; - font-weight: bold; - } - - h2 { - font-size: $text-small; - } - - p, body, button, input, textarea, label, select, option { - font-size: 15px; - } - - .text--extra-large { - font-size: $text-x-small; - font-weight: bold; - } - - .text--large { - font-size: $text-x-small; - } - - .text--medium { - font-size: $text-x-small; - } - -} diff --git a/client/scss/variables/_variables.scss b/client/scss/variables/_variables.scss index fa86f99e..a9835c98 100644 --- a/client/scss/variables/_variables.scss +++ b/client/scss/variables/_variables.scss @@ -27,11 +27,11 @@ $input-padding: 0.3em; $input-full-width: calc(100% - 0.6em); $text-xx-large: 2.5em; -$text-x-large: x-large; -$text-large: large; -$text-medium: medium; -$text-small: small; -$text-x-small: small; +$text-x-large: 2.0em; +$text-large: 1.5em; +$text-medium: 1.0em; +$text-small: 0.9em; +$text-x-small: 0.8em; $break-point-xx-large: 1400px; $break-point-x-large: 1290px; diff --git a/client/scss/vertical-split/_vertical-split.scss b/client/scss/vertical-split/_vertical-split.scss deleted file mode 100644 index 2aacc773..00000000 --- a/client/scss/vertical-split/_vertical-split.scss +++ /dev/null @@ -1,55 +0,0 @@ -.vertical-split, .visible-content { - flex : 1 0 auto; - display : flex; - flex-direction : column; - justify-content: space-between; - align-items : center; -}; - -.asset-display-wrap -{ - flex-grow: 1; -} - -.collapse-content { - flex-grow: 0; - @media (max-width: $break-point-tablet) { - max-width: 100%; - width: 100%; - } -} - -.collapse-content.closed{ - display: none; -} - -.collapse-button { - background: none; - border: none; - display: block; - margin: 15px auto 0; - width: 25px; - height: 25px; - text-align: center; - padding: 0px; - padding-left: 10px; - - @media (max-width: $break-point-tablet) { - padding: 0; - } - - svg { - stroke: $primary-color; - &.plus-icon { - transform: rotate(0); - transition: all 0.4s ease; - } - - } - - &:hover { - .plus-icon { - transform: rotate(-180deg); - } - } -} \ No newline at end of file diff --git a/client/src/components/VerticalCollapsibleSplit/index.jsx b/client/src/components/VerticalCollapsibleSplit/index.jsx deleted file mode 100644 index d670b6e8..00000000 --- a/client/src/components/VerticalCollapsibleSplit/index.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import * as Icon from 'react-feather'; -class VerticalCollapsibleSplit extends React.Component { - - constructor (props) { - super(props); - this.collapse = this.collapse.bind(this); - this.storageKey = 'vert-split-state-' + this.props.name; - // const closed = window && window.localStorage - // ? !!window.localStorage.getItem(this.storageKey) : false; - const closed = false; - this.state = { closed: closed }; - } - - collapse () { - this.setState({ closed: !this.state.closed }); - // if (window && window.localStorage) { - // window.localStorage.setItem(this.storageKey, !this.state.closed); - // } - document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed')); - } - - render () { - let { - props, - state, - } = this; - - return ( -
-
- {props.top} - -
-
- {props.bottom} -
-
- ); - } -}; - -export default VerticalCollapsibleSplit; diff --git a/client/src/containers/AssetDisplay/view.jsx b/client/src/containers/AssetDisplay/view.jsx index 6e5079f3..98a78366 100644 --- a/client/src/containers/AssetDisplay/view.jsx +++ b/client/src/containers/AssetDisplay/view.jsx @@ -1,6 +1,5 @@ import React from 'react'; import Row from '@components/Row'; -import AssetTitle from '@containers/AssetTitle'; import ProgressBar from '@components/ProgressBar'; import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from '../../constants/asset_display_states'; import createCanonicalLink from '../../../../utils/createCanonicalLink'; @@ -56,42 +55,37 @@ class AssetDisplay extends React.Component { } const sourceUrl = `${createCanonicalLink({ asset: asset.claimData })}.${fileExt}?${outpoint}`; return ( -
-
-
- {(status === LOCAL_CHECK) && -
-

Checking to see if Spee.ch has your asset locally...

-
- } - {(status === UNAVAILABLE) && -
-

Sit tight, we're searching the LBRY blockchain for your asset!

- -

Curious what magic is happening here? Learn more.

-
- } - {(status === ERROR) && -
- -

Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the LBRY discord.

- - -

{error}

- -
- } - {(status === AVAILABLE) && - - } -
+
+ {(status === LOCAL_CHECK) && +
+

Checking to see if Spee.ch has your asset locally...

- + } + {(status === UNAVAILABLE) && +
+

Sit tight, we're searching the LBRY blockchain for your asset!

+ +

Curious what magic is happening here? Learn more.

+
+ } + {(status === ERROR) && +
+ +

Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the LBRY discord.

+ + +

{error}

+ +
+ } + {(status === AVAILABLE) && + + }
); } diff --git a/client/src/containers/AssetTitle/view.jsx b/client/src/containers/AssetTitle/view.jsx index 7821920a..eaf3d6d4 100644 --- a/client/src/containers/AssetTitle/view.jsx +++ b/client/src/containers/AssetTitle/view.jsx @@ -2,9 +2,7 @@ import React from 'react'; const AssetTitle = ({ title }) => { return ( -
-

{title}

-
+

{title}

); }; diff --git a/client/src/pages/ShowAssetDetails/view.jsx b/client/src/pages/ShowAssetDetails/view.jsx index 323a45b3..87cce975 100644 --- a/client/src/pages/ShowAssetDetails/view.jsx +++ b/client/src/pages/ShowAssetDetails/view.jsx @@ -1,20 +1,31 @@ import React from 'react'; import PageLayout from '@components/PageLayout'; -import VerticalCollapsibleSplit from '@components/VerticalCollapsibleSplit'; +import * as Icon from 'react-feather'; import AssetDisplay from '@containers/AssetDisplay'; +import AssetInfo from '@containers/AssetInfo'; import ErrorPage from '@pages/ErrorPage'; - -/* - - } - /> - - */ +import AssetTitle from '@containers/AssetTitle'; class ShowAssetDetails extends React.Component { + + constructor (props) { + super(props); + this.collapse = this.collapse.bind(this); + // this.storageKey = 'vert-split-state-' + this.props.name; + // const closed = window && window.localStorage + // ? !!window.localStorage.getItem(this.storageKey) : false; + const closed = false; + this.state = { closed: closed }; + } + + collapse () { + this.setState({ closed: !this.state.closed }); + // if (window && window.localStorage) { + // window.localStorage.setItem(this.storageKey, !this.state.closed); + // } + // document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed')); + } + render () { const { asset } = this.props; if (asset) { @@ -25,7 +36,11 @@ class ShowAssetDetails extends React.Component { asset={asset} > - + + + { !this.state.closed && } ); }