From 61b8cd9fcfbaf9b99389653381267134b3c10049 Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Thu, 8 Nov 2018 19:44:59 -0500 Subject: [PATCH] strip it down --- client/scss/all.scss | 3 - client/scss/asset-display/_asset-display.scss | 94 +++------ .../scss/button-primary/_button-primary.scss | 36 +--- .../button-secondary/_button-secondary.scss | 22 +- .../button-tertiary/_button-tertiary.scss | 14 -- client/scss/button/_button.scss | 18 ++ client/scss/click-to-copy/_click-to-copy.scss | 8 +- client/scss/column/_column.scss | 4 - client/scss/dropzone/_dropzone.scss | 10 + .../_horizontal-quad-split.scss | 53 ----- .../horizontal-split/_horizontal-split.scss | 35 ++-- client/scss/input/_input.scss | 1 - client/scss/label/_label.scss | 2 +- client/scss/link/_link.scss | 73 +------ client/scss/media-queries/_media-queries.scss | 19 +- client/scss/nav-bar/_nav-bar.scss | 15 +- client/scss/page-layout/_page-layout.scss | 16 ++ client/scss/progress-bar/_progress-bar.scss | 2 +- .../publish-preview/_publish-preview.scss | 6 + .../publish-url-input/_publish-url-input.scss | 2 +- client/scss/reset/_reset.scss | 4 + client/scss/row/_row.scss | 67 +----- client/scss/select/_select.scss | 4 - client/scss/share-buttons/_share-buttons.scss | 2 +- .../social-share-link/_social-share-link.scss | 1 - client/scss/text/_text.scss | 32 +-- client/scss/textarea/_textarea.scss | 4 - client/scss/variables/_variables.scss | 31 ++- .../scss/vertical-split/_vertical-split.scss | 11 +- .../components/AboutSpeechDetails/index.jsx | 4 +- .../components/AboutSpeechOverview/index.jsx | 18 +- .../src/components/AssetInfoFooter/index.js | 14 ++ .../src/components/AssetShareButtons/index.js | 40 ++-- client/src/components/ButtonPrimary/index.jsx | 2 +- .../components/ButtonPrimaryJumbo/index.jsx | 2 +- .../src/components/ButtonTertiary/index.jsx | 14 -- client/src/components/ChannelAbout/index.jsx | 5 +- client/src/components/Column/index.jsx | 13 -- .../DropzoneDropItDisplay/index.jsx | 2 +- .../DropzoneInstructionsDisplay/index.jsx | 8 +- .../components/FormFeedbackDisplay/index.jsx | 6 +- .../components/HorizontalQuadSplit/index.jsx | 37 ---- .../src/components/HorizontalSplit/index.jsx | 4 +- .../src/components/PublishPreview/index.jsx | 12 +- client/src/components/RowLabeledAlt/index.jsx | 14 -- .../VerticalCollapsibleSplit/index.jsx | 9 +- client/src/containers/AssetInfo/view.jsx | 193 ++++++++---------- .../src/containers/ChannelCreateForm/view.jsx | 2 +- client/src/containers/ChannelTools/view.jsx | 4 +- client/src/containers/PublishDetails/view.jsx | 4 +- .../containers/PublishMetadataInputs/view.jsx | 33 +-- .../containers/PublishThumbnailInput/view.jsx | 2 +- client/src/pages/ShowAssetDetails/view.jsx | 17 +- 53 files changed, 385 insertions(+), 663 deletions(-) delete mode 100644 client/scss/button-tertiary/_button-tertiary.scss delete mode 100644 client/scss/column/_column.scss delete mode 100644 client/scss/horizontal-quad-split/_horizontal-quad-split.scss create mode 100644 client/src/components/AssetInfoFooter/index.js delete mode 100644 client/src/components/ButtonTertiary/index.jsx delete mode 100644 client/src/components/Column/index.jsx delete mode 100644 client/src/components/HorizontalQuadSplit/index.jsx delete mode 100644 client/src/components/RowLabeledAlt/index.jsx diff --git a/client/scss/all.scss b/client/scss/all.scss index 4d12e3b5..c21d276c 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -17,11 +17,8 @@ @import '~button/_button'; @import '~button-primary/_button-primary'; @import '~button-secondary/_button-secondary'; -@import '~button-tertiary/_button-tertiary'; @import '~click-to-copy/_click-to-copy'; -@import '~column/_column'; @import '~form-feedback/_form-feedback'; -@import '~horizontal-quad-split/_horizontal-quad-split'; @import '~horizontal-split/_horizontal-split'; @import '~label/_label'; @import '~nav-bar/_nav-bar'; diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss index 1267501c..29397d33 100644 --- a/client/scss/asset-display/_asset-display.scss +++ b/client/scss/asset-display/_asset-display.scss @@ -1,57 +1,39 @@ .asset-display { - background: #F6F6F6; display: flex; flex-direction: column; flex: 1 0 auto; justify-content: center; position: relative; width: 100%; - - &:after { - background: transparent; - bottom: 0; - box-shadow: inset 0 1px 2px 2px $shadow-color; - content: ''; - height: 1px; - left: 0; - position: absolute; - top: auto; - 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; } .asset-title { color: #2E2F31; - font-size: 26px; + font-size: $text-x-large; font-weight: normal; letter-spacing: 0; - line-height: 32px; - margin-top: 40px; + margin-top: $primary-padding; text-align: center; @media (max-width: $break-point-tablet) { - padding: 0 20px; + padding: 0 $tertiary-padding; } } .asset-image, .asset-video { - margin: 60px auto; max-height: 100%; - max-width: 60vh; + max-width: 100%; + margin-left: auto; + margin-right: auto; object-fit: contain; object-position: center; - - @media (max-width: $break-point-small) { - max-width: calc(100% - 30px); - } } -.asset-video { - border: none; - margin: 0px auto; - width: 100%; - padding: 6px; -} +/*below must die if this is intended to be shareable component! it also probably doesn't need to be*/ .visible-content { margin: 0; @@ -67,15 +49,6 @@ } } - &:before{ - box-shadow: inset 2px 3px 3px 2px $shadow-color; - content: ''; - height: 100px; - position: absolute; - width: 100%; - z-index: 100; - } - &:after { box-shadow: 0px 2px 3px 2px $shadow-color; content: ''; @@ -87,16 +60,17 @@ } } -.asset-information-wrap { - max-width: 800px; +.asset-info { + $asset-info-width: 1000px; + max-width: $asset-info-width; - @media (max-width: $break-point-tablet) { + @media (max-width: $asset-info-width) { margin: 0px auto; max-width: 100%; width: calc(100% - 80px); } - @media (max-width: $break-point-phone) { + @media (max-width: $break-point-tablet) { width: calc(100% - 30px); } @@ -104,10 +78,17 @@ justify-content: center; .column { - padding-top: 40px; + 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-alt; + border-right: 1px solid $grey-border; margin-right: -1px; padding-right: 40px; @@ -120,7 +101,7 @@ } &:last-child { - border-left: 1px solid $grey-alt; + border-left: 1px solid $grey-border; padding-left: 60px; @media (max-width: $break-point-tablet) { @@ -153,7 +134,7 @@ width: 320px; @media (max-width: $break-point-tablet) { - border-bottom: 1px solid $grey-alt; + border-bottom: 1px solid $grey-border; min-width: 100%; padding-bottom: 30px; width: 100%; @@ -163,22 +144,7 @@ } .asset-footer { - border-top: 1px solid $grey-alt; - padding-bottom: 80px; - padding-top: 30px; - - @media (max-width: $break-point-tablet) { - padding-top: 22px; - padding-bottom: 0; - } - - .claim-address { - - .link--brand { - font-size: 14px; - font-weight: 300; - line-height: 18px; - } - } - + border-top: 1px solid $grey-border; + padding: $tertiary-padding $primary-padding; + color: $grey; } \ No newline at end of file diff --git a/client/scss/button-primary/_button-primary.scss b/client/scss/button-primary/_button-primary.scss index ce2ac526..37c0a6e4 100644 --- a/client/scss/button-primary/_button-primary.scss +++ b/client/scss/button-primary/_button-primary.scss @@ -1,34 +1,16 @@ -.button-primary, .button-primary:focus, .button-primary:active { - border: $button-border-width $button-border-strength $primary-color; - margin-top: $thin-padding; - margin-bottom: $thin-padding; - padding: $thin-padding; +.button--primary, .button--primary:focus, .button--primary:active { + border-color: $primary-color; color: $primary-color; background-color: $background-color; - outline: 0; } -.button-primary:focus { - border-color: $secondary-color; - background-color: $tertiary-color; -} - - -.button-primary:hover { - border-color: $interactive-color; +.button--primary:hover { color: $background-color; - background-color: $interactive-color; + background-color: $primary-color; } -.button-primary:active{ - border-color: $background-color; - color: $secondary-color; - background-color: $tertiary-color; -} - -.button-primary--jumbo, .button-primary--jumbo:focus, .button-primary--jumbo:active { - width: $button-full-width; - padding-top: $secondary-padding; - padding-bottom: $secondary-padding; - font-size: x-large; -} +.button--primary:active { + $color: darken($primary-color, 10%); + border-color: $color; + background-color: $color; +} \ No newline at end of file diff --git a/client/scss/button-secondary/_button-secondary.scss b/client/scss/button-secondary/_button-secondary.scss index 29463cc9..c43dfda6 100644 --- a/client/scss/button-secondary/_button-secondary.scss +++ b/client/scss/button-secondary/_button-secondary.scss @@ -1,21 +1,11 @@ -.button--secondary, .button--secondary:focus { - border: 0; - border-bottom: $button-border-width $button-border-strength $primary-color; - padding: 0.5em; - color: $primary-color; +.button--secondary, .button--secondary:focus, .button--secondary:active { + border-bottom-color: $secondary-color; + color: $secondary-color; background-color: $background-color; - outline: 0; -} - -.button--secondary:focus{ - border-color: $secondary-color; - background-color: $tertiary-color; -} - -.button--secondary:hover { - color: $interactive-color; } .button--secondary:active { - color: $background-color; + $color: darken($secondary-color, 10%); + color: $color; + border-bottom-color: $color; } diff --git a/client/scss/button-tertiary/_button-tertiary.scss b/client/scss/button-tertiary/_button-tertiary.scss deleted file mode 100644 index 63bb23c3..00000000 --- a/client/scss/button-tertiary/_button-tertiary.scss +++ /dev/null @@ -1,14 +0,0 @@ -.button--tertiary, .button--tertiary:focus, .button--tertiary:active { - border: 0; - color: $secondary-color; - background-color: $background-color; -} - -.button--tertiary:hover { - color: $primary-color; -} - -.button--tertiary:active, .button--tertiary:focus { - color: $secondary-color; - background-color: $tertiary-color; -} diff --git a/client/scss/button/_button.scss b/client/scss/button/_button.scss index 6bb49061..7c7ba925 100644 --- a/client/scss/button/_button.scss +++ b/client/scss/button/_button.scss @@ -1,3 +1,21 @@ button { cursor: pointer; + &:active + { + outline: 0; + } +} + +.button--primary, .button--secondary +{ + border-width: $button-border-width; + border-style: $button-border-strength; + border-color: transparent; + padding: $thin-padding; +} + + +.button--jumbo, .button--jumbo:focus, .button--jumbo:active { + width: $button-full-width; + font-size: x-large; } diff --git a/client/scss/click-to-copy/_click-to-copy.scss b/client/scss/click-to-copy/_click-to-copy.scss index f66a571e..e279677a 100644 --- a/client/scss/click-to-copy/_click-to-copy.scss +++ b/client/scss/click-to-copy/_click-to-copy.scss @@ -4,22 +4,20 @@ justify-content: space-between; align-items: center; cursor: pointer; - border: 1px solid $grey-alt; + border: 1px solid $grey-border; border-radius: 6px; .click-to-copy { border: none; padding: 0.36em 0.5em; margin: 0; - color: black; background-color: transparent; width: calc(100% - 1em - 2px); font-size: 14px; - color: #2E2F31; letter-spacing: -0.6px; line-height: 20px; letter-spacing: 0; font-family: monospace; - border-right: 1px solid $grey-alt; + border-right: 1px solid $grey-border; } .icon-wrap { width: 30px; @@ -27,7 +25,7 @@ line-height: 34px; text-align: center; svg { - stroke: $brand-color; + stroke: $primary-color; width: 16px; height: 16px; } diff --git a/client/scss/column/_column.scss b/client/scss/column/_column.scss deleted file mode 100644 index 9aa9b403..00000000 --- a/client/scss/column/_column.scss +++ /dev/null @@ -1,4 +0,0 @@ -.column { - padding-left: $primary-padding; - padding-right: $primary-padding; -} diff --git a/client/scss/dropzone/_dropzone.scss b/client/scss/dropzone/_dropzone.scss index e5fb9cad..09b8b1bc 100644 --- a/client/scss/dropzone/_dropzone.scss +++ b/client/scss/dropzone/_dropzone.scss @@ -16,6 +16,7 @@ flex-direction: column; justify-content: center; align-items: center; + user-select: none; } .dropzone:hover, .dropzone--active { @@ -28,6 +29,11 @@ text-align: center; } +.dropzone-dropit-display +{ + color: $primary-color; +} + .dropzone-preview-wrapper { position: relative; width: 100%; @@ -49,3 +55,7 @@ padding: 1em; width: calc(100% - 2em); } + +.dropzone-instructions-display__chooser-label { + text-decoration: underline; +} diff --git a/client/scss/horizontal-quad-split/_horizontal-quad-split.scss b/client/scss/horizontal-quad-split/_horizontal-quad-split.scss deleted file mode 100644 index a13b7941..00000000 --- a/client/scss/horizontal-quad-split/_horizontal-quad-split.scss +++ /dev/null @@ -1,53 +0,0 @@ -.horizontal-quad-split { - display : flex; - flex-direction : row; - justify-content: space-between; - align-items : flex-start; - .left-side, .right-side { - width : 50%; - display : flex; - flex-direction : row; - justify-content: space-between; - align-items : flex-start; - .column-a, .column-b, .column-c, .column-d { - width: 50%; - }; - .column-a, .column-b, .column-c { - padding-right: $secondary-padding; - }; - }; -}; - - - -@media (max-width: $break-point-large ) { - - .horizontal-quad-split { - flex-direction : column; - .left-side, .right-side { - width : 100%; - .column-a, .column-b, .column-c, .column-d { - width: 50%; - }; - .column-b { - padding-right: 0; - } - } - }; - -} - -@media (max-width: $break-point-medium ) { - - .horizontal-quad-split { - flex-direction : column; - .left-side, .right-side { - flex-direction : column; - .column-a, .column-b, .column-c, .column-d { - width: 100%; - padding: 0; - }; - } - }; - -} diff --git a/client/scss/horizontal-split/_horizontal-split.scss b/client/scss/horizontal-split/_horizontal-split.scss index 52034731..cb1fad35 100644 --- a/client/scss/horizontal-split/_horizontal-split.scss +++ b/client/scss/horizontal-split/_horizontal-split.scss @@ -1,28 +1,39 @@ .horizontal-split { + max-width: $width-content-constrained; + width: 100%; + margin-left: auto; + margin-right: auto; display : flex; flex-direction : row; justify-content: space-between; - - .column { - width: 50%; - } }; +.horizontal-split__column { + width: 50%; + flex: 1 0 auto; + box-sizing: border-box; +} +.horizontal-split__column--left { + padding-right: $primary-padding; +} + +.horizontal-split__column--right { + padding-left: $primary-padding; +} @media (max-width: $break-point-tablet) { - .horizontal-split { + .horizontal-split__column { display : flex; flex-direction : column; justify-content: space-between; - - .column { - width: 100%; - padding-left: 0; - padding-right: 0; - padding-bottom: $secondary-padding; - } }; + .column { + width: 100%; + padding-left: 0; + padding-right: 0; + padding-bottom: $secondary-padding; + } } diff --git a/client/scss/input/_input.scss b/client/scss/input/_input.scss index be4bfb3c..c0249968 100644 --- a/client/scss/input/_input.scss +++ b/client/scss/input/_input.scss @@ -4,7 +4,6 @@ input:-webkit-autofill { input { margin: 0; - outline: none; padding: $input-padding; border: 0; background-color: $background-color; diff --git a/client/scss/label/_label.scss b/client/scss/label/_label.scss index c3d96ae3..2e92784a 100644 --- a/client/scss/label/_label.scss +++ b/client/scss/label/_label.scss @@ -11,7 +11,7 @@ cursor: pointer; } -@media (max-width: $break-point-medium ) { +@media (max-width: $break-point-tablet ) { // note: bolding break point lines up with row-label break point .label, .label-radio { diff --git a/client/scss/link/_link.scss b/client/scss/link/_link.scss index 064c03f2..bda60bc7 100644 --- a/client/scss/link/_link.scss +++ b/client/scss/link/_link.scss @@ -3,76 +3,19 @@ a, a:visited { } .link--primary, .link--primary:visited { - color: $interactive-color; -} - -.link--brand, .link--brand:visited { - color: $brand-color; -} - -.link--secondary, .link--secondary:visited { - margin: 0px; - padding: 0.3em; - color: $secondary-color; + color: $primary-color; + &:hover { text-decoration: underline; } } .link--nav { - color: $primary-color; + color: $text-color; border-bottom: 2px solid white; + &:hover { + color: $primary-color; + } } -.link--nav:hover { - color: $interactive-color; -} .link--nav-active { - color: $interactive-color; - border-bottom: 2px solid $interactive-color; -} - - -.link--icon, .link--icon:visited { - display: flex; - align-items: center; - - .link-text { - padding-bottom: 2px; - border-bottom: 1px solid transparent; - transition: all 0.2s ease; - } - .icon-wrap { - margin-left: 5px; - padding-top: 0px; - align-items: center; - svg { - width: 16px; - height: 16px; - stroke: $grey; - transition: all 0.2s ease; - } - - @media (max-width: $break-point-x-small) { - padding-top: 0; - } - } - &:hover { - .link-text { - border-bottom: 1px solid $brand-color; - } - svg { - stroke: $brand-color; - } - } -} - - -.link--hover { - display: inline-block; - padding-bottom: 2px; - border-bottom: 1px solid transparent; - transition: all 0.2s ease; - &:hover { - border-bottom: 1px solid $brand-color; - } -} - + border-bottom: 2px solid $primary-color; +} \ No newline at end of file diff --git a/client/scss/media-queries/_media-queries.scss b/client/scss/media-queries/_media-queries.scss index 638d4b67..bb9de378 100644 --- a/client/scss/media-queries/_media-queries.scss +++ b/client/scss/media-queries/_media-queries.scss @@ -4,21 +4,4 @@ display: none; } -} - -@media (max-width: $break-point-large ) { - -} - -@media (max-width: $break-point-medium) { - - -} - -@media (max-width: $break-point-small) { - -} - -@media (max-width: $break-point-x-small ) { - -} +} \ No newline at end of file diff --git a/client/scss/nav-bar/_nav-bar.scss b/client/scss/nav-bar/_nav-bar.scss index 41415546..43a85bc1 100644 --- a/client/scss/nav-bar/_nav-bar.scss +++ b/client/scss/nav-bar/_nav-bar.scss @@ -1,13 +1,12 @@ .nav-bar { - padding-left: $primary-padding; - padding-right: $primary-padding; + margin-left: $primary-padding; + margin-right: $primary-padding; - @media (max-width: $break-point-phone) { - padding-left: 15px; - padding-right: 15px; + @media (max-width: $break-point-mobile) { + margin-left: 15px; + margin-right: 15px; } - // border-bottom: 0.5px solid $tertiary-color; .select--arrow { padding: 0 1.5em 0 $input-padding; font-size: 14px; @@ -28,7 +27,7 @@ cursor: pointer; } -@media (max-width: $break-point-medium ) { +@media (max-width: $break-point-tablet ) { .nav-bar-link { padding-top: calc(1em - 2px); padding-right: 1em; @@ -38,7 +37,7 @@ } -@media (max-width: $break-point-small ) { +@media (max-width: $break-point-mobile ) { .nav-bar-link { padding-top: calc(0.5em - 2px); padding-right: 0.5em; diff --git a/client/scss/page-layout/_page-layout.scss b/client/scss/page-layout/_page-layout.scss index 06f6dae7..0c51319a 100644 --- a/client/scss/page-layout/_page-layout.scss +++ b/client/scss/page-layout/_page-layout.scss @@ -7,5 +7,21 @@ display: flex; -webkit-flex-direction: column; flex-direction: column; + margin: $secondary-padding; } } + +@media (max-width: $break-point-tablet) { + .page-layout .content { margin: $thin-padding; } +} + +@media (max-width: $break-point-mobile) { + max-width: calc(100% - 30px); +} + +//below should take some styles from _text.scss and probably elsewhere and become "markdown" or "rich" styles +.page-layout { + p { + margin-bottom: $tertiary-padding; + } +} \ No newline at end of file diff --git a/client/scss/progress-bar/_progress-bar.scss b/client/scss/progress-bar/_progress-bar.scss index c4ef6c52..7a6f7e6d 100644 --- a/client/scss/progress-bar/_progress-bar.scss +++ b/client/scss/progress-bar/_progress-bar.scss @@ -1,5 +1,5 @@ .progress-bar--inactive { - color: $secondary-color; + color: $grey; } .progress-bar--active { diff --git a/client/scss/publish-preview/_publish-preview.scss b/client/scss/publish-preview/_publish-preview.scss index b1938c70..af3aa131 100644 --- a/client/scss/publish-preview/_publish-preview.scss +++ b/client/scss/publish-preview/_publish-preview.scss @@ -1,3 +1,9 @@ +.publish-form__title { + max-width: $width-content-constrained; + margin-left: auto; + margin-right: auto; +} + .publish-preview-dim { opacity: 0.2; } diff --git a/client/scss/publish-url-input/_publish-url-input.scss b/client/scss/publish-url-input/_publish-url-input.scss index 70436e4e..41673a1e 100644 --- a/client/scss/publish-url-input/_publish-url-input.scss +++ b/client/scss/publish-url-input/_publish-url-input.scss @@ -17,5 +17,5 @@ .publish-url-text { margin: 0; padding: 0; - color: $secondary-color; + color: $help-color; } diff --git a/client/scss/reset/_reset.scss b/client/scss/reset/_reset.scss index e69de29b..85cb60d3 100644 --- a/client/scss/reset/_reset.scss +++ b/client/scss/reset/_reset.scss @@ -0,0 +1,4 @@ +button, input, textarea, label, select, option { + font-family: inherit; + font-size: inherit; +} \ No newline at end of file diff --git a/client/scss/row/_row.scss b/client/scss/row/_row.scss index 787d5161..bbf63453 100644 --- a/client/scss/row/_row.scss +++ b/client/scss/row/_row.scss @@ -1,5 +1,5 @@ .row { - padding-bottom: 1.2em; + margin-bottom: 1.2em; } .row-labeled { @@ -10,77 +10,26 @@ } .row-labeled-label { - align-self: flex-start; width: 30%; + display: flex; + align-items: center; + flex: 1; + //bad, fix this + .label { padding-top: 0; padding-bottom: 0; } } .row-labeled-content { align-self: center; width: 70%; } -.row-labeled-alt { - display: column; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - - .row-labeled-label { - align-self: flex-start; - width: 100%; - color: $grey; - .label { - font-weight: bold; - text-transform: uppercase; - font-size: 13px; - letter-spacing: 0.4px; - line-height: 18px; - } - } - - .row-labeled-content { - align-self: center; - width: 100%; - } -} - - -@media (max-width: $break-point-medium ) { - +@media (max-width: $break-point-tablet ) { .row-labeled { flex-direction: column; } - .row-labeled-label { width: 100%; } .row-labeled-content { width: 100%; } - -} - - -@media (max-width: $break-point-tablet) and (min-width: $break-point-phone) { - .row { - margin-bottom: 1.4em; - } - - .tablet-inline-row { - display: flex; - justify-content: space-between; - width: 100%; - - >.row { - flex: 1; - margin: 0 15px 1.4em; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - } - } -} +} \ No newline at end of file diff --git a/client/scss/select/_select.scss b/client/scss/select/_select.scss index 7142f40c..6c1154c3 100644 --- a/client/scss/select/_select.scss +++ b/client/scss/select/_select.scss @@ -1,9 +1,5 @@ select { margin: 0; - outline: none; - padding: $input-padding; - border: 0; - background-color: $background-color; display: inline-block; } diff --git a/client/scss/share-buttons/_share-buttons.scss b/client/scss/share-buttons/_share-buttons.scss index 010ef268..ab4234d0 100644 --- a/client/scss/share-buttons/_share-buttons.scss +++ b/client/scss/share-buttons/_share-buttons.scss @@ -45,7 +45,7 @@ } &:hover { - background: $brand-color; + background: $primary-color; } } } diff --git a/client/scss/social-share-link/_social-share-link.scss b/client/scss/social-share-link/_social-share-link.scss index 58973667..c1fa2946 100644 --- a/client/scss/social-share-link/_social-share-link.scss +++ b/client/scss/social-share-link/_social-share-link.scss @@ -7,5 +7,4 @@ .social-share-link > a{ padding-right:0.5em; padding-left:0.5em; - padding-bottom:0.3em; } \ No newline at end of file diff --git a/client/scss/text/_text.scss b/client/scss/text/_text.scss index 0c5b6140..125afe67 100644 --- a/client/scss/text/_text.scss +++ b/client/scss/text/_text.scss @@ -4,6 +4,12 @@ h1, h2, h3, h4, p { margin: 0; } +body { + color: $text-color; + font-family: 'Circular', serif; + font-size: 16px; +} + h1 { font-size: $text-xx-large; } @@ -14,12 +20,6 @@ h2 { h3 { font-size: $text-large; - font-weight: bold; -} - -p, body, button, input, textarea, label, select, option { - font-family: 'Circular', serif; - font-size: 16px; } .text--extra-large { @@ -42,24 +42,12 @@ p, body, button, input, textarea, label, select, option { font-size: $text-x-small; } -.text--underline { - text-decoration: underline; -} - -.text--primary { - color: $primary-color; -} - .text--secondary { - color: $secondary-color; -} - -.text--tertiary { - color: $tertiary-color; + color: $help-color; } .text--interactive { - color: $interactive-color; + color: $primary-color; } .text--failure { @@ -101,7 +89,7 @@ p, body, button, input, textarea, label, select, option { } -@media (max-width: $break-point-medium) { +@media (max-width: $break-point-tablet) { h1 { font-size: $text-large; @@ -134,7 +122,7 @@ p, body, button, input, textarea, label, select, option { } -@media (max-width: $break-point-x-small) { +@media (max-width: $break-point-mobile) { h1 { font-size: $text-medium; diff --git a/client/scss/textarea/_textarea.scss b/client/scss/textarea/_textarea.scss index 4f07b83e..e72bf554 100644 --- a/client/scss/textarea/_textarea.scss +++ b/client/scss/textarea/_textarea.scss @@ -1,10 +1,6 @@ textarea { margin: 0; - outline: none; padding: $input-padding; - border: 0; - border-bottom: 1px solid $secondary-color; - background-color: $background-color; display: inline-block; width: $input-full-width; } diff --git a/client/scss/variables/_variables.scss b/client/scss/variables/_variables.scss index 7698081e..fa86f99e 100644 --- a/client/scss/variables/_variables.scss +++ b/client/scss/variables/_variables.scss @@ -1,14 +1,11 @@ $base-color: white; -$primary-color: black; -$secondary-color: #9b9b9b; -$tertiary-color: #ccccc0; -$interactive-color: blue; +$primary-color: #005da0; +$secondary-color: $primary-color; $success-color: green; $failure-color: red; -// $brand-color: #ff725d; -$brand-color: #1944F9; $grey: #9095A5; -$grey-alt: #DDDFE4; +$help-color: $grey; +$grey-border: #DDDFE4; $shadow-color: rgba(169, 173, 186, 0.2); $primary-padding: 3em; @@ -17,8 +14,10 @@ $tertiary-padding: 1em; $thin-padding: 0.3em; $full-width-thin-padding: calc(100% - 0.6em); +$width-content-constrained: 1000px; + $background-color: $base-color; -$font-color: $primary-color; +$text-color: #333; $button-border-width: 1px; $button-border-strength: solid; @@ -28,18 +27,14 @@ $input-padding: 0.3em; $input-full-width: calc(100% - 0.6em); $text-xx-large: 2.5em; -$text-x-large: xx-large; -$text-large: x-large; -$text-medium: large; -$text-small: medium; +$text-x-large: x-large; +$text-large: large; +$text-medium: medium; +$text-small: small; $text-x-small: small; $break-point-xx-large: 1400px; $break-point-x-large: 1290px; $break-point-large: 1000px; -$break-point-tablet: 900px; -$break-point-medium: 800px; -$break-point-phone: 640px; -$break-point-small: 500px; -$break-point-x-small: 400px; - +$break-point-tablet: 800px; +$break-point-mobile: 500px; \ No newline at end of file diff --git a/client/scss/vertical-split/_vertical-split.scss b/client/scss/vertical-split/_vertical-split.scss index 3d6a15fc..2aacc773 100644 --- a/client/scss/vertical-split/_vertical-split.scss +++ b/client/scss/vertical-split/_vertical-split.scss @@ -1,4 +1,4 @@ -.vertical-split { +.vertical-split, .visible-content { flex : 1 0 auto; display : flex; flex-direction : column; @@ -6,7 +6,13 @@ 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%; @@ -18,7 +24,6 @@ } .collapse-button { - outline: none; background: none; border: none; display: block; @@ -34,7 +39,7 @@ } svg { - stroke: $brand-color; + stroke: $primary-color; &.plus-icon { transform: rotate(0); transition: all 0.4s ease; diff --git a/client/src/components/AboutSpeechDetails/index.jsx b/client/src/components/AboutSpeechDetails/index.jsx index 98962e91..8a1e2532 100644 --- a/client/src/components/AboutSpeechDetails/index.jsx +++ b/client/src/components/AboutSpeechDetails/index.jsx @@ -7,9 +7,9 @@ const AboutSpeechDetails = () => {

- Terms of Service + Terms of Service
- Frequently Asked Questions + Frequently Asked Questions

diff --git a/client/src/components/AboutSpeechOverview/index.jsx b/client/src/components/AboutSpeechOverview/index.jsx index 08190424..ef53812f 100644 --- a/client/src/components/AboutSpeechOverview/index.jsx +++ b/client/src/components/AboutSpeechOverview/index.jsx @@ -8,18 +8,12 @@ const AboutSpeechOverview = () => {

Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.

 -

- TWITTER -

-

- GITHUB -

-

- DISCORD CHANNEL -

-

- DOCUMENTATION -

+
+ TWITTER
+ GITHUB
+ DISCORD CHANNEL
+ DOCUMENTATION
+
); diff --git a/client/src/components/AssetInfoFooter/index.js b/client/src/components/AssetInfoFooter/index.js new file mode 100644 index 00000000..a059f670 --- /dev/null +++ b/client/src/components/AssetInfoFooter/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Row from '@components/Row'; + +const AssetInfoFooter = ({ assetUrl, name }) => { + return ( +
+

+ Hosted via the LBRY blockchain +

+
+ ); +}; + +export default AssetInfoFooter; diff --git a/client/src/components/AssetShareButtons/index.js b/client/src/components/AssetShareButtons/index.js index 3aeada29..e733b460 100644 --- a/client/src/components/AssetShareButtons/index.js +++ b/client/src/components/AssetShareButtons/index.js @@ -9,45 +9,49 @@ const AssetShareButtons = ({ assetUrl, name }) => { target='_blank' href={`https://twitter.com/intent/tweet?text=${assetUrl}`} > - + - + - + - - - - mastodon - - - diaspora + ); }; +// +// Additional icons disabled. If you want to add additional icons, you have to solve +// https://github.com/lbryio/spee.ch/issues/687 +// +// +// mastodon +// +// +// diaspora +// export default AssetShareButtons; diff --git a/client/src/components/ButtonPrimary/index.jsx b/client/src/components/ButtonPrimary/index.jsx index 6b8230d3..30082cd4 100644 --- a/client/src/components/ButtonPrimary/index.jsx +++ b/client/src/components/ButtonPrimary/index.jsx @@ -4,7 +4,7 @@ const ButtonPrimary = ({ value, onClickHandler, type = 'button' }) => { return ( - ); -}; - -export default ButtonTertiary; diff --git a/client/src/components/ChannelAbout/index.jsx b/client/src/components/ChannelAbout/index.jsx index 2e04f18f..2d2a8f46 100644 --- a/client/src/components/ChannelAbout/index.jsx +++ b/client/src/components/ChannelAbout/index.jsx @@ -2,8 +2,9 @@ import React from 'react'; const ChannelAbout = () => { return ( -
-

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

