Merge branch 'master' of github.com:saniaio/spee.ch into redesign
This commit is contained in:
Jeremy Kauffman
commit
7bcaa5081b
41 changed files with 721 additions and 111 deletions
|
|
@ -30,6 +30,7 @@
|
|||
@import '~page-content/_page-content';
|
||||
@import '~progress-bar/_progress-bar';
|
||||
@import '~publish-preview/_publish-preview';
|
||||
@import '~share-buttons/_share-buttons';
|
||||
@import '~space-between/_space-between';
|
||||
@import '~space-around/_space-around';
|
||||
@import '~row/_row';
|
||||
|
|
|
|||
|
|
@ -1,22 +1,184 @@
|
|||
.asset-display {
|
||||
background: #F6F6F6;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-title {
|
||||
color: #2E2F31;
|
||||
font-size: 26px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0;
|
||||
line-height: 32px;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-image, .asset-video {
|
||||
margin : 0;
|
||||
max-width: 100%;
|
||||
margin: 60px auto;
|
||||
max-height: 100%;
|
||||
max-width: 60vh;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
@media (max-width: $break-point-small) {
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.asset-video {
|
||||
border: 1px solid #d0d0d0;
|
||||
margin: 16px;
|
||||
border: none;
|
||||
margin: 0px auto;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
}
|
||||
.vertical-split .asset-display {
|
||||
height: 90vh;
|
||||
|
||||
.visible-content {
|
||||
margin: 0;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&.closed {
|
||||
box-shadow: none;
|
||||
|
||||
&:after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&: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: '';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-information-wrap {
|
||||
max-width: 800px;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
margin: 0px auto;
|
||||
max-width: 100%;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-phone) {
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.horizontal-split {
|
||||
justify-content: center;
|
||||
|
||||
.column {
|
||||
padding-top: 40px;
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid $grey-alt;
|
||||
margin-right: -1px;
|
||||
padding-right: 40px;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
border: none;
|
||||
margin: 0;
|
||||
order: 2;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-left: 1px solid $grey-alt;
|
||||
padding-left: 60px;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 40px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p.asset-description {
|
||||
color: #2E2F31;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
padding-bottom: 80px;
|
||||
white-space: pre-line;
|
||||
width: 360px;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
margin: 22px 0 60px;
|
||||
max-width: 600px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-information {
|
||||
width: 320px;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
border-bottom: 1px solid $grey-alt;
|
||||
min-width: 100%;
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,9 +1,35 @@
|
|||
.click-to-copy {
|
||||
.click-to-copy-wrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
color: black;
|
||||
background-color: white;
|
||||
width: calc(100% - 1em - 2px);
|
||||
border: 1px solid $grey-alt;
|
||||
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;
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
svg {
|
||||
stroke: $brand-color;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
client/scss/font/Circular/CircularStd-Bold.ttf
Normal file
BIN
client/scss/font/Circular/CircularStd-Bold.ttf
Normal file
Binary file not shown.
BIN
client/scss/font/Circular/CircularStd-Book.ttf
Normal file
BIN
client/scss/font/Circular/CircularStd-Book.ttf
Normal file
Binary file not shown.
|
|
@ -16,3 +16,16 @@
|
|||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Circular';
|
||||
src: url('./font/Circular/CircularStd-Book.ttf');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Circular';
|
||||
src: url('./font/Circular/CircularStd-Bold.ttf');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: space-between;
|
||||
align-items : flex-start;
|
||||
|
||||
.column {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
@ -10,13 +10,13 @@
|
|||
|
||||
|
||||
|
||||
@media (max-width: $break-point-large ) {
|
||||
@media (max-width: $break-point-tablet) {
|
||||
|
||||
.horizontal-split {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: space-between;
|
||||
align-items : flex-start;
|
||||
|
||||
.column {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
|
|
|
|||
9
client/scss/icon/chevron-down.svg
Normal file
9
client/scss/icon/chevron-down.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14px" height="8px" viewBox="0 0 14 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>chevron-down</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<polyline id="chevron-down" stroke="#000000" stroke-width="1.2" fill-rule="nonzero" points="13 1 7 7 1 1"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 582 B |
|
|
@ -2,6 +2,7 @@
|
|||
padding-top: $thin-padding;
|
||||
padding-bottom: $thin-padding;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.label-radio {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@ a, a:visited {
|
|||
color: $interactive-color;
|
||||
}
|
||||
|
||||
.link--brand, .link--brand:visited {
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.link--secondary, .link--secondary:visited {
|
||||
margin: 0px;
|
||||
padding: 0.3em;
|
||||
|
|
@ -25,3 +29,50 @@ a, a:visited {
|
|||
color: $interactive-color;
|
||||
border-bottom: 2px solid $interactive-color;
|
||||
}
|
||||
|
||||
|
||||
.link--icon, .link--icon:visited {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.link-text {
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.icon-wrap {
|
||||
margin-left: 5px;
|
||||
padding-top: 0px;
|
||||
align-items: center;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke: $grey;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-x-small) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.link-text {
|
||||
border-bottom: 1px solid $brand-color;
|
||||
}
|
||||
svg {
|
||||
stroke: $brand-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.link--hover {
|
||||
display: inline-block;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
&:hover {
|
||||
border-bottom: 1px solid $brand-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,27 @@
|
|||
.nav-bar {
|
||||
padding-left: $primary-padding;
|
||||
padding-right: $primary-padding;
|
||||
border-bottom: 0.5px solid $tertiary-color;
|
||||
|
||||
@media (max-width: $break-point-phone) {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
// border-bottom: 0.5px solid $tertiary-color;
|
||||
.select--arrow {
|
||||
padding: 0 1.5em 0 $input-padding;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-link {
|
||||
padding: calc(1em - 2px);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-bar-logo {
|
||||
|
|
@ -23,6 +35,7 @@
|
|||
padding-bottom: calc(1em - 2px);
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-small ) {
|
||||
|
|
@ -33,3 +46,5 @@
|
|||
padding-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,5 @@
|
|||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin: $primary-padding;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.row {
|
||||
padding-bottom: 2em;
|
||||
padding-bottom: 1.2em;
|
||||
}
|
||||
|
||||
.row-labeled {
|
||||
|
|
@ -18,6 +18,31 @@
|
|||
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 ) {
|
||||
|
||||
|
|
@ -33,3 +58,29 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ select {
|
|||
.select--arrow {
|
||||
-moz-appearance:none;
|
||||
-webkit-appearance: none;
|
||||
background: url('./icon/downArrow.svg') no-repeat right;
|
||||
background: url('./icon/chevron-down.svg') no-repeat right;
|
||||
cursor: pointer;
|
||||
padding-right: 1.5em;
|
||||
padding-left: $input-padding
|
||||
|
|
|
|||
51
client/scss/share-buttons/_share-buttons.scss
Normal file
51
client/scss/share-buttons/_share-buttons.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.share-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 7px;
|
||||
border-radius: 100%;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
&.twitter {
|
||||
background:#4DC2FE;
|
||||
img {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
background: #5487DE;
|
||||
img {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tumblr {
|
||||
background: #274061;
|
||||
img {
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&.reddit {
|
||||
background: #FF4500;
|
||||
img {
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $brand-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,8 +18,8 @@ h3 {
|
|||
}
|
||||
|
||||
p, body, button, input, textarea, label, select, option {
|
||||
font-family: 'Lekton', monospace;
|
||||
font-size: $text-large;
|
||||
font-family: 'Circular', serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.text--extra-large {
|
||||
|
|
@ -116,7 +116,7 @@ p, body, button, input, textarea, label, select, option {
|
|||
}
|
||||
|
||||
p, body, button, input, textarea, label, select, option {
|
||||
font-size: $text-small;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.text--extra-large {
|
||||
|
|
@ -146,7 +146,7 @@ p, body, button, input, textarea, label, select, option {
|
|||
}
|
||||
|
||||
p, body, button, input, textarea, label, select, option {
|
||||
font-size: $text-x-small;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.text--extra-large {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@ $tertiary-color: #ccccc0;
|
|||
$interactive-color: blue;
|
||||
$success-color: green;
|
||||
$failure-color: red;
|
||||
// $brand-color: #ff725d;
|
||||
$brand-color: #1944F9;
|
||||
$grey: #9095A5;
|
||||
$grey-alt: #DDDFE4;
|
||||
$shadow-color: rgba(169, 173, 186, 0.2);
|
||||
|
||||
$primary-padding: 3em;
|
||||
$secondary-padding: 2em;
|
||||
|
|
@ -32,7 +37,9 @@ $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;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,3 +5,46 @@
|
|||
justify-content: space-between;
|
||||
align-items : center;
|
||||
};
|
||||
|
||||
.collapse-content {
|
||||
@media (max-width: $break-point-tablet) {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-content.closed{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
outline: none;
|
||||
background: none;
|
||||
border: none;
|
||||
display: block;
|
||||
margin: 15px auto 0;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
padding-left: 10px;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: $brand-color;
|
||||
&.plus-icon {
|
||||
transform: rotate(0);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.plus-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,32 +5,32 @@ const AssetShareButtons = ({ assetUrl, name }) => {
|
|||
return (
|
||||
<SocialShareLink >
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary twitter'
|
||||
target='_blank'
|
||||
href={`https://twitter.com/intent/tweet?text=${assetUrl}`}
|
||||
>
|
||||
twitter
|
||||
<img src='/assets/img/twitter.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary facebook'
|
||||
target='_blank'
|
||||
href={`https://www.facebook.com/sharer/sharer.php?u=${assetUrl}`}
|
||||
>
|
||||
facebook
|
||||
<img src='/assets/img/facebook.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary tumblr'
|
||||
target='_blank'
|
||||
href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${assetUrl}`}
|
||||
>
|
||||
tumblr
|
||||
<img src='/assets/img/tumblr.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
className='link--primary reddit'
|
||||
target='_blank'
|
||||
href={`https://www.reddit.com/submit?url=${assetUrl}&title=${name}`}
|
||||
>
|
||||
reddit
|
||||
<img src='/assets/img/reddit.svg' />
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import React from 'react';
|
||||
import * as Icon from 'react-feather';
|
||||
|
||||
class ClickToCopy extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.copyToClipboard = this.copyToClipboard.bind(this);
|
||||
}
|
||||
copyToClipboard (event) {
|
||||
const elementToCopy = event.target.id;
|
||||
copyToClipboard () {
|
||||
const elementToCopy = this.props.id;
|
||||
const element = document.getElementById(elementToCopy);
|
||||
console.log(elementToCopy);
|
||||
element.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
|
|
@ -18,15 +20,22 @@ class ClickToCopy extends React.Component {
|
|||
render () {
|
||||
const {id, value} = this.props;
|
||||
return (
|
||||
<input
|
||||
id={id}
|
||||
value={value}
|
||||
<div
|
||||
className='click-to-copy-wrap'
|
||||
onClick={this.copyToClipboard}
|
||||
type='text'
|
||||
className='click-to-copy'
|
||||
readOnly
|
||||
spellCheck='false'
|
||||
/>
|
||||
>
|
||||
<input
|
||||
id={id}
|
||||
value={value}
|
||||
type='text'
|
||||
className='click-to-copy'
|
||||
readOnly
|
||||
spellCheck='false'
|
||||
/>
|
||||
<div className='icon-wrap'>
|
||||
<Icon.Copy />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ class NavBar extends React.Component {
|
|||
<div className={'nav-bar'}>
|
||||
<SpaceBetween >
|
||||
<Logo />
|
||||
<SiteDescription />
|
||||
<NavigationLinks />
|
||||
</SpaceBetween>
|
||||
</div>
|
||||
|
|
|
|||
14
client/src/components/RowLabeledAlt/index.jsx
Normal file
14
client/src/components/RowLabeledAlt/index.jsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
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;
|
||||
38
client/src/components/VerticalCollapsibleSplit/index.jsx
Normal file
38
client/src/components/VerticalCollapsibleSplit/index.jsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import * as Icon from 'react-feather';
|
||||
class VerticalCollapsibleSplit extends React.Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.collapse = this.collapse.bind(this);
|
||||
this.state = { closed: false };
|
||||
}
|
||||
|
||||
collapse () {
|
||||
this.setState({ closed: !this.state.closed });
|
||||
document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed'));
|
||||
}
|
||||
|
||||
render () {
|
||||
let {
|
||||
props,
|
||||
state,
|
||||
} = this;
|
||||
|
||||
return (
|
||||
<div className={'vertical-split'}>
|
||||
<div className='visible-content' data-name={props.name}>
|
||||
{props.top}
|
||||
<button className='collapse-button' onClick={this.collapse}>
|
||||
{state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
|
||||
</button>
|
||||
</div>
|
||||
<div className='collapse-content' data-name={props.name}>
|
||||
{props.bottom}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default VerticalCollapsibleSplit;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import Row from '@components/Row';
|
||||
import AssetTitle from '@containers/AssetTitle';
|
||||
import ProgressBar from '@components/ProgressBar';
|
||||
import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from '../../constants/asset_display_states';
|
||||
|
||||
|
|
@ -12,62 +13,66 @@ class AssetDisplay extends React.Component {
|
|||
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
|
||||
const sourceUrl = `/${claimId}/${name}.${fileExt}`;
|
||||
return (
|
||||
<div className={'asset-display'}>
|
||||
{(status === LOCAL_CHECK) &&
|
||||
<div>
|
||||
<p>Checking to see if Spee.ch has your asset locally...</p>
|
||||
</div>
|
||||
}
|
||||
{(status === UNAVAILABLE) &&
|
||||
<div>
|
||||
<p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
|
||||
<ProgressBar size={12} />
|
||||
<p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
|
||||
</div>
|
||||
}
|
||||
{(status === ERROR) &&
|
||||
<div>
|
||||
<Row>
|
||||
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<p id='error-message'><i>{error}</i></p>
|
||||
</Row>
|
||||
</div>
|
||||
}
|
||||
{(status === AVAILABLE) &&
|
||||
(() => {
|
||||
switch (contentType) {
|
||||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
return (
|
||||
<img
|
||||
className='asset-image'
|
||||
src={sourceUrl}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<video
|
||||
className='asset-video'
|
||||
controls poster={thumbnail}
|
||||
>
|
||||
<source
|
||||
src={sourceUrl}
|
||||
/>
|
||||
<p>Your browser does not support the <code>video</code> element.</p>
|
||||
</video>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<p>Unsupported content type</p>
|
||||
);
|
||||
<div className={'asset-display-wrap'}>
|
||||
<div className={'asset-display'}>
|
||||
{(status === LOCAL_CHECK) &&
|
||||
<div>
|
||||
<p>Checking to see if Spee.ch has your asset locally...</p>
|
||||
</div>
|
||||
}
|
||||
})()
|
||||
}
|
||||
{(status === UNAVAILABLE) &&
|
||||
<div>
|
||||
<p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
|
||||
<ProgressBar size={12} />
|
||||
<p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
|
||||
</div>
|
||||
}
|
||||
{(status === ERROR) &&
|
||||
<div>
|
||||
<Row>
|
||||
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<p id='error-message'><i>{error}</i></p>
|
||||
</Row>
|
||||
</div>
|
||||
}
|
||||
{(status === AVAILABLE) &&
|
||||
(() => {
|
||||
switch (contentType) {
|
||||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
return (
|
||||
<img
|
||||
className='asset-image'
|
||||
src={sourceUrl}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<video
|
||||
className='asset-video'
|
||||
controls poster={thumbnail}
|
||||
>
|
||||
<source
|
||||
src={sourceUrl}
|
||||
alt={name}
|
||||
/>
|
||||
<p>Your browser does not support the <code>video</code> element.</p>
|
||||
</video>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<p>Unsupported content type</p>
|
||||
);
|
||||
}
|
||||
})()
|
||||
}
|
||||
<AssetTitle />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import React from 'react';
|
||||
import Row from '@components/Row';
|
||||
|
||||
const AssetTitle = ({ title }) => {
|
||||
return (
|
||||
<Row>
|
||||
<h3>{title}</h3>
|
||||
</Row>
|
||||
<div className='asset-title-wrap'>
|
||||
<h3 className='asset-title'>{title}</h3>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import PageLayout from '@components/PageLayout';
|
||||
|
||||
import HorizontalSplit from '@components/HorizontalSplit';
|
||||
import AssetTitle from '@containers/AssetTitle';
|
||||
import VerticalCollapsibleSplit from '@components/VerticalCollapsibleSplit';
|
||||
import AssetDisplay from '@containers/AssetDisplay';
|
||||
import AssetInfo from '@containers/AssetInfo';
|
||||
import ErrorPage from '@pages/ErrorPage';
|
||||
|
|
@ -17,10 +16,10 @@ class ShowAssetDetails extends React.Component {
|
|||
pageTitle={`${name} - details`}
|
||||
asset={asset}
|
||||
>
|
||||
<AssetTitle />
|
||||
<HorizontalSplit
|
||||
leftSide={<AssetDisplay />}
|
||||
rightSide={<AssetInfo />}
|
||||
<VerticalCollapsibleSplit
|
||||
name={'asset-display-collapse'}
|
||||
top={<AssetDisplay />}
|
||||
bottom={<AssetInfo />}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
|
|
|
|||
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -11579,6 +11579,11 @@
|
|||
"prop-types": "15.6.2"
|
||||
}
|
||||
},
|
||||
"react-feather": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.3.tgz",
|
||||
"integrity": "sha512-5+KHu7zp5qvc+zq6N0XjeZDhufl3NVEaQyocg486lXZ+ZwW9z66GO+HXABoZ74OCLjsqhBl48j4BS17VRfyjTQ=="
|
||||
},
|
||||
"react-ga": {
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.5.3.tgz",
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@
|
|||
"prop-types": "^15.6.2",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2",
|
||||
"react-feather": "^1.1.3",
|
||||
"react-ga": "^2.5.3",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-redux": "^5.0.6",
|
||||
|
|
|
|||
16
public/assets/img/facebook.svg
Normal file
16
public/assets/img/facebook.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="17px" viewBox="0 0 10 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-878.000000, -918.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<path d="M55,16.2457933 L55,13.2217548 L57.6590693,13.2217548 L57.6590693,10.9945913 C57.6590693,9.72775809 58.0205601,8.74529596 58.7435525,8.04717548 C59.4665449,7.349055 60.4293617,7 61.6320317,7 C62.6539537,7 63.4464527,7.04086498 64.0095525,7.12259615 L64.0095525,9.81971154 L62.3724001,9.81971154 C61.774541,9.81971154 61.3713397,9.94230647 61.1627842,10.1875 C60.9542287,10.4326935 60.8499525,10.8004783 60.8499525,11.2908654 L60.8499525,13.2217548 L63.9052753,13.2217548 L63.4985941,16.2457933 L60.8499525,16.2457933 L60.8499525,24 L57.6590693,24 L57.6590693,16.2457933 L55,16.2457933 Z" id="facebook"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
11
public/assets/img/icn_facebook.svg
Normal file
11
public/assets/img/icn_facebook.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-867.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_facebook" transform="translate(867.000000, 911.000000)">
|
||||
<rect id="Rectangle-7-Copy" fill="#5487DE" x="0" y="0" width="30" height="30" rx="15"></rect>
|
||||
<path d="M10,16.2457933 L10,13.2217548 L12.6590693,13.2217548 L12.6590693,10.9945913 C12.6590693,9.72775809 13.0205601,8.74529596 13.7435525,8.04717548 C14.4665449,7.349055 15.4293617,7 16.6320317,7 C17.6539537,7 18.4464527,7.04086498 19.0095525,7.12259615 L19.0095525,9.81971154 L17.3724001,9.81971154 C16.774541,9.81971154 16.3713397,9.94230647 16.1627842,10.1875 C15.9542287,10.4326935 15.8499525,10.8004783 15.8499525,11.2908654 L15.8499525,13.2217548 L18.9052753,13.2217548 L18.4985941,16.2457933 L15.8499525,16.2457933 L15.8499525,24 L12.6590693,24 L12.6590693,16.2457933 L10,16.2457933 Z" id="facebook" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
11
public/assets/img/icn_reddit.svg
Normal file
11
public/assets/img/icn_reddit.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-955.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_reddit" transform="translate(955.000000, 911.000000)">
|
||||
<circle id="Oval" fill="#FF4500" cx="15" cy="15" r="15"></circle>
|
||||
<path d="M24.0048981,15.1197594 C23.9764831,14.3425491 23.4942377,13.6545068 22.773348,13.3626486 C22.0524583,13.0707904 21.2273777,13.229551 20.6662713,13.7680886 C19.1286396,12.7228617 17.3211611,12.1454075 15.4623388,12.1055335 L16.3409248,7.88832069 L19.2335002,8.49657254 C19.3045341,9.15687714 19.8447288,9.66775963 20.507966,9.70188281 C21.1712032,9.73600599 21.7609761,9.2832597 21.8994002,8.6337316 C22.0378242,7.98420349 21.6838865,7.33033854 21.0643652,7.09108696 C20.4448439,6.85183538 19.7432934,7.09808364 19.4092174,7.67205337 L16.097624,7.00973469 C15.9882261,6.98573517 15.8737733,7.00653061 15.7798101,7.06747975 C15.6858468,7.1284289 15.6201945,7.22445834 15.5975059,7.33413567 L14.5972695,12.0244333 C12.7155841,12.0528011 10.8832461,12.6306923 9.32575344,13.6869883 C8.75634717,13.1512356 7.92434611,13.0021476 7.20433738,13.3068472 C6.48432865,13.6115468 6.01208752,14.3125756 6.00022843,15.0943133 C5.98836935,15.876051 6.43912863,16.5910818 7.14956348,16.9174815 C7.13434461,17.1154345 7.13434461,17.3142637 7.14956348,17.5122166 C7.14956348,20.5399592 10.6774242,23 15.0298041,23 C19.382184,23 22.9100448,20.5399592 22.9100448,17.5122166 C22.9252636,17.3142637 22.9252636,17.1154345 22.9100448,16.9174815 C23.5907847,16.5791323 24.016659,15.8798572 24.0048981,15.1197594 Z M10.4881903,16.4714301 C10.4881903,15.724923 11.0933539,15.1197594 11.8398611,15.1197594 C12.5863682,15.1197594 13.1915319,15.724923 13.1915319,16.4714301 C13.1915319,17.2179373 12.5863682,17.8231009 11.8398611,17.8231009 C11.4813757,17.8231009 11.137573,17.6806932 10.8840855,17.4272057 C10.6305981,17.1737183 10.4881903,16.8299155 10.4881903,16.4714301 Z M18.3413975,20.1885248 C17.3824182,20.9112013 16.202534,21.2790195 15.0027707,21.2293113 C13.8030075,21.2790195 12.6231232,20.9112013 11.6641439,20.1885248 C11.5450602,20.0434288 11.5554608,19.831664 11.6881894,19.6989354 C11.820918,19.5662068 12.0326828,19.5558062 12.1777788,19.6748899 C12.9904434,20.2709755 13.9824183,20.5714295 14.989254,20.5264425 C15.9973291,20.581264 16.9939253,20.2903914 17.8142459,19.7019233 C17.910827,19.6077567 18.0503089,19.5722686 18.1801501,19.608827 C18.3099913,19.6453854 18.4104658,19.7484362 18.4437259,19.8791612 C18.476986,20.0098862 18.4379786,20.148425 18.3413975,20.2425916 L18.3413975,20.1885248 Z M18.0980968,17.8771677 C17.3515896,17.8771677 16.746426,17.2720041 16.746426,16.525497 C16.746426,15.7789898 17.3515896,15.1738262 18.0980968,15.1738262 C18.844604,15.1738262 19.4497676,15.7789898 19.4497676,16.525497 C19.4646058,16.8956141 19.3269023,17.2556033 19.0688404,17.5213305 C18.8107785,17.7870576 18.4549729,17.935236 18.0845801,17.9312346 L18.0980968,17.8771677 Z" id="Shape" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
11
public/assets/img/icn_tumblr.svg
Normal file
11
public/assets/img/icn_tumblr.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-911.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_tumblr" transform="translate(911.000000, 911.000000)">
|
||||
<rect id="Rectangle-7-Copy-2" fill="#274061" x="0" y="0" width="30" height="30" rx="15"></rect>
|
||||
<path d="M10,13.3195248 L10,11.139339 C10.6412999,10.9383992 11.1874537,10.6570877 11.6384778,10.2953961 C12.0895019,9.92700647 12.4524299,9.48494557 12.7272727,8.9692001 C13.0021155,8.44675665 13.1923885,7.79036318 13.2980973,7 L15.6131078,7 L15.6131078,10.8982124 L19.4608879,10.8982124 L19.4608879,13.3195248 L15.6131078,13.3195248 L15.6131078,17.2780189 C15.6131078,18.188946 15.6624378,18.7649647 15.7610994,19.0060925 C15.8527136,19.2539182 16.0359394,19.454855 16.3107822,19.6089088 C16.6631448,19.8165466 17.0754029,19.9203639 17.5475687,19.9203639 C18.3720971,19.9203639 19.1895661,19.665844 20,19.1567966 L20,21.5881559 C19.2811803,21.9096595 18.6539844,22.127341 18.1183932,22.2412069 C17.5757549,22.3684688 16.9661767,22.4320988 16.2896406,22.4320988 C15.5496792,22.4320988 14.8942946,22.3416772 14.3234672,22.1608314 C13.7737816,21.9933816 13.2875285,21.7422106 12.8646934,21.407311 C12.4559529,21.0657133 12.1775906,20.714074 12.0295983,20.3523823 C11.8745588,19.9906907 11.7970402,19.4515104 11.7970402,18.7348251 L11.7970402,13.3195248 L10,13.3195248 Z" id="tumblr" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
11
public/assets/img/icn_twitter.svg
Normal file
11
public/assets/img/icn_twitter.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded" transform="translate(-823.000000, -911.000000)" fill-rule="nonzero">
|
||||
<g id="icn_twitter" transform="translate(823.000000, 911.000000)">
|
||||
<rect id="Rectangle-7" fill="#4DC2FE" x="0" y="0" width="30" height="30" rx="15"></rect>
|
||||
<path d="M7,20.3784787 C7.23887844,20.4052125 7.50505328,20.4185791 7.79853251,20.4185791 C9.33417962,20.4185791 10.7025913,19.9574295 11.9038086,19.0351165 C11.1871733,19.0217496 10.5456237,18.8062123 9.97914051,18.3884981 C9.41265735,17.9707839 9.02363258,17.4377885 8.81205454,16.789496 C9.03728278,16.8229132 9.24544516,16.8396215 9.43654791,16.8396215 C9.73002714,16.8396215 10.0200895,16.8028632 10.3067436,16.7293455 C9.54233258,16.5756266 8.90931421,16.2030311 8.40766949,15.6115478 C7.90602476,15.0200644 7.65520616,14.3333525 7.65520616,13.5513915 L7.65520616,13.5112911 C8.11931284,13.7652614 8.61753755,13.9022696 9.14989521,13.9223199 C8.69943873,13.6282491 8.34112644,13.2439577 8.07494761,12.7694344 C7.80876877,12.294911 7.67568135,11.7802948 7.67568135,11.2255703 C7.67568135,10.6374287 7.82583126,10.0927375 8.12613559,9.59148039 C8.95197248,10.5873111 9.95695313,11.3842979 11.1411077,11.9824647 C12.3252622,12.5806315 13.5930052,12.913127 14.9443747,12.9799613 C14.8897739,12.725991 14.8624739,12.4787079 14.8624739,12.2381045 C14.8624739,11.3425252 15.184955,10.5789551 15.8299268,9.94737114 C16.4748986,9.31578722 17.2546543,9 18.1692175,9 C19.1247313,9 19.9300808,9.3408497 20.5852902,10.0225593 C21.3292259,9.88220734 22.028788,9.62155757 22.6839975,9.24060219 C22.4314688,10.0091964 21.9468941,10.6040125 21.2302588,11.0250685 C21.8649929,10.9582342 22.4997176,10.791151 23.1344517,10.5238139 C22.6771701,11.1787898 22.1243454,11.7368476 21.4759611,12.1980042 C21.4827862,12.2915721 21.4861987,12.431922 21.4861987,12.619058 C21.4861987,13.4879036 21.3565238,14.3550653 21.09717,15.2205692 C20.8378163,16.0860731 20.4436728,16.9164765 19.9147277,17.7118044 C19.3857826,18.5071323 18.7561767,19.2105525 18.0258912,19.8220862 C17.2956056,20.4336198 16.4151812,20.9215027 15.3845913,21.2857495 C14.3540015,21.6499963 13.2517646,21.832117 12.0778477,21.832117 C10.2282461,21.832117 8.53564712,21.3475758 7,20.3784787 L7,20.3784787 Z" id="twitter" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
16
public/assets/img/reddit.svg
Normal file
16
public/assets/img/reddit.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-961.000000, -918.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<path d="M156.004898,15.1197594 C155.976483,14.3425491 155.494238,13.6545068 154.773348,13.3626486 C154.052458,13.0707904 153.227378,13.229551 152.666271,13.7680886 C151.12864,12.7228617 149.321161,12.1454075 147.462339,12.1055335 L148.340925,7.88832069 L151.2335,8.49657254 C151.304534,9.15687714 151.844729,9.66775963 152.507966,9.70188281 C153.171203,9.73600599 153.760976,9.2832597 153.8994,8.6337316 C154.037824,7.98420349 153.683886,7.33033854 153.064365,7.09108696 C152.444844,6.85183538 151.743293,7.09808364 151.409217,7.67205337 L148.097624,7.00973469 C147.988226,6.98573517 147.873773,7.00653061 147.77981,7.06747975 C147.685847,7.1284289 147.620195,7.22445834 147.597506,7.33413567 L146.597269,12.0244333 C144.715584,12.0528011 142.883246,12.6306923 141.325753,13.6869883 C140.756347,13.1512356 139.924346,13.0021476 139.204337,13.3068472 C138.484329,13.6115468 138.012088,14.3125756 138.000228,15.0943133 C137.988369,15.876051 138.439129,16.5910818 139.149563,16.9174815 C139.134345,17.1154345 139.134345,17.3142637 139.149563,17.5122166 C139.149563,20.5399592 142.677424,23 147.029804,23 C151.382184,23 154.910045,20.5399592 154.910045,17.5122166 C154.925264,17.3142637 154.925264,17.1154345 154.910045,16.9174815 C155.590785,16.5791323 156.016659,15.8798572 156.004898,15.1197594 Z M142.48819,16.4714301 C142.48819,15.724923 143.093354,15.1197594 143.839861,15.1197594 C144.586368,15.1197594 145.191532,15.724923 145.191532,16.4714301 C145.191532,17.2179373 144.586368,17.8231009 143.839861,17.8231009 C143.481376,17.8231009 143.137573,17.6806932 142.884086,17.4272057 C142.630598,17.1737183 142.48819,16.8299155 142.48819,16.4714301 Z M150.341398,20.1885248 C149.382418,20.9112013 148.202534,21.2790195 147.002771,21.2293113 C145.803007,21.2790195 144.623123,20.9112013 143.664144,20.1885248 C143.54506,20.0434288 143.555461,19.831664 143.688189,19.6989354 C143.820918,19.5662068 144.032683,19.5558062 144.177779,19.6748899 C144.990443,20.2709755 145.982418,20.5714295 146.989254,20.5264425 C147.997329,20.581264 148.993925,20.2903914 149.814246,19.7019233 C149.910827,19.6077567 150.050309,19.5722686 150.18015,19.608827 C150.309991,19.6453854 150.410466,19.7484362 150.443726,19.8791612 C150.476986,20.0098862 150.437979,20.148425 150.341398,20.2425916 L150.341398,20.1885248 Z M150.098097,17.8771677 C149.35159,17.8771677 148.746426,17.2720041 148.746426,16.525497 C148.746426,15.7789898 149.35159,15.1738262 150.098097,15.1738262 C150.844604,15.1738262 151.449768,15.7789898 151.449768,16.525497 C151.464606,16.8956141 151.326902,17.2556033 151.06884,17.5213305 C150.810779,17.7870576 150.454973,17.935236 150.08458,17.9312346 L150.098097,17.8771677 Z" id="reddit"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
16
public/assets/img/tumblr.svg
Normal file
16
public/assets/img/tumblr.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-921.000000, -918.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<path d="M98,13.3195248 L98,11.139339 C98.6412999,10.9383992 99.1874537,10.6570877 99.6384778,10.2953961 C100.089502,9.92700647 100.45243,9.48494557 100.727273,8.9692001 C101.002116,8.44675665 101.192388,7.79036318 101.298097,7 L103.613108,7 L103.613108,10.8982124 L107.460888,10.8982124 L107.460888,13.3195248 L103.613108,13.3195248 L103.613108,17.2780189 C103.613108,18.188946 103.662438,18.7649647 103.761099,19.0060925 C103.852714,19.2539182 104.035939,19.454855 104.310782,19.6089088 C104.663145,19.8165466 105.075403,19.9203639 105.547569,19.9203639 C106.372097,19.9203639 107.189566,19.665844 108,19.1567966 L108,21.5881559 C107.28118,21.9096595 106.653984,22.127341 106.118393,22.2412069 C105.575755,22.3684688 104.966177,22.4320988 104.289641,22.4320988 C103.549679,22.4320988 102.894295,22.3416772 102.323467,22.1608314 C101.773782,21.9933816 101.287529,21.7422106 100.864693,21.407311 C100.455953,21.0657133 100.177591,20.714074 100.029598,20.3523823 C99.8745588,19.9906907 99.7970402,19.4515104 99.7970402,18.7348251 L99.7970402,13.3195248 L98,13.3195248 Z" id="tumblr"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
19
public/assets/img/twitter.svg
Normal file
19
public/assets/img/twitter.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Route-4---Expanded-Copy-2" transform="translate(-830.000000, -920.000000)" fill-rule="nonzero">
|
||||
<g id="Group-11" transform="translate(0.000000, 656.000000)">
|
||||
<g id="Group-10" transform="translate(761.000000, 194.000000)">
|
||||
<g id="Group-5">
|
||||
<g id="Group-7" transform="translate(62.000000, 61.000000)">
|
||||
<g id="twitter" transform="translate(6.000000, 7.000000)">
|
||||
<rect id="Rectangle" x="0" y="0" width="18" height="16"></rect>
|
||||
<path d="M1,14.0837077 C1.25368393,14.1120983 1.53635608,14.1262934 1.84802491,14.1262934 C3.47885019,14.1262934 4.93207493,13.6365622 6.20774271,12.6570849 C5.44669091,12.6428896 4.76537856,12.4139935 4.16378524,11.9703896 C3.56219191,11.5267858 3.1490557,10.9607558 2.92436422,10.2722827 C3.16355192,10.307771 3.38461604,10.3255149 3.58756318,10.3255149 C3.89923202,10.3255149 4.20727217,10.2864783 4.51169289,10.2084041 C3.6999043,10.0451579 3.02765196,9.64946919 2.4949157,9.02132618 C1.96217944,8.39318317 1.69581531,7.66390943 1.69581531,6.83348307 L1.69581531,6.79089732 C2.18868695,7.06060844 2.71779122,7.20610831 3.28314398,7.2274013 C2.80476857,6.91510421 2.42424838,6.50699481 2.14157199,6.00306087 C1.85889561,5.49912693 1.71755954,4.95261522 1.71755954,4.36350934 C1.71755954,3.73891516 1.87701562,3.16046446 2.19593256,2.62813987 C3.07295416,3.68569138 4.1402227,4.53207478 5.3977702,5.16731545 C6.6553177,5.80255612 8.00163438,6.15565947 9.43676063,6.22663608 C9.37877573,5.95692495 9.34978372,5.69431543 9.34978372,5.43879963 C9.34978372,4.48771304 9.69225189,3.67681741 10.3771985,3.00608844 C11.0621451,2.33535946 11.8902295,2 12.8614766,2 C13.8762123,2 14.7314768,2.36197529 15.4272956,3.08593673 C16.2173398,2.93688584 16.9602602,2.66008121 17.656079,2.25551452 C17.3878988,3.07174556 16.8732906,3.70342792 16.1122388,4.15058057 C16.7863132,4.07960396 17.4603775,3.9021651 18.134452,3.61825865 C17.6488285,4.31382944 17.0617402,4.90647526 16.3731695,5.39621388 C16.3804176,5.49558113 16.3840416,5.64462978 16.3840416,5.84336429 C16.3840416,6.76606024 16.2463295,7.68696796 15.9709013,8.60611508 C15.695473,9.5252622 15.2769008,10.4071334 14.7151721,11.251755 C14.1534434,12.0963767 13.484815,12.8433943 12.709267,13.4928303 C11.933719,14.1422663 10.9987265,14.6603878 9.90426154,15.0472104 C8.80979657,15.4340329 7.63924398,15.6274413 6.39256865,15.6274413 C4.42833019,15.6274413 2.63082529,15.1128685 1,14.0837077 L1,14.0837077 Z" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -15,6 +15,7 @@ module.exports = (helmet, html, preloadedState) => {
|
|||
<link rel="stylesheet" href="/bundle/style.css" type="text/css">
|
||||
<!--google font-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-app">${html}</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue