strip it down

This commit is contained in:
Jeremy Kauffman 2018-11-08 19:44:59 -05:00
parent b33c7b93a9
commit 61b8cd9fcf
53 changed files with 385 additions and 663 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,4 +0,0 @@
.column {
padding-left: $primary-padding;
padding-right: $primary-padding;
}

View file

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

View file

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

View file

@ -1,21 +1,34 @@
.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%;
@ -23,6 +36,4 @@
padding-right: 0;
padding-bottom: $secondary-padding;
}
};
}

View file

@ -4,7 +4,6 @@ input:-webkit-autofill {
input {
margin: 0;
outline: none;
padding: $input-padding;
border: 0;
background-color: $background-color;

View file

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

View file

@ -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;
border-bottom: 2px solid $primary-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;
}
}

View file

@ -5,20 +5,3 @@
}
}
@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 ) {
}

View file

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

View file

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

View file

@ -1,5 +1,5 @@
.progress-bar--inactive {
color: $secondary-color;
color: $grey;
}
.progress-bar--active {

View file

@ -1,3 +1,9 @@
.publish-form__title {
max-width: $width-content-constrained;
margin-left: auto;
margin-right: auto;
}
.publish-preview-dim {
opacity: 0.2;
}

View file

@ -17,5 +17,5 @@
.publish-url-text {
margin: 0;
padding: 0;
color: $secondary-color;
color: $help-color;
}

View file

@ -0,0 +1,4 @@
button, input, textarea, label, select, option {
font-family: inherit;
font-size: inherit;
}

View file

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

View file

@ -1,9 +1,5 @@
select {
margin: 0;
outline: none;
padding: $input-padding;
border: 0;
background-color: $background-color;
display: inline-block;
}

View file

@ -45,7 +45,7 @@
}
&:hover {
background: $brand-color;
background: $primary-color;
}
}
}

View file

@ -7,5 +7,4 @@
.social-share-link > a{
padding-right:0.5em;
padding-left:0.5em;
padding-bottom:0.3em;
}

View file

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

View file

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

View file

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

View file

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

View file

@ -7,9 +7,9 @@ const AboutSpeechDetails = () => {
<div>
<Row>
<p className={'text--large'}>
<Link to='/tos'>Terms of Service</Link>
<Link className={'link--primary'} to='/tos'>Terms of Service</Link>
<br />
<Link to='/faq'>Frequently Asked Questions</Link>
<Link className={'link--primary'} to='/faq'>Frequently Asked Questions</Link>
</p>
</Row>
<Row>

View file

@ -8,18 +8,12 @@ const AboutSpeechOverview = () => {
<p className={'text--extra-large'}>Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p>
</Row>
<Row>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a>
</p>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a>
</p>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a>
</p>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a>
</p>
<div className={'text--large'}>
<a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a><br/>
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a><br/>
<a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a><br/>
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a><br/>
</div>
</Row>
</div>
);

View file

@ -0,0 +1,14 @@
import React from 'react';
import Row from '@components/Row';
const AssetInfoFooter = ({ assetUrl, name }) => {
return (
<div className='asset-footer'>
<p>
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p>
</div>
);
};
export default AssetInfoFooter;

View file

@ -9,45 +9,49 @@ const AssetShareButtons = ({ assetUrl, name }) => {
target='_blank'
href={`https://twitter.com/intent/tweet?text=${assetUrl}`}
>
<img src='/assets/img/twitter.svg' />
<img src='/assets/img/icn_twitter.svg' />
</a>
<a
className='link--primary facebook'
target='_blank'
href={`https://www.facebook.com/sharer/sharer.php?u=${assetUrl}`}
>
<img src='/assets/img/facebook.svg' />
<img src='/assets/img/icn_facebook.svg' />
</a>
<a
className='link--primary tumblr'
target='_blank'
href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${assetUrl}`}
>
<img src='/assets/img/tumblr.svg' />
<img src='/assets/img/icn_tumblr.svg' />
</a>
<a
className='link--primary reddit'
target='_blank'
href={`https://www.reddit.com/submit?url=${assetUrl}&title=${name}`}
>
<img src='/assets/img/reddit.svg' />
</a>
<a
className='link--primary'
target='_blank'
href={`https://sharetomastodon.github.io/?title=${name}&url=${assetUrl}`}
>
mastodon
</a>
<a
className='link--primary'
target='_blank'
href={`https://share.diasporafoundation.org/?title=${name}&url=${assetUrl}`}
>
diaspora
<img src='/assets/img/icn_reddit.svg' />
</a>
</SocialShareLink>
);
};
//
// Additional icons disabled. If you want to add additional icons, you have to solve
// https://github.com/lbryio/spee.ch/issues/687
//
// <a
// className='link--primary'
// target='_blank'
// href={`https://sharetomastodon.github.io/?title=${name}&url=${assetUrl}`}
// >
// mastodon
// </a>
// <a
// className='link--primary'
// target='_blank'
// href={`https://share.diasporafoundation.org/?title=${name}&url=${assetUrl}`}
// >
// diaspora
// </a>
export default AssetShareButtons;

