LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

strip it down

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/scss/all.scss
View file

@ -17,11 +17,8 @@
@import '~button/_button'; @import '~button/_button';
@import '~button-primary/_button-primary'; @import '~button-primary/_button-primary';
@import '~button-secondary/_button-secondary'; @import '~button-secondary/_button-secondary';
@import '~button-tertiary/_button-tertiary';
@import '~click-to-copy/_click-to-copy'; @import '~click-to-copy/_click-to-copy';
@import '~column/_column';
@import '~form-feedback/_form-feedback'; @import '~form-feedback/_form-feedback';
@import '~horizontal-quad-split/_horizontal-quad-split';
@import '~horizontal-split/_horizontal-split'; @import '~horizontal-split/_horizontal-split';
@import '~label/_label'; @import '~label/_label';
@import '~nav-bar/_nav-bar'; @import '~nav-bar/_nav-bar';

94
client/scss/asset-display/_asset-display.scss
View file

@ -1,57 +1,39 @@
.asset-display { .asset-display {
background: #F6F6F6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 0 auto; flex: 1 0 auto;
justify-content: center; justify-content: center;
position: relative; position: relative;
width: 100%; width: 100%;
$height-delta: 43 / 16 + ($primary-padding * 2); //fix 43!!! nav height
&:after { //max-height: calc(100vh - #{$height-delta});
background: transparent; height: calc(100vh - #{$height-delta});
bottom: 0; overflow: hidden;
box-shadow: inset 0 1px 2px 2px $shadow-color;
content: '';
height: 1px;
left: 0;
position: absolute;
top: auto;
width: 100%;
}
} }
.asset-title { .asset-title {
color: #2E2F31; color: #2E2F31;
font-size: 26px; font-size: $text-x-large;
font-weight: normal; font-weight: normal;
letter-spacing: 0; letter-spacing: 0;
line-height: 32px; margin-top: $primary-padding;
margin-top: 40px;
text-align: center; text-align: center;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
padding: 0 20px; padding: 0 $tertiary-padding;
} }
} }
.asset-image, .asset-video { .asset-image, .asset-video {
margin: 60px auto;
max-height: 100%; max-height: 100%;
max-width: 60vh; max-width: 100%;
margin-left: auto;
margin-right: auto;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
@media (max-width: $break-point-small) {
max-width: calc(100% - 30px);
}
} }
.asset-video { /*below must die if this is intended to be shareable component! it also probably doesn't need to be*/
border: none;
margin: 0px auto;
width: 100%;
padding: 6px;
}
.visible-content { .visible-content {
margin: 0; 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 { &:after {
box-shadow: 0px 2px 3px 2px $shadow-color; box-shadow: 0px 2px 3px 2px $shadow-color;
content: ''; content: '';
@ -87,16 +60,17 @@
} }
} }
.asset-information-wrap { .asset-info {
max-width: 800px; $asset-info-width: 1000px;
max-width: $asset-info-width;
@media (max-width: $break-point-tablet) { @media (max-width: $asset-info-width) {
margin: 0px auto; margin: 0px auto;
max-width: 100%; max-width: 100%;
width: calc(100% - 80px); width: calc(100% - 80px);
} }
@media (max-width: $break-point-phone) { @media (max-width: $break-point-tablet) {
width: calc(100% - 30px); width: calc(100% - 30px);
} }
@ -104,10 +78,17 @@
justify-content: center; justify-content: center;
.column { .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 { &:first-child {
border-right: 1px solid $grey-alt; border-right: 1px solid $grey-border;
margin-right: -1px; margin-right: -1px;
padding-right: 40px; padding-right: 40px;
@ -120,7 +101,7 @@
} }
&:last-child { &:last-child {
border-left: 1px solid $grey-alt; border-left: 1px solid $grey-border;
padding-left: 60px; padding-left: 60px;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
@ -153,7 +134,7 @@
width: 320px; width: 320px;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
border-bottom: 1px solid $grey-alt; border-bottom: 1px solid $grey-border;
min-width: 100%; min-width: 100%;
padding-bottom: 30px; padding-bottom: 30px;
width: 100%; width: 100%;
@ -163,22 +144,7 @@
} }
.asset-footer { .asset-footer {
border-top: 1px solid $grey-alt; border-top: 1px solid $grey-border;
padding-bottom: 80px; padding: $tertiary-padding $primary-padding;
padding-top: 30px; color: $grey;
@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;
}
}
} }

34
client/scss/button-primary/_button-primary.scss
View file

@ -1,34 +1,16 @@
.button-primary, .button-primary:focus, .button-primary:active { .button--primary, .button--primary:focus, .button--primary:active {
border: $button-border-width $button-border-strength $primary-color; border-color: $primary-color;
margin-top: $thin-padding;
margin-bottom: $thin-padding;
padding: $thin-padding;
color: $primary-color; color: $primary-color;
background-color: $background-color; background-color: $background-color;
outline: 0;
} }
.button-primary:focus { .button--primary:hover {
border-color: $secondary-color;
background-color: $tertiary-color;
}
.button-primary:hover {
border-color: $interactive-color;
color: $background-color; color: $background-color;
background-color: $interactive-color; background-color: $primary-color;
} }
.button-primary:active{ .button--primary:active {
border-color: $background-color; $color: darken($primary-color, 10%);
color: $secondary-color; border-color: $color;
background-color: $tertiary-color; background-color: $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;
} }

22
client/scss/button-secondary/_button-secondary.scss
View file

@ -1,21 +1,11 @@
.button--secondary, .button--secondary:focus { .button--secondary, .button--secondary:focus, .button--secondary:active {
border: 0; border-bottom-color: $secondary-color;
border-bottom: $button-border-width $button-border-strength $primary-color; color: $secondary-color;
padding: 0.5em;
color: $primary-color;
background-color: $background-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 { .button--secondary:active {
color: $background-color; $color: darken($secondary-color, 10%);
color: $color;
border-bottom-color: $color;
} }

14
client/scss/button-tertiary/_button-tertiary.scss
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;
}

18
client/scss/button/_button.scss
View file

@ -1,3 +1,21 @@
button { button {
cursor: pointer; 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;
} }

8
client/scss/click-to-copy/_click-to-copy.scss
View file

@ -4,22 +4,20 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
border: 1px solid $grey-alt; border: 1px solid $grey-border;
border-radius: 6px; border-radius: 6px;
.click-to-copy { .click-to-copy {
border: none; border: none;
padding: 0.36em 0.5em; padding: 0.36em 0.5em;
margin: 0; margin: 0;
color: black;
background-color: transparent; background-color: transparent;
width: calc(100% - 1em - 2px); width: calc(100% - 1em - 2px);
font-size: 14px; font-size: 14px;
color: #2E2F31;
letter-spacing: -0.6px; letter-spacing: -0.6px;
line-height: 20px; line-height: 20px;
letter-spacing: 0; letter-spacing: 0;
font-family: monospace; font-family: monospace;
border-right: 1px solid $grey-alt; border-right: 1px solid $grey-border;
} }
.icon-wrap { .icon-wrap {
width: 30px; width: 30px;
@ -27,7 +25,7 @@
line-height: 34px; line-height: 34px;
text-align: center; text-align: center;
svg { svg {
stroke: $brand-color; stroke: $primary-color;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }

4
client/scss/column/_column.scss
View file

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

10
client/scss/dropzone/_dropzone.scss
View file

@ -16,6 +16,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
user-select: none;
} }
.dropzone:hover, .dropzone--active { .dropzone:hover, .dropzone--active {
@ -28,6 +29,11 @@
text-align: center; text-align: center;
} }
.dropzone-dropit-display
{
color: $primary-color;
}
.dropzone-preview-wrapper { .dropzone-preview-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
@ -49,3 +55,7 @@
padding: 1em; padding: 1em;
width: calc(100% - 2em); width: calc(100% - 2em);
} }
.dropzone-instructions-display__chooser-label {
text-decoration: underline;
}

53
client/scss/horizontal-quad-split/_horizontal-quad-split.scss
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;
};
}
};
}

