From 3bbe2582e5349f1bcc9849893d348008e208d30c Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Sat, 10 Nov 2018 14:59:53 -0500
Subject: [PATCH] moar cleanup
---
.../{asset-display => }/_asset-display.scss | 105 +++++-------------
.../{asset-preview => }/_asset-preview.scss | 0
client/scss/{body => }/_body.scss | 0
.../{button-primary => }/_button-primary.scss | 0
.../_button-secondary.scss | 0
client/scss/{button => }/_button.scss | 0
.../_channel-claims-display.scss | 0
.../{click-to-copy => }/_click-to-copy.scss | 0
client/scss/{dropzone => }/_dropzone.scss | 0
.../{form-feedback => }/_form-feedback.scss | 0
client/scss/_form.scss | 7 ++
.../_horizontal-split.scss | 23 ++++
client/scss/{html => }/_html.scss | 0
client/scss/{input => }/_input.scss | 8 +-
client/scss/{label => }/_label.scss | 0
client/scss/{link => }/_link.scss | 0
.../{media-queries => }/_media-queries.scss | 0
client/scss/{nav-bar => }/_nav-bar.scss | 13 +--
.../{page-content => }/_page-content.scss | 0
.../_page-layout-show-lite.scss | 0
.../scss/{page-layout => }/_page-layout.scss | 0
.../{progress-bar => }/_progress-bar.scss | 5 +
.../_publish-disabled-message.scss | 0
.../_publish-preview.scss | 4 +
.../{publish-status => }/_publish-status.scss | 0
.../_publish-url-input.scss | 0
client/scss/{react-app => }/_react-app.scss | 0
client/scss/{reset => }/_reset.scss | 0
client/scss/{row => }/_row.scss | 5 +-
client/scss/_select.scss | 4 +
.../{share-buttons => }/_share-buttons.scss | 0
.../_social-share-link.scss | 0
.../{space-around => }/_space-around.scss | 0
.../{space-between => }/_space-between.scss | 0
client/scss/{text => }/_text.scss | 0
client/scss/{textarea => }/_textarea.scss | 0
client/scss/{tooltip => }/_tooltip.scss | 0
client/scss/{variables => }/_variables.scss | 0
client/scss/{video => }/_video.scss | 0
client/scss/all.scss | 81 +++++++-------
client/scss/select/_select.scss | 13 ---
.../ChannelSelectDropdown/index.jsx | 1 -
.../components/FormFeedbackDisplay/index.jsx | 4 +-
.../src/components/HorizontalSplit/index.jsx | 19 +++-
.../NavBarChannelOptionsDropdown/index.jsx | 1 -
client/src/components/ProgressBar/index.jsx | 2 +-
.../components/PublishLicenseInput/index.jsx | 1 -
.../src/components/PublishPreview/index.jsx | 1 +
.../src/containers/ChannelCreateForm/view.jsx | 7 +-
.../src/containers/ChannelLoginForm/view.jsx | 7 +-
client/src/containers/ChannelSelect/view.jsx | 8 +-
client/src/containers/ChannelTools/view.jsx | 16 +--
client/src/containers/Dropzone/view.jsx | 4 +-
client/src/containers/PublishDetails/view.jsx | 8 +-
.../containers/PublishMetadataInputs/view.jsx | 28 ++---
client/src/pages/AboutPage/index.jsx | 1 +
client/src/pages/LoginPage/view.jsx | 1 +
client/src/pages/ShowAssetDetails/view.jsx | 17 +--
deployment-config.json | 10 ++
59 files changed, 190 insertions(+), 214 deletions(-)
rename client/scss/{asset-display => }/_asset-display.scss (53%)
rename client/scss/{asset-preview => }/_asset-preview.scss (100%)
rename client/scss/{body => }/_body.scss (100%)
rename client/scss/{button-primary => }/_button-primary.scss (100%)
rename client/scss/{button-secondary => }/_button-secondary.scss (100%)
rename client/scss/{button => }/_button.scss (100%)
rename client/scss/{channel-claims-display => }/_channel-claims-display.scss (100%)
rename client/scss/{click-to-copy => }/_click-to-copy.scss (100%)
rename client/scss/{dropzone => }/_dropzone.scss (100%)
rename client/scss/{form-feedback => }/_form-feedback.scss (100%)
create mode 100644 client/scss/_form.scss
rename client/scss/{horizontal-split => }/_horizontal-split.scss (60%)
rename client/scss/{html => }/_html.scss (100%)
rename client/scss/{input => }/_input.scss (92%)
rename client/scss/{label => }/_label.scss (100%)
rename client/scss/{link => }/_link.scss (100%)
rename client/scss/{media-queries => }/_media-queries.scss (100%)
rename client/scss/{nav-bar => }/_nav-bar.scss (84%)
rename client/scss/{page-content => }/_page-content.scss (100%)
rename client/scss/{page-layout-show-lite => }/_page-layout-show-lite.scss (100%)
rename client/scss/{page-layout => }/_page-layout.scss (100%)
rename client/scss/{progress-bar => }/_progress-bar.scss (50%)
rename client/scss/{publish-disabled-message => }/_publish-disabled-message.scss (100%)
rename client/scss/{publish-preview => }/_publish-preview.scss (68%)
rename client/scss/{publish-status => }/_publish-status.scss (100%)
rename client/scss/{publish-url-input => }/_publish-url-input.scss (100%)
rename client/scss/{react-app => }/_react-app.scss (100%)
rename client/scss/{reset => }/_reset.scss (100%)
rename client/scss/{row => }/_row.scss (87%)
create mode 100644 client/scss/_select.scss
rename client/scss/{share-buttons => }/_share-buttons.scss (100%)
rename client/scss/{social-share-link => }/_social-share-link.scss (100%)
rename client/scss/{space-around => }/_space-around.scss (100%)
rename client/scss/{space-between => }/_space-between.scss (100%)
rename client/scss/{text => }/_text.scss (100%)
rename client/scss/{textarea => }/_textarea.scss (100%)
rename client/scss/{tooltip => }/_tooltip.scss (100%)
rename client/scss/{variables => }/_variables.scss (100%)
rename client/scss/{video => }/_video.scss (100%)
delete mode 100644 client/scss/select/_select.scss
create mode 100644 deployment-config.json
diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/_asset-display.scss
similarity index 53%
rename from client/scss/asset-display/_asset-display.scss
rename to client/scss/_asset-display.scss
index 40800f02..2350f29f 100644
--- a/client/scss/asset-display/_asset-display.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/_asset-preview.scss
similarity index 100%
rename from client/scss/asset-preview/_asset-preview.scss
rename to client/scss/_asset-preview.scss
diff --git a/client/scss/body/_body.scss b/client/scss/_body.scss
similarity index 100%
rename from client/scss/body/_body.scss
rename to client/scss/_body.scss
diff --git a/client/scss/button-primary/_button-primary.scss b/client/scss/_button-primary.scss
similarity index 100%
rename from client/scss/button-primary/_button-primary.scss
rename to client/scss/_button-primary.scss
diff --git a/client/scss/button-secondary/_button-secondary.scss b/client/scss/_button-secondary.scss
similarity index 100%
rename from client/scss/button-secondary/_button-secondary.scss
rename to client/scss/_button-secondary.scss
diff --git a/client/scss/button/_button.scss b/client/scss/_button.scss
similarity index 100%
rename from client/scss/button/_button.scss
rename to client/scss/_button.scss
diff --git a/client/scss/channel-claims-display/_channel-claims-display.scss b/client/scss/_channel-claims-display.scss
similarity index 100%
rename from client/scss/channel-claims-display/_channel-claims-display.scss
rename to client/scss/_channel-claims-display.scss
diff --git a/client/scss/click-to-copy/_click-to-copy.scss b/client/scss/_click-to-copy.scss
similarity index 100%
rename from client/scss/click-to-copy/_click-to-copy.scss
rename to client/scss/_click-to-copy.scss
diff --git a/client/scss/dropzone/_dropzone.scss b/client/scss/_dropzone.scss
similarity index 100%
rename from client/scss/dropzone/_dropzone.scss
rename to client/scss/_dropzone.scss
diff --git a/client/scss/form-feedback/_form-feedback.scss b/client/scss/_form-feedback.scss
similarity index 100%
rename from client/scss/form-feedback/_form-feedback.scss
rename to client/scss/_form-feedback.scss
diff --git a/client/scss/_form.scss b/client/scss/_form.scss
new file mode 100644
index 00000000..16603923
--- /dev/null
+++ b/client/scss/_form.scss
@@ -0,0 +1,7 @@
+.form-group {
+ padding-bottom: $secondary-padding;
+}
+
+.form-title {
+ padding-bottom: $secondary-padding;
+}
diff --git a/client/scss/horizontal-split/_horizontal-split.scss b/client/scss/_horizontal-split.scss
similarity index 60%
rename from client/scss/horizontal-split/_horizontal-split.scss
rename to client/scss/_horizontal-split.scss
index cb1fad35..0cf4fc87 100644
--- a/client/scss/horizontal-split/_horizontal-split.scss
+++ b/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) {
diff --git a/client/scss/html/_html.scss b/client/scss/_html.scss
similarity index 100%
rename from client/scss/html/_html.scss
rename to client/scss/_html.scss
diff --git a/client/scss/input/_input.scss b/client/scss/_input.scss
similarity index 92%
rename from client/scss/input/_input.scss
rename to client/scss/_input.scss
index c0249968..8cfedf4b 100644
--- a/client/scss/input/_input.scss
+++ b/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 {
diff --git a/client/scss/label/_label.scss b/client/scss/_label.scss
similarity index 100%
rename from client/scss/label/_label.scss
rename to client/scss/_label.scss
diff --git a/client/scss/link/_link.scss b/client/scss/_link.scss
similarity index 100%
rename from client/scss/link/_link.scss
rename to client/scss/_link.scss
diff --git a/client/scss/media-queries/_media-queries.scss b/client/scss/_media-queries.scss
similarity index 100%
rename from client/scss/media-queries/_media-queries.scss
rename to client/scss/_media-queries.scss
diff --git a/client/scss/nav-bar/_nav-bar.scss b/client/scss/_nav-bar.scss
similarity index 84%
rename from client/scss/nav-bar/_nav-bar.scss
rename to client/scss/_nav-bar.scss
index f817e781..038ebf57 100644
--- a/client/scss/nav-bar/_nav-bar.scss
+++ b/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;
}
}
-
-
diff --git a/client/scss/page-content/_page-content.scss b/client/scss/_page-content.scss
similarity index 100%
rename from client/scss/page-content/_page-content.scss
rename to client/scss/_page-content.scss
diff --git a/client/scss/page-layout-show-lite/_page-layout-show-lite.scss b/client/scss/_page-layout-show-lite.scss
similarity index 100%
rename from client/scss/page-layout-show-lite/_page-layout-show-lite.scss
rename to client/scss/_page-layout-show-lite.scss
diff --git a/client/scss/page-layout/_page-layout.scss b/client/scss/_page-layout.scss
similarity index 100%
rename from client/scss/page-layout/_page-layout.scss
rename to client/scss/_page-layout.scss
diff --git a/client/scss/progress-bar/_progress-bar.scss b/client/scss/_progress-bar.scss
similarity index 50%
rename from client/scss/progress-bar/_progress-bar.scss
rename to client/scss/_progress-bar.scss
index 7a6f7e6d..6a8979a6 100644
--- a/client/scss/progress-bar/_progress-bar.scss
+++ b/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;
}
diff --git a/client/scss/publish-disabled-message/_publish-disabled-message.scss b/client/scss/_publish-disabled-message.scss
similarity index 100%
rename from client/scss/publish-disabled-message/_publish-disabled-message.scss
rename to client/scss/_publish-disabled-message.scss
diff --git a/client/scss/publish-preview/_publish-preview.scss b/client/scss/_publish-preview.scss
similarity index 68%
rename from client/scss/publish-preview/_publish-preview.scss
rename to client/scss/_publish-preview.scss
index af3aa131..e275e9b2 100644
--- a/client/scss/publish-preview/_publish-preview.scss
+++ b/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 {
diff --git a/client/scss/publish-status/_publish-status.scss b/client/scss/_publish-status.scss
similarity index 100%
rename from client/scss/publish-status/_publish-status.scss
rename to client/scss/_publish-status.scss
diff --git a/client/scss/publish-url-input/_publish-url-input.scss b/client/scss/_publish-url-input.scss
similarity index 100%
rename from client/scss/publish-url-input/_publish-url-input.scss
rename to client/scss/_publish-url-input.scss
diff --git a/client/scss/react-app/_react-app.scss b/client/scss/_react-app.scss
similarity index 100%
rename from client/scss/react-app/_react-app.scss
rename to client/scss/_react-app.scss
diff --git a/client/scss/reset/_reset.scss b/client/scss/_reset.scss
similarity index 100%
rename from client/scss/reset/_reset.scss
rename to client/scss/_reset.scss
diff --git a/client/scss/row/_row.scss b/client/scss/_row.scss
similarity index 87%
rename from client/scss/row/_row.scss
rename to client/scss/_row.scss
index bbf63453..4fbdf10c 100644
--- a/client/scss/row/_row.scss
+++ b/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%;
}
-}
\ No newline at end of file
+}
diff --git a/client/scss/_select.scss b/client/scss/_select.scss
new file mode 100644
index 00000000..e9642528
--- /dev/null
+++ b/client/scss/_select.scss
@@ -0,0 +1,4 @@
+select {
+ margin: 0;
+ display: inline-block;
+}
diff --git a/client/scss/share-buttons/_share-buttons.scss b/client/scss/_share-buttons.scss
similarity index 100%
rename from client/scss/share-buttons/_share-buttons.scss
rename to client/scss/_share-buttons.scss
diff --git a/client/scss/social-share-link/_social-share-link.scss b/client/scss/_social-share-link.scss
similarity index 100%
rename from client/scss/social-share-link/_social-share-link.scss
rename to client/scss/_social-share-link.scss
diff --git a/client/scss/space-around/_space-around.scss b/client/scss/_space-around.scss
similarity index 100%
rename from client/scss/space-around/_space-around.scss
rename to client/scss/_space-around.scss
diff --git a/client/scss/space-between/_space-between.scss b/client/scss/_space-between.scss
similarity index 100%
rename from client/scss/space-between/_space-between.scss
rename to client/scss/_space-between.scss
diff --git a/client/scss/text/_text.scss b/client/scss/_text.scss
similarity index 100%
rename from client/scss/text/_text.scss
rename to client/scss/_text.scss
diff --git a/client/scss/textarea/_textarea.scss b/client/scss/_textarea.scss
similarity index 100%
rename from client/scss/textarea/_textarea.scss
rename to client/scss/_textarea.scss
diff --git a/client/scss/tooltip/_tooltip.scss b/client/scss/_tooltip.scss
similarity index 100%
rename from client/scss/tooltip/_tooltip.scss
rename to client/scss/_tooltip.scss
diff --git a/client/scss/variables/_variables.scss b/client/scss/_variables.scss
similarity index 100%
rename from client/scss/variables/_variables.scss
rename to client/scss/_variables.scss
diff --git a/client/scss/video/_video.scss b/client/scss/_video.scss
similarity index 100%
rename from client/scss/video/_video.scss
rename to client/scss/_video.scss
diff --git a/client/scss/all.scss b/client/scss/all.scss
index 6629e7d1..c61e42bd 100644
--- a/client/scss/all.scss
+++ b/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';
diff --git a/client/scss/select/_select.scss b/client/scss/select/_select.scss
deleted file mode 100644
index 6c1154c3..00000000
--- a/client/scss/select/_select.scss
+++ /dev/null
@@ -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
-}
diff --git a/client/src/components/ChannelSelectDropdown/index.jsx b/client/src/components/ChannelSelectDropdown/index.jsx
index fee212c7..2079c05c 100644
--- a/client/src/components/ChannelSelectDropdown/index.jsx
+++ b/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 && (
diff --git a/client/src/components/FormFeedbackDisplay/index.jsx b/client/src/components/FormFeedbackDisplay/index.jsx
index c324c7f0..9050f4e2 100644
--- a/client/src/components/FormFeedbackDisplay/index.jsx
+++ b/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;
diff --git a/client/src/components/HorizontalSplit/index.jsx b/client/src/components/HorizontalSplit/index.jsx
index 7b82a2c1..6bcbe6b4 100644
--- a/client/src/components/HorizontalSplit/index.jsx
+++ b/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>
);
diff --git a/client/src/components/NavBarChannelOptionsDropdown/index.jsx b/client/src/components/NavBarChannelOptionsDropdown/index.jsx
index 4274df26..20133416 100644
--- a/client/src/components/NavBarChannelOptionsDropdown/index.jsx
+++ b/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}
>
diff --git a/client/src/components/ProgressBar/index.jsx b/client/src/components/ProgressBar/index.jsx
index fdaf9422..cb41cc38 100644
--- a/client/src/components/ProgressBar/index.jsx
+++ b/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>
);
diff --git a/client/src/components/PublishLicenseInput/index.jsx b/client/src/components/PublishLicenseInput/index.jsx
index 6ef59418..af827ec8 100644
--- a/client/src/components/PublishLicenseInput/index.jsx
+++ b/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>
diff --git a/client/src/components/PublishPreview/index.jsx b/client/src/components/PublishPreview/index.jsx
index 12c8bda1..ec962bda 100644
--- a/client/src/components/PublishPreview/index.jsx
+++ b/client/src/components/PublishPreview/index.jsx
@@ -19,6 +19,7 @@ class PublishPreview extends React.Component {
</Row>
</div>
<HorizontalSplit
+ collapseOnMobile
leftSide={<Dropzone />}
rightSide={<PublishDetails />}
/>
diff --git a/client/src/containers/ChannelCreateForm/view.jsx b/client/src/containers/ChannelCreateForm/view.jsx
index 2d175ce2..49ef639d 100644
--- a/client/src/containers/ChannelCreateForm/view.jsx
+++ b/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'}
diff --git a/client/src/containers/ChannelLoginForm/view.jsx b/client/src/containers/ChannelLoginForm/view.jsx
index 54dd8ad2..804e6936 100644
--- a/client/src/containers/ChannelLoginForm/view.jsx
+++ b/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'}
diff --git a/client/src/containers/ChannelSelect/view.jsx b/client/src/containers/ChannelSelect/view.jsx
index d04007d5..b8276a3d 100644
--- a/client/src/containers/ChannelSelect/view.jsx
+++ b/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>
);
}
}
diff --git a/client/src/containers/ChannelTools/view.jsx b/client/src/containers/ChannelTools/view.jsx
index 455b6d26..c3511b4b 100644
--- a/client/src/containers/ChannelTools/view.jsx
+++ b/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>
);
}
diff --git a/client/src/containers/Dropzone/view.jsx b/client/src/containers/Dropzone/view.jsx
index 436bac99..b524b014 100644
--- a/client/src/containers/Dropzone/view.jsx
+++ b/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>
);
}
};
diff --git a/client/src/containers/PublishDetails/view.jsx b/client/src/containers/PublishDetails/view.jsx
index bc9dc45e..2c88c6df 100644
--- a/client/src/containers/PublishDetails/view.jsx
+++ b/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>
)}
diff --git a/client/src/containers/PublishMetadataInputs/view.jsx b/client/src/containers/PublishMetadataInputs/view.jsx
index df8d86a5..2234e2ad 100644
--- a/client/src/containers/PublishMetadataInputs/view.jsx
+++ b/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 && (
diff --git a/client/src/pages/AboutPage/index.jsx b/client/src/pages/AboutPage/index.jsx
index 621f27b7..1b197ad5 100644
--- a/client/src/pages/AboutPage/index.jsx
+++ b/client/src/pages/AboutPage/index.jsx
@@ -13,6 +13,7 @@ class AboutPage extends React.Component {
pageUri={'about'}
>
<HorizontalSplit
+ collapseOnMobile
leftSide={<AboutSpeechOverview />}
rightSide={<AboutSpeechDetails />}
/>
diff --git a/client/src/pages/LoginPage/view.jsx b/client/src/pages/LoginPage/view.jsx
index a3804e59..fb2968a5 100644
--- a/client/src/pages/LoginPage/view.jsx
+++ b/client/src/pages/LoginPage/view.jsx
@@ -20,6 +20,7 @@ class LoginPage extends React.Component {
pageUri={'login'}
>
<HorizontalSplit
+ collapseOnMobile
leftSide={<ChannelAbout />}
rightSide={<ChannelTools />}
/>
diff --git a/client/src/pages/ShowAssetDetails/view.jsx b/client/src/pages/ShowAssetDetails/view.jsx
index 87cce975..7798531d 100644
--- a/client/src/pages/ShowAssetDetails/view.jsx
+++ b/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>
);
}
diff --git a/deployment-config.json b/deployment-config.json
new file mode 100644
index 00000000..c4bc966f
--- /dev/null
+++ b/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
+}