+
+

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.

+

You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

); }; diff --git a/client/src/components/Column/index.jsx b/client/src/components/Column/index.jsx deleted file mode 100644 index dcd2e2bc..00000000 --- a/client/src/components/Column/index.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -class Column extends React.Component { - render () { - return ( -
- {this.props.children} -
- ); - } -} - -export default Column; diff --git a/client/src/components/DropzoneDropItDisplay/index.jsx b/client/src/components/DropzoneDropItDisplay/index.jsx index beaf820b..e6798093 100644 --- a/client/src/components/DropzoneDropItDisplay/index.jsx +++ b/client/src/components/DropzoneDropItDisplay/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; const DropzoneDropItDisplay = () => { return (
-

Drop it.

+ Drop it.
); } diff --git a/client/src/components/DropzoneInstructionsDisplay/index.jsx b/client/src/components/DropzoneInstructionsDisplay/index.jsx index 3f13c69f..65320e7e 100644 --- a/client/src/components/DropzoneInstructionsDisplay/index.jsx +++ b/client/src/components/DropzoneInstructionsDisplay/index.jsx @@ -6,15 +6,15 @@ const DropzoneInstructionsDisplay = ({fileError}) => { return (
-

Drag & drop image or video here to publish

+ Drag & drop image or video here to publish -

OR

+ OR { fileError ? (
-

CHOOSE FILE

+ CHOOSE FILE { />
) : ( -

CHOOSE FILE

+ CHOOSE FILE )}
); diff --git a/client/src/components/FormFeedbackDisplay/index.jsx b/client/src/components/FormFeedbackDisplay/index.jsx index 7dd62d7e..c324c7f0 100644 --- a/client/src/components/FormFeedbackDisplay/index.jsx +++ b/client/src/components/FormFeedbackDisplay/index.jsx @@ -4,13 +4,13 @@ const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => { return (
{ errorMessage ? ( -

{errorMessage}

+ {errorMessage} ) : (
{ defaultMessage ? ( -

{defaultMessage}

+ {defaultMessage} ) : ( -

 

+   )}
)} diff --git a/client/src/components/HorizontalQuadSplit/index.jsx b/client/src/components/HorizontalQuadSplit/index.jsx deleted file mode 100644 index 1bbbc319..00000000 --- a/client/src/components/HorizontalQuadSplit/index.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import Row from '@components/Row'; - -class HorizontalTriSplit extends React.Component { - render () { - return ( -
-
-
- - {this.props.columnA} - -
-
- - {this.props.columnB} - -
-
-
-
- - {this.props.columnC} - -
-
- - {this.props.columnD} - -
-
-
- ); - } -} - -export default HorizontalTriSplit; diff --git a/client/src/components/HorizontalSplit/index.jsx b/client/src/components/HorizontalSplit/index.jsx index c5151fa3..7b82a2c1 100644 --- a/client/src/components/HorizontalSplit/index.jsx +++ b/client/src/components/HorizontalSplit/index.jsx @@ -4,10 +4,10 @@ class HorizontalSplit extends React.Component { render () { return (
-
+
{this.props.leftSide}
-
+
{this.props.rightSide}
diff --git a/client/src/components/PublishPreview/index.jsx b/client/src/components/PublishPreview/index.jsx index 9f7240cf..512eb310 100644 --- a/client/src/components/PublishPreview/index.jsx +++ b/client/src/components/PublishPreview/index.jsx @@ -5,13 +5,17 @@ import PublishDetails from '@containers/PublishDetails'; import PublishTitleInput from '@containers/PublishTitleInput'; import Row from '@components/Row'; +// this class seems more like PublishForm and should probably be renamed + class PublishPreview extends React.Component { render () { return ( -
- - - +
+
+ + + +
} rightSide={} diff --git a/client/src/components/RowLabeledAlt/index.jsx b/client/src/components/RowLabeledAlt/index.jsx deleted file mode 100644 index d5e2c7d0..00000000 --- a/client/src/components/RowLabeledAlt/index.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -class RowLabeledAlt extends React.Component { - render () { - return ( -
-
{this.props.label}
-
{this.props.content}
-
- ); - } -} - -export default RowLabeledAlt; diff --git a/client/src/components/VerticalCollapsibleSplit/index.jsx b/client/src/components/VerticalCollapsibleSplit/index.jsx index 1dcaca48..d670b6e8 100644 --- a/client/src/components/VerticalCollapsibleSplit/index.jsx +++ b/client/src/components/VerticalCollapsibleSplit/index.jsx @@ -5,11 +5,18 @@ class VerticalCollapsibleSplit extends React.Component { constructor (props) { super(props); this.collapse = this.collapse.bind(this); - this.state = { closed: false }; + 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')); } diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx index b3ff10fc..581c61fb 100644 --- a/client/src/containers/AssetInfo/view.jsx +++ b/client/src/containers/AssetInfo/view.jsx @@ -11,6 +11,7 @@ import HorizontalSplit from '@components/HorizontalSplit'; import siteConfig from '@config/siteConfig.json'; const { details: { host } } = siteConfig; import createCanonicalLink from '../../../../utils/createCanonicalLink'; +import AssetInfoFooter from '../../components/AssetInfoFooter/index'; class AssetInfo extends React.Component { render () { @@ -29,129 +30,111 @@ class AssetInfo extends React.Component { channelCanonicalUrl = `${createCanonicalLink({channel})}`; } return ( -
+
-

{description}

- +

{description}

) } rightSide={
{channelName && ( - - - } - content={ - - {channelName} - - } - /> - + + } + content={ + + {channelName} + + } + /> )} {claimViews ? ( - - - } - content={ - - {claimViews} - - } - /> - + + } + content={ + + {claimViews} + + } + /> ) : null} - - - } - content={ - - } - /> - + + } + content={ + + } + /> - - - } - content={ - - } - /> - + + } + content={ + + } + /> - - - } - content={ -
- {(contentType === 'video/mp4') ? ( - `} - /> - ) : ( - `} - /> - )} -
- } - /> - + + } + content={ +
+ {(contentType === 'video/mp4') ? ( + `} + /> + ) : ( + `} + /> + )} +
+ } + /> - - - - Direct Link - - - Download - - - Report - - - + + + Direct Link + + + Download + + + Report + +
} /> - -

