moar cleanup

client/scss/_asset-display.scss

@@ -1,16 +1,30 @@
+.asset-main {
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+  align-items: center;
+}
+
 .asset-display {
   display: flex;
   flex-direction: column;
-  flex: 1 0 auto;
+  flex: 1 1 auto;
   justify-content: center;
   position: relative;
   width: 100%;
   overflow: hidden;
   align-items: center;
+  min-height: 50vh;
 }
 
 .asset-title {
-  padding-top: $secondary-padding;
+  padding-bottom: $thin-padding;
+  text-align: center;
+
+  @media (min-width: $break-point-mobile) {
+    padding-top: $secondary-padding;
+  }
 }
 
 .asset-image, .asset-video {
@@ -50,7 +64,7 @@
   }
 }
 
-/*
+
 .vertical-split, .visible-content {
   flex           : 1 0 auto;
   display        : flex;
@@ -80,7 +94,6 @@
   height: 25px;
   text-align: center;
   padding: 0px;
-  padding-left: 10px;
 
   @media (max-width: $break-point-tablet) {
     padding: 0;
@@ -101,93 +114,25 @@
     }
   }
 }
- */
 
 .asset-info {
   $asset-info-width: 1000px;
   max-width: $asset-info-width;
-
-  @media (max-width: $asset-info-width) {
-    margin: 0px auto;
-    max-width: 100%;
-    width: calc(100% - 80px);
-  }
+  margin: $primary-padding;
+  max-width: 100%;
 
   @media (max-width: $break-point-tablet) {
-    width: calc(100% - 30px);
+    margin: $primary-padding $secondary-padding;
   }
 
-  .horizontal-split {
-    justify-content: center;
-
-    .column {
-      padding-top: $primary-padding;
-      padding-bottom: $primary-padding;
-
-      .row-labeled
-      {
-        margin-bottom: $secondary-padding;
-        &:last-child { margin-bottom: 0; }
-      }
-
-      &:first-child {
-        border-right: 1px solid $grey-border;
-        margin-right: -1px;
-        padding-right: 40px;
-
-        @media (max-width: $break-point-tablet) {
-          border: none;
-          margin: 0;
-          order: 2;
-          padding: 0;
-        }
-      }
-
-      &:last-child {
-        border-left: 1px solid $grey-border;
-        padding-left: 60px;
-
-        @media (max-width: $break-point-tablet) {
-          border: none;
-          margin: 0;
-          padding: 40px 0 0 0;
-        }
-      }
-    }
+  @media (max-width: $break-point-mobile) {
+    margin: $primary-padding 0;
   }
-
-  p.asset-description {
-    color: #2E2F31;
-    font-size: 14px;
-    letter-spacing: 0;
-    line-height: 18px;
-    padding-bottom: 80px;
-    white-space: pre-line;
-    width: 360px;
-
-    @media (max-width: $break-point-tablet) {
-      margin: 22px 0 60px;
-      max-width: 600px;
-      padding: 0;
-      width: 100%;
-    }
-  }
-
-  .asset-information {
-    width: 320px;
-
-    @media (max-width: $break-point-tablet) {
-      border-bottom: 1px solid $grey-border;
-      min-width: 100%;
-      padding-bottom: 30px;
-      width: 100%;
-    }
-  }
-
 }
 
 .asset-footer {
   border-top: 1px solid $grey-border;
-  padding: $tertiary-padding $primary-padding;
+  padding-top: $primary-padding;
+  margin-top: $primary-padding;
   color: $grey;
-}
+}

client/scss/_form.scss

@@ -0,0 +1,7 @@
+.form-group {
+  padding-bottom: $secondary-padding;
+}
+
+.form-title {
+  padding-bottom: $secondary-padding;
+}

client/scss/_horizontal-split.scss

@@ -6,6 +6,21 @@
   display       : flex;
   flex-direction : row;
   justify-content: space-between;