View file

@ -4,7 +4,7 @@ const ButtonPrimary = ({ value, onClickHandler, type = 'button' }) => {
return (
<button
type={type}
className={'button button-primary'}
className={'button button--primary'}
onClick={onClickHandler}
>
{value}

View file

@ -3,7 +3,7 @@ import React from 'react';
const ButtonPrimaryJumbo = ({ value, onClickHandler }) => {
return (
<button
className={'button button-primary button-primary--jumbo'}
className={'button button--primary button--jumbo'}
onClick={onClickHandler}
>
{value}

View file

@ -1,14 +0,0 @@
import React from 'react';
const ButtonTertiary = ({ value, onClickHandler }) => {
return (
<button
className={'button button--tertiary'}
onClick={onClickHandler}
>
{value}
</button>
);
};
export default ButtonTertiary;

View file

@ -2,8 +2,9 @@ import React from 'react';
const ChannelAbout = () => {
return (
<div>
<p className={'text--large'}>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 <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
<div className={'text--large'}>
<p>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.</p>
<p>You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
</div>
);
};

View file

@ -1,13 +0,0 @@
import React from 'react';
class Column extends React.Component {
render () {
return (
<div className={'column'}>
{this.props.children}
</div>
);
}
}
export default Column;

View file

@ -3,7 +3,7 @@ import React from 'react';
const DropzoneDropItDisplay = () => {
return (
<div className={'dropzone-dropit-display'}>
<p className={'text--interactive'}>Drop it.</p>
Drop it.
</div>
);
}

View file

@ -6,15 +6,15 @@ const DropzoneInstructionsDisplay = ({fileError}) => {
return (
<div className={'dropzone-instructions-display'}>
<Row>
<p className={'text--large'}>Drag & drop image or video here to publish</p>
<span className={'text--large'}>Drag & drop image or video here to publish</span>
</Row>
<Row>
<p className={'text--small'}>OR</p>
<span className={'text--small text--secondary'}>OR</span>
</Row>
{ fileError ? (
<div>
<Row>
<p className={'text--large text--underline'}>CHOOSE FILE</p>
<span className={'text--large dropzone-instructions-display__chooser-label'}>CHOOSE FILE</span>
</Row>
<FormFeedbackDisplay
errorMessage={fileError}
@ -22,7 +22,7 @@ const DropzoneInstructionsDisplay = ({fileError}) => {
/>
</div>
) : (
<p className={'text--large text--underline'}>CHOOSE FILE</p>
<span className={'text--large dropzone-instructions-display__chooser-label'}>CHOOSE FILE</span>
)}
</div>
);

View file

@ -4,13 +4,13 @@ const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
return (
<div className={'form-feedback'}>
{ errorMessage ? (
<p className={'text--small text--failure'}>{errorMessage}</p>
<span className={'text--small text--failure'}>{errorMessage}</span>
) : (
<div>
{ defaultMessage ? (
<p className={'text--small text--secondary'}>{defaultMessage}</p>
<span className={'text--small text--secondary'}>{defaultMessage}</span>
) : (
<p className={'text--small'}>&nbsp;</p>
<span className={'text--small'}>&nbsp;</span>
)}
</div>
)}

View file

@ -1,37 +0,0 @@
import React from 'react';
import Row from '@components/Row';
class HorizontalTriSplit extends React.Component {
render () {
return (
<div className={'horizontal-quad-split'}>
<div className={'left-side'}>
<div className={'column-a'}>
<Row>
{this.props.columnA}
</Row>
</div>
<div className={'column-b'}>
<Row>
{this.props.columnB}
</Row>
</div>
</div>
<div className={'right-side'}>
<div className={'column-c'}>
<Row>
{this.props.columnC}
</Row>
</div>
<div className={'column-d'}>
<Row>
{this.props.columnD}
</Row>
</div>
</div>
</div>
);
}
}
export default HorizontalTriSplit;

View file

@ -4,10 +4,10 @@ class HorizontalSplit extends React.Component {
render () {
return (
<div className={'horizontal-split'}>
<div className={'column'}>
<div className={'horizontal-split__column horizontal-split__column--left'}>
{this.props.leftSide}
</div>
<div className={'column'}>
<div className={'horizontal-split__column horizontal-split__column--right'}>
{this.props.rightSide}
</div>
</div>

View file

@ -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 (
<div>
<div className={'publish-form'}>
<div className={'publish-form__title'}>
<Row>
<PublishTitleInput />
</Row>
</div>
<HorizontalSplit
leftSide={<Dropzone />}
rightSide={<PublishDetails />}

View file

@ -1,14 +0,0 @@
import React from 'react';
class RowLabeledAlt extends React.Component {
render () {
return (
<div className={'row-labeled-alt'}>
<div className={'row-labeled-label'}>{this.props.label}</div>
<div className={'row-labeled-content'}>{this.props.content}</div>
</div>
);
}
}
export default RowLabeledAlt;

View file

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

View file

@ -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,37 +30,32 @@ class AssetInfo extends React.Component {
channelCanonicalUrl = `${createCanonicalLink({channel})}`;
}
return (
<div className='asset-information-wrap'>
<div className='asset-info'>
<HorizontalSplit
leftSide={
description && (
<Row>
<p>{description}</p>
</Row>
<p className='asset-info__description'>{description}</p>
)
}
rightSide={
<div>
{channelName && (
<Row>
<RowLabeled
label={
<Label value={'Channel:'} />
<Label value={'Channel'} />
}
content={
<span className='text'>
<Link to={channelCanonicalUrl}>{channelName}</Link>
<Link className='link--primary' to={channelCanonicalUrl}>{channelName}</Link>
</span>
}
/>
</Row>
)}
{claimViews ? (
<Row>
<RowLabeled
label={
<Label value={'Views:'} />
<Label value={'Views'} />
}
content={
<span className='text'>
@ -67,13 +63,11 @@ class AssetInfo extends React.Component {
</span>
}
/>
</Row>
) : null}
<Row>
<RowLabeled
label={
<Label value={'Share:'} />
<Label value={'Share'} />
}
content={
<AssetShareButtons
@ -82,12 +76,10 @@ class AssetInfo extends React.Component {
/>
}
/>
</Row>
<Row>
<RowLabeled
label={
<Label value={'Link:'} />
<Label value={'Link'} />
}
content={
<ClickToCopy
@ -96,12 +88,10 @@ class AssetInfo extends React.Component {
/>
}
/>
</Row>
<Row>
<RowLabeled
label={
<Label value={'Embed:'} />
<Label value={'Embed'} />
}
content={
<div>
@ -119,9 +109,7 @@ class AssetInfo extends React.Component {
</div>
}
/>
</Row>
<Row>
<SpaceBetween>
<a
className='link--primary'
@ -144,14 +132,9 @@ class AssetInfo extends React.Component {
Report
</a>
</SpaceBetween>
</Row>
</div>
} />
<Row>
<p>
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p>
</Row>
<AssetInfoFooter/>
</div>
);
}

View file

@ -81,7 +81,7 @@ class ChannelCreateForm extends React.Component {
</form>
) : (
<div>
<p className={'text--small text--secondary'}>{status}</p>
<span className={'text--small text--secondary'}>{status}</span>
<ProgressBar size={12} />
</div>
)}

View file

@ -8,11 +8,11 @@ class ChannelTools extends React.Component {
return (
<div>
<Row>
<h3>Log in to an existing channel:</h3>
<h3>Log in to existing channel</h3>
<ChannelLoginForm />
</Row>
{!this.props.closedRegistration && (<Row>
<h3>Create a brand new channel:</h3>
<h3>Create new channel</h3>
<ChannelCreateForm />
</Row>)}
</div>

View file

@ -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 {
<Row>
<SpaceAround>
<ButtonTertiary
<ButtonSecondary
value={'Cancel'}
onClickHandler={this.props.clearFile}
/>

View file

@ -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 (
<div>
{this.props.showMetadataInputs && (
<div>
<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}
/>
</div>
</Row>
</React.Fragment>
)}
<ButtonSecondary
value={this.props.showMetadataInputs ? 'less' : 'more'}

View file

@ -126,7 +126,7 @@ class PublishThumbnailInput extends React.Component {
</div>
</div>
) : (
<p className={'text--small text--secondary'}>loading... </p>
<span className={'text--small text--secondary'}>loading... </span>
)
}
<FormFeedbackDisplay

View file

@ -6,6 +6,16 @@ import AssetDisplay from '@containers/AssetDisplay';
import AssetInfo from '@containers/AssetInfo';
import ErrorPage from '@pages/ErrorPage';
/*
<VerticalCollapsibleSplit
name={'asset-display-collapse'}
top={}
bottom={<AssetInfo />}
/>
*/
class ShowAssetDetails extends React.Component {
render () {
const { asset } = this.props;
@ -16,11 +26,8 @@ class ShowAssetDetails extends React.Component {
pageTitle={`${name} - details`}
asset={asset}
>
<VerticalCollapsibleSplit
name={'asset-display-collapse'}
top={<AssetDisplay />}
bottom={<AssetInfo />}
/>
<AssetDisplay />
</PageLayout>
);
}