css destroying

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

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;
+  padding-top: $secondary-padding;
-  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;
-  }
 }
 
 .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;

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;

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

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

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

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-x-large: 2.0em;
-$text-large: large;
+$text-large: 1.5em;
-$text-medium: medium;
+$text-medium: 1.0em;
-$text-small: small;
+$text-small: 0.9em;
-$text-x-small: small;
+$text-x-small: 0.8em;
 
 $break-point-xx-large: 1400px;
 $break-point-x-large: 1290px;

client/scss/vertical-split/_vertical-split.scss

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

client/src/components/VerticalCollapsibleSplit/index.jsx

@@ -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 (
-      <div className={'vertical-split'}>
-        <div className='visible-content' data-name={props.name}>
-          {props.top}
-          <button className='collapse-button' onClick={this.collapse}>
-            {state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
-          </button>
-        </div>
-        <div className='collapse-content' data-name={props.name}>
-          {props.bottom}
-        </div>
-      </div>
-    );
-  }
-};
-
-export default VerticalCollapsibleSplit;

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 (
-      <div className={'asset-display-wrap'}>
+      <div className={'asset-display'}>
-        <div className={'asset-display'}>
+        {(status === LOCAL_CHECK) &&
-          <div className={'asset-display'}>
+        <div>
-            {(status === LOCAL_CHECK) &&
+          <p>Checking to see if Spee.ch has your asset locally...</p>
-            <div>
-              <p>Checking to see if Spee.ch has your asset locally...</p>
-            </div>
-            }
-            {(status === UNAVAILABLE) &&
-            <div>
-              <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
-              <ProgressBar size={12} />
-              <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
-            </div>
-            }
-            {(status === ERROR) &&
-            <div>
-              <Row>
-                <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the following error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
-              </Row>
-              <Row>
-                <p id='error-message'><i>{error}</i></p>
-              </Row>
-            </div>
-            }
-            {(status === AVAILABLE) &&
-            <AvailableContent
-              contentType={contentType}
-              sourceUrl={sourceUrl}
-              name={name}
-              thumbnail={thumbnail}
-            />
-            }
-          </div>
         </div>
-        <AssetTitle />
+        }
+        {(status === UNAVAILABLE) &&
+        <div>
+          <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
+          <ProgressBar size={12} />
+          <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
+        </div>
+        }
+        {(status === ERROR) &&
+        <div>
+          <Row>
+            <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the following error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
+          </Row>
+          <Row>
+            <p id='error-message'><i>{error}</i></p>
+          </Row>
+        </div>
+        }
+        {(status === AVAILABLE) &&
+        <AvailableContent
+          contentType={contentType}
+          sourceUrl={sourceUrl}
+          name={name}
+          thumbnail={thumbnail}
+        />
+        }
       </div>
     );
   }

client/src/containers/AssetTitle/view.jsx

@@ -2,9 +2,7 @@ import React from 'react';
 
 const AssetTitle = ({ title }) => {
   return (
-    <div className='asset-title-wrap'>
+    <h1 className='asset-title'>{title}</h1>
-      <h3 className='asset-title'>{title}</h3>
-    </div>
   );
 };
 

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';
-/*
-
-          <VerticalCollapsibleSplit
-            name={'asset-display-collapse'}
-            top={}
-            bottom={<AssetInfo />}
-          />
-
- */
 
 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}
         >
           <AssetDisplay />
-
+          <AssetTitle />
+          <button className='collapse-button' onClick={this.collapse}>
+            {this.state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
+          </button>
+          { !this.state.closed && <AssetInfo /> }
         </PageLayout>
       );
     }