+
+  &.horizontal-split--mobile-collapse {
+    @media (max-width: $break-point-mobile) {
+      flex-direction: column;
+
+      .horizontal-split__column {
+        width: 100%;
+      }
+
+      .horizontal-split__column--right {
+        padding-left: 0;
+        padding-top: $secondary-padding;
+      }
+    }
+  }
 };
 
 .horizontal-split__column {
@@ -16,10 +31,18 @@
 
 .horizontal-split__column--left {
   padding-right: $primary-padding;
+
+  @media (max-width: $break-point-mobile) {
+    padding-right: $thin-padding;
+  }
 }
 
 .horizontal-split__column--right {
   padding-left: $primary-padding;
+
+  @media (max-width: $break-point-mobile) {
+    padding-left: $thin-padding;
+  }
 }
 
 @media (max-width: $break-point-tablet) {

client/scss/_input.scss

@@ -10,10 +10,6 @@ input {
   display: inline-block;
 }
 
-.input-text {
-
-}
-
 .input-slider {
   width: 100%
 }
@@ -42,6 +38,10 @@ input {
   border-bottom: 1px solid $secondary-color;
 }
 
+.form-group {
+  padding-bottom: $secondary-padding;
+}
+
 // modifiers
 
 .input--full-width {

client/scss/_nav-bar.scss

@@ -2,18 +2,11 @@
   margin-top: $thin-padding;
   margin-left: $primary-padding;
   margin-right: $primary-padding;
-  
+
   @media (max-width: $break-point-mobile) {
     margin-left: 15px;
     margin-right: 15px;
   }
-
-  .select--arrow {
-    padding: 0 1.5em 0 $input-padding;
-    font-size: 14px;
-    letter-spacing: 0.4px;
-    text-transform: uppercase;
-  }
 }
 
 .nav-bar-link {
@@ -35,7 +28,7 @@
     padding-bottom: calc(1em - 2px);
     padding-left: 1em;
   }
-  
+
 }
 
 @media (max-width: $break-point-mobile ) {
@@ -46,5 +39,3 @@
     padding-left: 0.5em;
   }
 }
-
-

client/scss/_progress-bar.scss

@@ -1,3 +1,8 @@
+.progress-bar__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .progress-bar--inactive {
   color: $grey;
 }

client/scss/_publish-preview.scss

@@ -2,6 +2,10 @@
   max-width: $width-content-constrained;
   margin-left: auto;
   margin-right: auto;
+
+  @media (max-width: $break-point-mobile) {
+    font-size: .8em;
+  }
 }
 
 .publish-preview-dim {

client/scss/_row.scss

@@ -7,6 +7,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
+  padding-bottom: $tertiary-padding;
 }
 
 .row-labeled-label {
@@ -14,8 +15,6 @@
   display: flex;
   align-items: center;
   flex: 1;
-  //bad, fix this
-  .label { padding-top: 0; padding-bottom: 0; }
 }
 .row-labeled-content {
   align-self: center;
@@ -32,4 +31,4 @@
   .row-labeled-content {
     width: 100%;
   }
-}
+}

client/scss/_select.scss

@@ -0,0 +1,4 @@
+select {
+  margin: 0;
+  display: inline-block;
+}

client/scss/all.scss

@@ -1,45 +1,44 @@
-@import '~variables/_variables';
-@import '~reset/_reset';
-@import '~font/_font';
-@import '~html/_html';
-@import '~body/_body';
-@import '~react-app/_react-app';
-@import '~text/_text';
+@import '_variables';
+@import '_reset';
+@import 'font/_font.scss';
+@import '_html';
+@import '_body';
+@import '_react-app';
+@import '_text';
 
-@import '~link/_link';
-@import '~input/_input';
-@import '~select/_select';
-@import '~textarea/_textarea';
-@import '~video/_video';
+@import '_link';
+@import '_input';
+@import '_select';
+@import '_textarea';
+@import '_video';
+@import '_form';
 
-@import '~asset-display/_asset-display';
-@import '~asset-preview/_asset-preview';
-@import '~button/_button';
-@import '~button-primary/_button-primary';
-@import '~button-secondary/_button-secondary';
-@import '~click-to-copy/_click-to-copy';
-@import '~form-feedback/_form-feedback';
-@import '~horizontal-split/_horizontal-split';
-@import '~label/_label';
-@import '~nav-bar/_nav-bar';
-@import '~page-layout/_page-layout';
-@import '~page-layout-show-lite/_page-layout-show-lite';
-@import '~page-content/_page-content';
-@import '~progress-bar/_progress-bar';
-@import '~publish-preview/_publish-preview';
-@import '~share-buttons/_share-buttons';
-@import '~space-between/_space-between';
-@import '~space-around/_space-around';
-@import '~row/_row';
-@import '~tooltip/_tooltip';
-@import '~social-share-link/_social-share-link';
-
-@import '~channel-claims-display/_channel-claims-display';
-@import '~dropzone/_dropzone';
-@import '~publish-url-input/_publish-url-input';
-@import '~publish-status/_publish-status';
-@import '~publish-disabled-message/_publish-disabled-message';
-
-@import '~media-queries/_media-queries';
+@import '_asset-display';
+@import '_asset-preview';
+@import '_button';
+@import '_button-primary';
+@import '_button-secondary';
+@import '_click-to-copy';
+@import '_form-feedback';
+@import '_horizontal-split';
+@import '_label';
+@import '_nav-bar';
+@import '_page-layout';
+@import '_page-layout-show-lite';
+@import '_page-content';
+@import '_progress-bar';
+@import '_publish-preview';
+@import '_share-buttons';
+@import '_space-between';
+@import '_space-around';
+@import '_row';
+@import '_tooltip';
+@import '_social-share-link';
 
+@import '_channel-claims-display';
+@import '_dropzone';
+@import '_publish-url-input';
+@import '_publish-status';
+@import '_publish-disabled-message';
 
+@import '_media-queries';

client/scss/select/_select.scss

@@ -1,13 +0,0 @@
-select {
-  margin: 0;
-  display: inline-block;
-}
-
-.select--arrow {
-  -moz-appearance:none;
-  -webkit-appearance: none;
-  background: url('./icon/chevron-down.svg') no-repeat right;
-  cursor: pointer;
-  padding-right: 1.5em;
-  padding-left: $input-padding
-}

client/src/components/ChannelSelectDropdown/index.jsx