- Hosted via the LBRY blockchain -

- +
); } diff --git a/client/src/containers/ChannelCreateForm/view.jsx b/client/src/containers/ChannelCreateForm/view.jsx index bda30e12..2d175ce2 100644 --- a/client/src/containers/ChannelCreateForm/view.jsx +++ b/client/src/containers/ChannelCreateForm/view.jsx @@ -81,7 +81,7 @@ class ChannelCreateForm extends React.Component { ) : (
-

{status}

+ {status}
)} diff --git a/client/src/containers/ChannelTools/view.jsx b/client/src/containers/ChannelTools/view.jsx index 0be7bef0..455b6d26 100644 --- a/client/src/containers/ChannelTools/view.jsx +++ b/client/src/containers/ChannelTools/view.jsx @@ -8,11 +8,11 @@ class ChannelTools extends React.Component { return (
-

Log in to an existing channel:

+

Log in to existing channel

 {!this.props.closedRegistration && ( -

Create a brand new channel:

+

Create new channel

)}
diff --git a/client/src/containers/PublishDetails/view.jsx b/client/src/containers/PublishDetails/view.jsx index ac55e226..7590e66f 100644 --- a/client/src/containers/PublishDetails/view.jsx +++ b/client/src/containers/PublishDetails/view.jsx @@ -6,7 +6,7 @@ import PublishMetadataInputs from '@containers/PublishMetadataInputs'; import ChannelSelect from '@containers/ChannelSelect'; import Row from '@components/Row'; import ButtonPrimaryJumbo from '@components/ButtonPrimaryJumbo'; -import ButtonTertiary from '@components/ButtonTertiary'; +import ButtonSecondary from '@components/ButtonSecondary'; import SpaceAround from '@components/SpaceAround'; import PublishFinePrint from '@components/PublishFinePrint'; @@ -48,7 +48,7 @@ class PublishDetails extends React.Component { - diff --git a/client/src/containers/PublishMetadataInputs/view.jsx b/client/src/containers/PublishMetadataInputs/view.jsx index 10d8a793..ec5d2a59 100644 --- a/client/src/containers/PublishMetadataInputs/view.jsx +++ b/client/src/containers/PublishMetadataInputs/view.jsx @@ -3,6 +3,7 @@ import PublishDescriptionInput from '@components/PublishDescriptionInput'; import PublishLicenseInput from '@components/PublishLicenseInput'; import PublishNsfwInput from '@components/PublishNsfwInput'; import ButtonSecondary from '@components/ButtonSecondary'; +import Row from '@components/Row'; class PublishMetadataInputs extends React.Component { constructor (props) { @@ -29,19 +30,25 @@ class PublishMetadataInputs extends React.Component { return (
{this.props.showMetadataInputs && ( -
- - - -
+ + + + + + + + + + + )}
) : ( -

loading...

+ loading... ) } } + /> + + */ + class ShowAssetDetails extends React.Component { render () { const { asset } = this.props; @@ -16,11 +26,8 @@ class ShowAssetDetails extends React.Component { pageTitle={`${name} - details`} asset={asset} > - } - bottom={} - /> + + ); }