35
client/scss/horizontal-split/_horizontal-split.scss
View file

@ -1,28 +1,39 @@
.horizontal-split { .horizontal-split {
max-width: $width-content-constrained;
width: 100%;
margin-left: auto;
margin-right: auto;
display : flex; display : flex;
flex-direction : row; flex-direction : row;
justify-content: space-between; 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) { @media (max-width: $break-point-tablet) {
.horizontal-split { .horizontal-split__column {
display : flex; display : flex;
flex-direction : column; flex-direction : column;
justify-content: space-between; 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;
}
} }

1
client/scss/input/_input.scss
View file

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

2
client/scss/label/_label.scss
View file

@ -11,7 +11,7 @@
cursor: pointer; 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 // note: bolding break point lines up with row-label break point
.label, .label-radio { .label, .label-radio {

71
client/scss/link/_link.scss
View file

@ -3,76 +3,19 @@ a, a:visited {
} }
.link--primary, .link--primary:visited { .link--primary, .link--primary:visited {
color: $interactive-color; color: $primary-color;
} &:hover { text-decoration: underline; }
.link--brand, .link--brand:visited {
color: $brand-color;
}
.link--secondary, .link--secondary:visited {
margin: 0px;
padding: 0.3em;
color: $secondary-color;
} }
.link--nav { .link--nav {
color: $primary-color; color: $text-color;
border-bottom: 2px solid white; border-bottom: 2px solid white;
&:hover {
color: $primary-color;
}
} }
.link--nav:hover {
color: $interactive-color;
}
.link--nav-active { .link--nav-active {
color: $interactive-color; border-bottom: 2px solid $primary-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;
}
}

17
client/scss/media-queries/_media-queries.scss
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 ) {
}

15
client/scss/nav-bar/_nav-bar.scss
View file

@ -1,13 +1,12 @@
.nav-bar { .nav-bar {
padding-left: $primary-padding; margin-left: $primary-padding;
padding-right: $primary-padding; margin-right: $primary-padding;
@media (max-width: $break-point-phone) { @media (max-width: $break-point-mobile) {
padding-left: 15px; margin-left: 15px;
padding-right: 15px; margin-right: 15px;
} }
// border-bottom: 0.5px solid $tertiary-color;
.select--arrow { .select--arrow {
padding: 0 1.5em 0 $input-padding; padding: 0 1.5em 0 $input-padding;
font-size: 14px; font-size: 14px;
@ -28,7 +27,7 @@
cursor: pointer; cursor: pointer;
} }
@media (max-width: $break-point-medium ) { @media (max-width: $break-point-tablet ) {
.nav-bar-link { .nav-bar-link {
padding-top: calc(1em - 2px); padding-top: calc(1em - 2px);
padding-right: 1em; padding-right: 1em;
@ -38,7 +37,7 @@
} }
@media (max-width: $break-point-small ) { @media (max-width: $break-point-mobile ) {
.nav-bar-link { .nav-bar-link {
padding-top: calc(0.5em - 2px); padding-top: calc(0.5em - 2px);
padding-right: 0.5em; padding-right: 0.5em;

16
client/scss/page-layout/_page-layout.scss
View file

@ -7,5 +7,21 @@
display: flex; display: flex;
-webkit-flex-direction: column; -webkit-flex-direction: column;
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;
} }
} }

2
client/scss/progress-bar/_progress-bar.scss
View file

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

6
client/scss/publish-preview/_publish-preview.scss
View file

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

2
client/scss/publish-url-input/_publish-url-input.scss
View file

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

4
client/scss/reset/_reset.scss
View file

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

65
client/scss/row/_row.scss
View file

@ -1,5 +1,5 @@
.row { .row {
padding-bottom: 1.2em; margin-bottom: 1.2em;
} }
.row-labeled { .row-labeled {
@ -10,77 +10,26 @@
} }
.row-labeled-label { .row-labeled-label {
align-self: flex-start;
width: 30%; width: 30%;
display: flex;
align-items: center;
flex: 1;
//bad, fix this
.label { padding-top: 0; padding-bottom: 0; }
} }
.row-labeled-content { .row-labeled-content {
align-self: center; align-self: center;
width: 70%; width: 70%;
} }
.row-labeled-alt { @media (max-width: $break-point-tablet ) {
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 ) {
.row-labeled { .row-labeled {
flex-direction: column; flex-direction: column;
} }
.row-labeled-label { .row-labeled-label {
width: 100%; width: 100%;
} }
.row-labeled-content { .row-labeled-content {
width: 100%; 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;
}
}
}
} }

4
client/scss/select/_select.scss
View file

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

2
client/scss/share-buttons/_share-buttons.scss
View file

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

1
client/scss/social-share-link/_social-share-link.scss
View file

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

32
client/scss/text/_text.scss
View file

@ -4,6 +4,12 @@ h1, h2, h3, h4, p {
margin: 0; margin: 0;
} }
body {
color: $text-color;
font-family: 'Circular', serif;
font-size: 16px;
}
h1 { h1 {
font-size: $text-xx-large; font-size: $text-xx-large;
} }
@ -14,12 +20,6 @@ h2 {
h3 { h3 {
font-size: $text-large; 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 { .text--extra-large {
@ -42,24 +42,12 @@ p, body, button, input, textarea, label, select, option {
font-size: $text-x-small; font-size: $text-x-small;
} }
.text--underline {
text-decoration: underline;
}
.text--primary {
color: $primary-color;
}
.text--secondary { .text--secondary {
color: $secondary-color; color: $help-color;
}
.text--tertiary {
color: $tertiary-color;
} }
.text--interactive { .text--interactive {
color: $interactive-color; color: $primary-color;
} }
.text--failure { .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 { h1 {
font-size: $text-large; 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 { h1 {
font-size: $text-medium; font-size: $text-medium;

4
client/scss/textarea/_textarea.scss
View file

@ -1,10 +1,6 @@
textarea { textarea {
margin: 0; margin: 0;
outline: none;
padding: $input-padding; padding: $input-padding;
border: 0;
border-bottom: 1px solid $secondary-color;
background-color: $background-color;
display: inline-block; display: inline-block;
width: $input-full-width; width: $input-full-width;
} }

31
client/scss/variables/_variables.scss
View file

@ -1,14 +1,11 @@
$base-color: white; $base-color: white;
$primary-color: black; $primary-color: #005da0;
$secondary-color: #9b9b9b; $secondary-color: $primary-color;
$tertiary-color: #ccccc0;
$interactive-color: blue;
$success-color: green; $success-color: green;
$failure-color: red; $failure-color: red;
// $brand-color: #ff725d;
$brand-color: #1944F9;
$grey: #9095A5; $grey: #9095A5;
$grey-alt: #DDDFE4; $help-color: $grey;
$grey-border: #DDDFE4;
$shadow-color: rgba(169, 173, 186, 0.2); $shadow-color: rgba(169, 173, 186, 0.2);
$primary-padding: 3em; $primary-padding: 3em;
@ -17,8 +14,10 @@ $tertiary-padding: 1em;
$thin-padding: 0.3em; $thin-padding: 0.3em;
$full-width-thin-padding: calc(100% - 0.6em); $full-width-thin-padding: calc(100% - 0.6em);
$width-content-constrained: 1000px;
$background-color: $base-color; $background-color: $base-color;
$font-color: $primary-color; $text-color: #333;
$button-border-width: 1px; $button-border-width: 1px;
$button-border-strength: solid; $button-border-strength: solid;
@ -28,18 +27,14 @@ $input-padding: 0.3em;
$input-full-width: calc(100% - 0.6em); $input-full-width: calc(100% - 0.6em);
$text-xx-large: 2.5em; $text-xx-large: 2.5em;
$text-x-large: xx-large; $text-x-large: x-large;
$text-large: x-large; $text-large: large;
$text-medium: large; $text-medium: medium;
$text-small: medium; $text-small: small;
$text-x-small: small; $text-x-small: small;
$break-point-xx-large: 1400px; $break-point-xx-large: 1400px;
$break-point-x-large: 1290px; $break-point-x-large: 1290px;
$break-point-large: 1000px; $break-point-large: 1000px;
$break-point-tablet: 900px; $break-point-tablet: 800px;
$break-point-medium: 800px; $break-point-mobile: 500px;
$break-point-phone: 640px;
$break-point-small: 500px;
$break-point-x-small: 400px;

11
client/scss/vertical-split/_vertical-split.scss
View file

@ -1,4 +1,4 @@
.vertical-split { .vertical-split, .visible-content {
flex : 1 0 auto; flex : 1 0 auto;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
@ -6,7 +6,13 @@
align-items : center; align-items : center;
}; };
.asset-display-wrap
{
flex-grow: 1;
}
.collapse-content { .collapse-content {
flex-grow: 0;
@media (max-width: $break-point-tablet) { @media (max-width: $break-point-tablet) {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
@ -18,7 +24,6 @@
} }
.collapse-button { .collapse-button {
outline: none;
background: none; background: none;
border: none; border: none;
display: block; display: block;
@ -34,7 +39,7 @@
} }
svg { svg {
stroke: $brand-color; stroke: $primary-color;
&.plus-icon { &.plus-icon {
transform: rotate(0); transform: rotate(0);
transition: all 0.4s ease; transition: all 0.4s ease;

4
client/src/components/AboutSpeechDetails/index.jsx
View file

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

18
client/src/components/AboutSpeechOverview/index.jsx
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> <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>
<Row> <Row>
<p className={'text--large'}> <div className={'text--large'}>
<a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a> <a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a><br/>
</p> <a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a><br/>
<p className={'text--large'}> <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'>GITHUB</a> <a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a><br/>
</p> </div>
<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>
</Row> </Row>
</div> </div>
); );

14
client/src/components/AssetInfoFooter/index.js Normal file
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;

40
client/src/components/AssetShareButtons/index.js
View file

@ -9,45 +9,49 @@ const AssetShareButtons = ({ assetUrl, name }) => {
target='_blank' target='_blank'
href={`https://twitter.com/intent/tweet?text=${assetUrl}`} href={`https://twitter.com/intent/tweet?text=${assetUrl}`}
> >
<img src='/assets/img/twitter.svg' /> <img src='/assets/img/icn_twitter.svg' />
</a> </a>
<a <a
className='link--primary facebook' className='link--primary facebook'
target='_blank' target='_blank'
href={`https://www.facebook.com/sharer/sharer.php?u=${assetUrl}`} 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>
<a <a
className='link--primary tumblr' className='link--primary tumblr'
target='_blank' target='_blank'
href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${assetUrl}`} href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${assetUrl}`}
> >
<img src='/assets/img/tumblr.svg' /> <img src='/assets/img/icn_tumblr.svg' />
</a> </a>
<a <a
className='link--primary reddit' className='link--primary reddit'
target='_blank' target='_blank'
href={`https://www.reddit.com/submit?url=${assetUrl}&title=${name}`} href={`https://www.reddit.com/submit?url=${assetUrl}&title=${name}`}
> >
<img src='/assets/img/reddit.svg' /> <img src='/assets/img/icn_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
</a> </a>
</SocialShareLink> </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; export default AssetShareButtons;

2
client/src/components/ButtonPrimary/index.jsx
View file

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

2
client/src/components/ButtonPrimaryJumbo/index.jsx
View file

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

14
client/src/components/ButtonTertiary/index.jsx
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;

5
client/src/components/ChannelAbout/index.jsx
View file

@ -2,8 +2,9 @@ import React from 'react';
const ChannelAbout = () => { const ChannelAbout = () => {
return ( return (
<div> <div className={'text--large'}>
<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> <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> </div>
); );
}; };

13
client/src/components/Column/index.jsx
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;

2
client/src/components/DropzoneDropItDisplay/index.jsx
View file

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

8
client/src/components/DropzoneInstructionsDisplay/index.jsx
View file

@ -6,15 +6,15 @@ const DropzoneInstructionsDisplay = ({fileError}) => {
return ( return (
<div className={'dropzone-instructions-display'}> <div className={'dropzone-instructions-display'}>
<Row> <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>
<Row> <Row>
<p className={'text--small'}>OR</p> <span className={'text--small text--secondary'}>OR</span>
</Row> </Row>
{ fileError ? ( { fileError ? (
<div> <div>
<Row> <Row>
<p className={'text--large text--underline'}>CHOOSE FILE</p> <span className={'text--large dropzone-instructions-display__chooser-label'}>CHOOSE FILE</span>
</Row> </Row>
<FormFeedbackDisplay <FormFeedbackDisplay
errorMessage={fileError} errorMessage={fileError}
@ -22,7 +22,7 @@ const DropzoneInstructionsDisplay = ({fileError}) => {
/> />
</div> </div>
) : ( ) : (
<p className={'text--large text--underline'}>CHOOSE FILE</p> <span className={'text--large dropzone-instructions-display__chooser-label'}>CHOOSE FILE</span>
)} )}
</div> </div>
); );

6
client/src/components/FormFeedbackDisplay/index.jsx
View file

@ -4,13 +4,13 @@ const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
return ( return (
<div className={'form-feedback'}> <div className={'form-feedback'}>
{ errorMessage ? ( { errorMessage ? (
<p className={'text--small text--failure'}>{errorMessage}</p> <span className={'text--small text--failure'}>{errorMessage}</span>
) : ( ) : (
<div> <div>
{ defaultMessage ? ( { 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> </div>
)} )}

37
client/src/components/HorizontalQuadSplit/index.jsx
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;

4
client/src/components/HorizontalSplit/index.jsx
View file

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

12
client/src/components/PublishPreview/index.jsx
View file

@ -5,13 +5,17 @@ import PublishDetails from '@containers/PublishDetails';
import PublishTitleInput from '@containers/PublishTitleInput'; import PublishTitleInput from '@containers/PublishTitleInput';
import Row from '@components/Row'; import Row from '@components/Row';
// this class seems more like PublishForm and should probably be renamed
class PublishPreview extends React.Component { class PublishPreview extends React.Component {
render () { render () {
return ( return (
<div> <div className={'publish-form'}>
<Row> <div className={'publish-form__title'}>
<PublishTitleInput /> <Row>
</Row> <PublishTitleInput />
</Row>
</div>
<HorizontalSplit <HorizontalSplit
leftSide={<Dropzone />} leftSide={<Dropzone />}
rightSide={<PublishDetails />} rightSide={<PublishDetails />}

14
client/src/components/RowLabeledAlt/index.jsx
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;

9
client/src/components/VerticalCollapsibleSplit/index.jsx
View file

@ -5,11 +5,18 @@ class VerticalCollapsibleSplit extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.collapse = this.collapse.bind(this); 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 () { collapse () {
this.setState({ closed: !this.state.closed }); 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')); document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed'));
} }

193
client/src/containers/AssetInfo/view.jsx
View file

@ -11,6 +11,7 @@ import HorizontalSplit from '@components/HorizontalSplit';
import siteConfig from '@config/siteConfig.json'; import siteConfig from '@config/siteConfig.json';
const { details: { host } } = siteConfig; const { details: { host } } = siteConfig;
import createCanonicalLink from '../../../../utils/createCanonicalLink'; import createCanonicalLink from '../../../../utils/createCanonicalLink';
import AssetInfoFooter from '../../components/AssetInfoFooter/index';
class AssetInfo extends React.Component { class AssetInfo extends React.Component {
render () { render () {
@ -29,129 +30,111 @@ class AssetInfo extends React.Component {
channelCanonicalUrl = `${createCanonicalLink({channel})}`; channelCanonicalUrl = `${createCanonicalLink({channel})}`;
} }
return ( return (
<div className='asset-information-wrap'> <div className='asset-info'>
<HorizontalSplit <HorizontalSplit
leftSide={ leftSide={
description && ( description && (
<Row> <p className='asset-info__description'>{description}</p>
<p>{description}</p>
</Row>
) )
} }
rightSide={ rightSide={
<div> <div>
{channelName && ( {channelName && (
<Row> <RowLabeled
<RowLabeled label={
label={ <Label value={'Channel'} />
<Label value={'Channel:'} /> }
} content={
content={ <span className='text'>
<span className='text'> <Link className='link--primary' to={channelCanonicalUrl}>{channelName}</Link>
<Link to={channelCanonicalUrl}>{channelName}</Link> </span>
</span> }
} />
/>
</Row>
)} )}
{claimViews ? ( {claimViews ? (
<Row> <RowLabeled
<RowLabeled label={
label={ <Label value={'Views'} />
<Label value={'Views:'} /> }
} content={
content={ <span className='text'>
<span className='text'> {claimViews}
{claimViews} </span>
</span> }
} />
/>
</Row>
) : null} ) : null}
<Row> <RowLabeled
<RowLabeled label={
label={ <Label value={'Share'} />
<Label value={'Share:'} /> }
} content={
content={ <AssetShareButtons
<AssetShareButtons name={name}
name={name} assetUrl={assetCanonicalUrl}
assetUrl={assetCanonicalUrl} />
/> }
} />
/>
</Row>
<Row> <RowLabeled
<RowLabeled label={
label={ <Label value={'Link'} />
<Label value={'Link:'} /> }
} content={
content={ <ClickToCopy
<ClickToCopy id={'short-link'}
id={'short-link'} value={assetCanonicalUrl}
value={assetCanonicalUrl} />
/> }
} />
/>
</Row>
<Row> <RowLabeled
<RowLabeled label={
label={ <Label value={'Embed'} />
<Label value={'Embed:'} /> }
} content={
content={ <div>
<div> {(contentType === 'video/mp4') ? (
{(contentType === 'video/mp4') ? ( <ClickToCopy
<ClickToCopy id={'embed-text-video'}
id={'embed-text-video'} value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`} />
/> ) : (
) : ( <ClickToCopy
<ClickToCopy id={'embed-text-image'}
id={'embed-text-image'} value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`} />
/> )}
)} </div>
</div> }
} />
/>
</Row>
<Row> <SpaceBetween>
<SpaceBetween> <a
<a className='link--primary'
className='link--primary' href={`${assetCanonicalUrl}.${fileExt}`}
href={`${assetCanonicalUrl}.${fileExt}`} >
> Direct Link
Direct Link </a>
</a> <a
<a className={'link--primary'}
className={'link--primary'} href={`${assetCanonicalUrl}.${fileExt}`}
href={`${assetCanonicalUrl}.${fileExt}`} download={name}
download={name} >
> Download
Download </a>
</a> <a
<a className={'link--primary'}
className={'link--primary'} target='_blank'
target='_blank' href='https://lbry.io/dmca'
href='https://lbry.io/dmca' >
> Report
Report </a>
</a> </SpaceBetween>
</SpaceBetween>
</Row>
</div> </div>
} /> } />
<Row> <AssetInfoFooter/>
<p>
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p>
</Row>
</div> </div>
); );
} }

2
client/src/containers/ChannelCreateForm/view.jsx
View file

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

4
client/src/containers/ChannelTools/view.jsx
View file

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

4
client/src/containers/PublishDetails/view.jsx
View file

@ -6,7 +6,7 @@ import PublishMetadataInputs from '@containers/PublishMetadataInputs';
import ChannelSelect from '@containers/ChannelSelect'; import ChannelSelect from '@containers/ChannelSelect';
import Row from '@components/Row'; import Row from '@components/Row';
import ButtonPrimaryJumbo from '@components/ButtonPrimaryJumbo'; import ButtonPrimaryJumbo from '@components/ButtonPrimaryJumbo';
import ButtonTertiary from '@components/ButtonTertiary'; import ButtonSecondary from '@components/ButtonSecondary';
import SpaceAround from '@components/SpaceAround'; import SpaceAround from '@components/SpaceAround';
import PublishFinePrint from '@components/PublishFinePrint'; import PublishFinePrint from '@components/PublishFinePrint';
@ -48,7 +48,7 @@ class PublishDetails extends React.Component {
<Row> <Row>
<SpaceAround> <SpaceAround>
<ButtonTertiary <ButtonSecondary
value={'Cancel'} value={'Cancel'}
onClickHandler={this.props.clearFile} onClickHandler={this.props.clearFile}
/> />

33
client/src/containers/PublishMetadataInputs/view.jsx
View file

@ -3,6 +3,7 @@ import PublishDescriptionInput from '@components/PublishDescriptionInput';
import PublishLicenseInput from '@components/PublishLicenseInput'; import PublishLicenseInput from '@components/PublishLicenseInput';
import PublishNsfwInput from '@components/PublishNsfwInput'; import PublishNsfwInput from '@components/PublishNsfwInput';
import ButtonSecondary from '@components/ButtonSecondary'; import ButtonSecondary from '@components/ButtonSecondary';
import Row from '@components/Row';
class PublishMetadataInputs extends React.Component { class PublishMetadataInputs extends React.Component {
constructor (props) { constructor (props) {
@ -29,19 +30,25 @@ class PublishMetadataInputs extends React.Component {
return ( return (
<div> <div>
{this.props.showMetadataInputs && ( {this.props.showMetadataInputs && (
<div> <React.Fragment>
<PublishDescriptionInput <Row>
description={this.props.description} <PublishDescriptionInput
handleInput={this.handleInput} description={this.props.description}
/> handleInput={this.handleInput}
<PublishLicenseInput />
handleSelect={this.handleSelect} </Row>
/> <Row>
<PublishNsfwInput <PublishLicenseInput
nsfw={this.props.nsfw} handleSelect={this.handleSelect}
handleInput={this.handleInput} />
/> </Row>
</div> <Row>
<PublishNsfwInput
nsfw={this.props.nsfw}
handleInput={this.handleInput}
/>
</Row>
</React.Fragment>
)} )}
<ButtonSecondary <ButtonSecondary
value={this.props.showMetadataInputs ? 'less' : 'more'} value={this.props.showMetadataInputs ? 'less' : 'more'}

2
client/src/containers/PublishThumbnailInput/view.jsx
View file

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

17
client/src/pages/ShowAssetDetails/view.jsx
View file

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