@@ -5,7 +5,6 @@ const ChannelSelectDropdown = ({ selectedChannel, handleSelection, loggedInChann
   return (
     <select
       id='channel-name-select'
-      className='select select--arrow'
       value={selectedChannel}
       onChange={handleSelection}>
       { loggedInChannelName && (

client/src/components/FormFeedbackDisplay/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
-  return (
+  return (errorMessage || defaultMessage) ? (
     <div className={'form-feedback'}>
       { errorMessage ? (
         <span className={'text--small text--failure'}>{errorMessage}</span>
@@ -15,7 +15,7 @@ const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
         </div>
       )}
     </div>
-  );
+  ) : null;
 };
 
 export default FormFeedbackDisplay;

client/src/components/HorizontalSplit/index.jsx

@@ -2,13 +2,26 @@ import React from 'react';
 
 class HorizontalSplit extends React.Component {
   render () {
+    const { leftSide, rightSide, collapseOnMobile } = this.props;
+
+    let className = 'horizontal-split';
+    if (collapseOnMobile) {
+      className += " horizontal-split--mobile-collapse";
+    }
+
+    // If there is no left side, move the right side to the left
+    // This is mostly for content with no description
+    // It doesn't need to be on the right side with nothing next to it.
+    const leftComponent = leftSide || rightSide;
+    const rightComponent = leftSide ? rightSide : null;
+
     return (
-      <div className={'horizontal-split'}>
+      <div className={className}>
         <div className={'horizontal-split__column horizontal-split__column--left'}>
-          {this.props.leftSide}
+          {leftComponent}
         </div>
         <div className={'horizontal-split__column horizontal-split__column--right'}>
-          {this.props.rightSide}
+          {rightComponent}
         </div>
       </div>
     );

client/src/components/NavBarChannelOptionsDropdown/index.jsx

@@ -6,7 +6,6 @@ function NavBarChannelDropdown ({ channelName, handleSelection, defaultSelection
       <select
         type='text'
         id='nav-bar-channel-select'
-        className='select select--arrow'
         onChange={handleSelection}
         value={defaultSelection}
       >

client/src/components/ProgressBar/index.jsx

@@ -62,7 +62,7 @@ class ProgressBar extends React.Component {
   };
   render () {
     return (
-      <div>
+      <div className="progress-bar__wrapper">
         {this.state.bars.map((bar, index) => bar.isActive ? <ActiveStatusBar key={index} /> : <InactiveStatusBar key={index}/>)}
       </div>
     );

client/src/components/PublishLicenseInput/index.jsx

@@ -13,7 +13,6 @@ const PublishLicenseInput = ({ handleSelect }) => {
           type='text'
           name='license'
           id='publish-license'
-          className='select select--primary'
           onChange={handleSelect}
         >
           <option value=''>Unspecified</option>

client/src/components/PublishPreview/index.jsx

@@ -19,6 +19,7 @@ class PublishPreview extends React.Component {
           </Row>
         </div>
         <HorizontalSplit
+          collapseOnMobile
           leftSide={<Dropzone />}
           rightSide={<PublishDetails />}
         />

client/src/containers/ChannelCreateForm/view.jsx

@@ -59,7 +59,7 @@ class ChannelCreateForm extends React.Component {
     return (
       <div>
         { !status ? (
-          <form onSubmit={this.handleSubmit}>
+          <form className="form-group" onSubmit={this.handleSubmit}>
             <ChannelCreateNameInput
               value={name.value}
               error={name.error}
@@ -69,10 +69,7 @@ class ChannelCreateForm extends React.Component {
               value={password.value}
               handlePasswordInput={this.handlePasswordInput}
             />
-            <FormFeedbackDisplay
-              errorMessage={formError}
-              defaultMessage={'Choose a name and password for your channel'}
-            />
+            <FormFeedbackDisplay errorMessage={formError} />
             <ButtonPrimary
               type={'submit'}
               value={'Create Channel'}

client/src/containers/ChannelLoginForm/view.jsx

@@ -49,7 +49,7 @@ class ChannelLoginForm extends React.Component {
   }
   render () {
     return (
-      <form onSubmit={this.loginToChannel}>
+      <form className="form-group" onSubmit={this.loginToChannel}>
         <ChannelLoginNameInput
           channelName={this.state.channelName}
           handleInput={this.handleInput}
@@ -58,10 +58,7 @@ class ChannelLoginForm extends React.Component {
           channelPassword={this.state.channelPassword}
           handleInput={this.handleInput}
         />
-        <FormFeedbackDisplay
-          errorMessage={this.state.error}
-          defaultMessage={'Enter the name and password for your channel'}
-        />
+        <FormFeedbackDisplay errorMessage={this.state.error} />
         <ButtonPrimary
           type={'submit'}
           value={'Authenticate'}

client/src/containers/ChannelSelect/view.jsx

@@ -40,16 +40,16 @@ class ChannelSelect extends React.Component {
     const { publishInChannel, channelError, selectedChannel, loggedInChannelName, publishOnlyApproved } = this.props;
     if (publishOnlyApproved) {
       return (
-        <div>
+        <React.Fragment>
           <RowLabeled
             label={<Label value={'Channel:'} />}
             content={<span>{loggedInChannelName}</span>}
           />
-        </div>
+        </React.Fragment>
       );
     }
     return (
-      <div>
+      <React.Fragment>
         <RowLabeled
           label={
             <ChooseAnonymousPublishRadio
@@ -87,7 +87,7 @@ class ChannelSelect extends React.Component {
             { (selectedChannel === CREATE) && <ChannelCreateForm /> }
           </div>
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

client/src/containers/ChannelTools/view.jsx

@@ -7,14 +7,14 @@ class ChannelTools extends React.Component {
   render () {
     return (
       <div>
-        <Row>
-          <h3>Log in to existing channel</h3>
-          <ChannelLoginForm />
-        </Row>
-        {!this.props.closedRegistration && (<Row>
-          <h3>Create new channel</h3>
-          <ChannelCreateForm />
-        </Row>)}
+        <h3 className="form-title">Log in to existing channel</h3>
+        <ChannelLoginForm />
+        {!this.props.closedRegistration && (
+          <React.Fragment>
+            <h3 className="form-title">Create new channel</h3>
+            <ChannelCreateForm />
+          </React.Fragment>
+        )}
       </div>
     );
   }

client/src/containers/Dropzone/view.jsx

@@ -84,7 +84,7 @@ class Dropzone extends React.Component {
     const { dragOver, mouseOver, dimPreview } = this.state;
     const { file, thumbnail, fileError, isUpdate, sourceUrl, fileExt } = this.props;
     return (
-      <div>
+      <React.Fragment>
         {isUpdate && fileExt === 'mp4' ? (
           <p>Video updates are currently disabled. This feature will be available soon. You can edit metadata.</p>
         ) : (
@@ -145,7 +145,7 @@ class Dropzone extends React.Component {
             </div>
           </div>
         )}
-      </div>
+      </React.Fragment>
     );
   }
 };

client/src/containers/PublishDetails/view.jsx

@@ -45,7 +45,7 @@ class PublishDetails extends React.Component {
     return (
       <div>
         {isUpdate ? (asset && (
-          <Row>
+          <React.Fragment>
             <RowLabeled
               label={
                 <Label value={'Channel:'} />
@@ -56,16 +56,14 @@ class PublishDetails extends React.Component {
                 </span>
               }
             />
-          </Row>
+          </React.Fragment>
         )) : (
           <React.Fragment>
             <Row>
               <PublishUrlInput />
             </Row>
 
-            <Row>
-              <ChannelSelect />
-            </Row>
+            <ChannelSelect />
           </React.Fragment>
         )}
 

client/src/containers/PublishMetadataInputs/view.jsx

@@ -32,23 +32,17 @@ class PublishMetadataInputs extends React.Component {
       <div>
   {(showMetadataInputs || isUpdate) && (
           <React.Fragment>
-            <Row>
-              <PublishDescriptionInput
-                description={this.props.description}
-                handleInput={this.handleInput}
-              />
-            </Row>
-            <Row>
-              <PublishLicenseInput
-                handleSelect={this.handleSelect}
-              />
-            </Row>
-            <Row>
-              <PublishNsfwInput
-                nsfw={this.props.nsfw}
-                handleInput={this.handleInput}
-              />
-            </Row>
+            <PublishDescriptionInput
+              description={this.props.description}
+              handleInput={this.handleInput}
+            />
+            <PublishLicenseInput
+              handleSelect={this.handleSelect}
+            />
+            <PublishNsfwInput
+              nsfw={this.props.nsfw}
+              handleInput={this.handleInput}
+            />
           </React.Fragment>
         )}
         {!isUpdate && (

client/src/pages/AboutPage/index.jsx

@@ -13,6 +13,7 @@ class AboutPage extends React.Component {
         pageUri={'about'}
       >
         <HorizontalSplit
+          collapseOnMobile
           leftSide={<AboutSpeechOverview />}
           rightSide={<AboutSpeechDetails />}
         />

client/src/pages/LoginPage/view.jsx

@@ -20,6 +20,7 @@ class LoginPage extends React.Component {
         pageUri={'login'}
       >
         <HorizontalSplit
+          collapseOnMobile
           leftSide={<ChannelAbout />}
           rightSide={<ChannelTools />}
         />

client/src/pages/ShowAssetDetails/view.jsx

@@ -14,7 +14,7 @@ class ShowAssetDetails extends React.Component {
     // this.storageKey = 'vert-split-state-' + this.props.name;
     // const closed = window && window.localStorage
     //   ? !!window.localStorage.getItem(this.storageKey) : false;
-    const closed = false;
+    const closed = true;
     this.state = { closed: closed };
   }
 
@@ -35,12 +35,15 @@ class ShowAssetDetails extends React.Component {
           pageTitle={`${name} - details`}
           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 /> }
+          <div className="asset-main">
+            <AssetDisplay />
+            <AssetTitle />
+            
+            <button className='collapse-button' onClick={this.collapse}>
+              {this.state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
+            </button>
+          </div>
+          {!this.state.closed && <AssetInfo />}
         </PageLayout>
       );
     }

deployment-config.json

@@ -0,0 +1,10 @@
+{
+    "type": "sftp",
+    "host": "sean.lbry.tech",
+    "username": "lbry",
+    "password": "",
+    "port": 22,
+    "remotePath": "/home/lbry/spee.ch",
+    "sshKeyFile": "/Users/sean/.ssh/id_rsa2",
+    "uploadOnSave": true
+}