strip it down
This commit is contained in:
Jeremy Kauffman
parent
b33c7b93a9
commit
61b8cd9fcf
53 changed files with 385 additions and 663 deletions
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.column {
|
||||
padding-left: $primary-padding;
|
||||
padding-right: $primary-padding;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ input:-webkit-autofill {
|
|||
|
||||
input {
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: $input-padding;
|
||||
border: 0;
|
||||
background-color: $background-color;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ) {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.progress-bar--inactive {
|
||||
color: $secondary-color;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.progress-bar--active {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
.publish-form__title {
|
||||
max-width: $width-content-constrained;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.publish-preview-dim {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,5 +17,5 @@
|
|||
.publish-url-text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $secondary-color;
|
||||
color: $help-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
button, input, textarea, label, select, option {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,5 @@
|
|||
select {
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: $input-padding;
|
||||
border: 0;
|
||||
background-color: $background-color;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $brand-color;
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,5 +7,4 @@
|
|||
.social-share-link > a{
|
||||
padding-right:0.5em;
|
||||
padding-left:0.5em;
|
||||
padding-bottom:0.3em;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
14
client/src/components/AssetInfoFooter/index.js
Normal file
14
client/src/components/AssetInfoFooter/index.js
Normal 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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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'}> </p>
|
||||
<span className={'text--small'}> </span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<Row>
|
||||
<PublishTitleInput />
|
||||
</Row>
|
||||
<div className={'publish-form'}>
|
||||
<div className={'publish-form__title'}>
|
||||
<Row>
|
||||
<PublishTitleInput />
|
||||
</Row>
|
||||
</div>
|
||||
<HorizontalSplit
|
||||
leftSide={<Dropzone />}
|
||||
rightSide={<PublishDetails />}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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'));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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:'} />
|
||||
}
|
||||
content={
|
||||
<span className='text'>
|
||||
<Link to={channelCanonicalUrl}>{channelName}</Link>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Channel'} />
|
||||
}
|
||||
content={
|
||||
<span className='text'>
|
||||
<Link className='link--primary' to={channelCanonicalUrl}>{channelName}</Link>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{claimViews ? (
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Views:'} />
|
||||
}
|
||||
content={
|
||||
<span className='text'>
|
||||
{claimViews}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Views'} />
|
||||
}
|
||||
content={
|
||||
<span className='text'>
|
||||
{claimViews}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Share:'} />
|
||||
}
|
||||
content={
|
||||
<AssetShareButtons
|
||||
name={name}
|
||||
assetUrl={assetCanonicalUrl}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Share'} />
|
||||
}
|
||||
content={
|
||||
<AssetShareButtons
|
||||
name={name}
|
||||
assetUrl={assetCanonicalUrl}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Link:'} />
|
||||
}
|
||||
content={
|
||||
<ClickToCopy
|
||||
id={'short-link'}
|
||||
value={assetCanonicalUrl}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Link'} />
|
||||
}
|
||||
content={
|
||||
<ClickToCopy
|
||||
id={'short-link'}
|
||||
value={assetCanonicalUrl}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Embed:'} />
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
{(contentType === 'video/mp4') ? (
|
||||
<ClickToCopy
|
||||
id={'embed-text-video'}
|
||||
value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
|
||||
/>
|
||||
) : (
|
||||
<ClickToCopy
|
||||
id={'embed-text-image'}
|
||||
value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Embed'} />
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
{(contentType === 'video/mp4') ? (
|
||||
<ClickToCopy
|
||||
id={'embed-text-video'}
|
||||
value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
|
||||
/>
|
||||
) : (
|
||||
<ClickToCopy
|
||||
id={'embed-text-image'}
|
||||
value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<Row>
|
||||
<SpaceBetween>
|
||||
<a
|
||||
className='link--primary'
|
||||
href={`${assetCanonicalUrl}.${fileExt}`}
|
||||
>
|
||||
Direct Link
|
||||
</a>
|
||||
<a
|
||||
className={'link--primary'}
|
||||
href={`${assetCanonicalUrl}.${fileExt}`}
|
||||
download={name}
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
<a
|
||||
className={'link--primary'}
|
||||
target='_blank'
|
||||
href='https://lbry.io/dmca'
|
||||
>
|
||||
Report
|
||||
</a>
|
||||
</SpaceBetween>
|
||||
</Row>
|
||||
<SpaceBetween>
|
||||
<a
|
||||
className='link--primary'
|
||||
href={`${assetCanonicalUrl}.${fileExt}`}
|
||||
>
|
||||
Direct Link
|
||||
</a>
|
||||
<a
|
||||
className={'link--primary'}
|
||||
href={`${assetCanonicalUrl}.${fileExt}`}
|
||||
download={name}
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
<a
|
||||
className={'link--primary'}
|
||||
target='_blank'
|
||||
href='https://lbry.io/dmca'
|
||||
>
|
||||
Report
|
||||
</a>
|
||||
</SpaceBetween>
|
||||
</div>
|
||||
} />
|
||||
<Row>
|
||||
<p>
|
||||
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
|
||||
</p>
|
||||
</Row>
|
||||
<AssetInfoFooter/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<PublishDescriptionInput
|
||||
description={this.props.description}
|
||||
handleInput={this.handleInput}
|
||||
/>
|
||||
<PublishLicenseInput
|
||||
handleSelect={this.handleSelect}
|
||||
/>
|
||||
<PublishNsfwInput
|
||||
nsfw={this.props.nsfw}
|
||||
handleInput={this.handleInput}
|
||||
/>
|
||||
</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}
|
||||
/>
|
||||
</Row>
|
||||
</React.Fragment>
|
||||
)}
|
||||
<ButtonSecondary
|
||||
value={this.props.showMetadataInputs ? 'less' : 'more'}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue