css destroying
This commit is contained in:
Jeremy Kauffman
parent
33cf063fbb
commit
44b5c27ef5
12 changed files with 123 additions and 267 deletions
|
|
@ -31,7 +31,6 @@
|
|||
@import '~space-between/_space-between';
|
||||
@import '~space-around/_space-around';
|
||||
@import '~row/_row';
|
||||
@import '~vertical-split/_vertical-split';
|
||||
@import '~tooltip/_tooltip';
|
||||
@import '~social-share-link/_social-share-link';
|
||||
|
||||
|
|
|
|||
|
|
@ -5,23 +5,12 @@
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
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;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.asset-title {
|
||||
color: #2E2F31;
|
||||
font-size: $text-x-large;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0;
|
||||
margin-top: $primary-padding;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
padding: 0 $tertiary-padding;
|
||||
}
|
||||
padding-top: $secondary-padding;
|
||||
}
|
||||
|
||||
.asset-image, .asset-video {
|
||||
|
|
@ -31,6 +20,7 @@
|
|||
margin-right: auto;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
background: black;
|
||||
}
|
||||
|
||||
/*below must die if this is intended to be shareable component! it also probably doesn't need to be*/
|
||||
|
|
@ -60,6 +50,59 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.vertical-split, .visible-content {
|
||||
flex : 1 0 auto;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: space-between;
|
||||
align-items : center;
|
||||
};
|
||||
|
||||
.collapse-content {
|
||||
flex-grow: 0;
|
||||
@media (max-width: $break-point-tablet) {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-content.closed{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
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: $primary-color;
|
||||
&.plus-icon {
|
||||
transform: rotate(0);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.plus-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.asset-info {
|
||||
$asset-info-width: 1000px;
|
||||
max-width: $asset-info-width;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
word-wrap: break-word;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.nav-bar {
|
||||
margin-top: $thin-padding;
|
||||
margin-left: $primary-padding;
|
||||
margin-right: $primary-padding;
|
||||
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
.nav-bar-link {
|
||||
padding: calc(1em - 2px);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-size: $text-medium;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
.page-layout .content { margin: $thin-padding; }
|
||||
.page-layout .content { margin: $tertiary-padding; }
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-mobile) {
|
||||
|
|
|
|||
|
|
@ -57,97 +57,3 @@ h3 {
|
|||
.text--success {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-x-large ) {
|
||||
h1 {
|
||||
font-size: $text-x-large;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $text-large;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $text-medium;
|
||||
}
|
||||
|
||||
p, body, button, input, textarea, label, select, option {
|
||||
font-size: $text-medium;
|
||||
}
|
||||
|
||||
.text--extra-large {
|
||||
font-size: $text-x-large;
|
||||
}
|
||||
|
||||
.text--large {
|
||||
font-size: $text-medium;
|
||||
}
|
||||
|
||||
.text--medium {
|
||||
font-size: $text-small;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
|
||||
h1 {
|
||||
font-size: $text-large;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $text-medium;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $text-small;
|
||||
}
|
||||
|
||||
p, body, button, input, textarea, label, select, option {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.text--extra-large {
|
||||
font-size: $text-large;
|
||||
}
|
||||
|
||||
.text--large {
|
||||
font-size: $text-medium;
|
||||
}
|
||||
|
||||
.text--small {
|
||||
font-size: $text-x-small;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-mobile) {
|
||||
|
||||
h1 {
|
||||
font-size: $text-medium;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $text-small;
|
||||
}
|
||||
|
||||
p, body, button, input, textarea, label, select, option {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.text--extra-large {
|
||||
font-size: $text-x-small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text--large {
|
||||
font-size: $text-x-small;
|
||||
}
|
||||
|
||||
.text--medium {
|
||||
font-size: $text-x-small;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ $input-padding: 0.3em;
|
|||
$input-full-width: calc(100% - 0.6em);
|
||||
|
||||
$text-xx-large: 2.5em;
|
||||
$text-x-large: x-large;
|
||||
$text-large: large;
|
||||
$text-medium: medium;
|
||||
$text-small: small;
|
||||
$text-x-small: small;
|
||||
$text-x-large: 2.0em;
|
||||
$text-large: 1.5em;
|
||||
$text-medium: 1.0em;
|
||||
$text-small: 0.9em;
|
||||
$text-x-small: 0.8em;
|
||||
|
||||
$break-point-xx-large: 1400px;
|
||||
$break-point-x-large: 1290px;
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
.vertical-split, .visible-content {
|
||||
flex : 1 0 auto;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: space-between;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-content.closed{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
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: $primary-color;
|
||||
&.plus-icon {
|
||||
transform: rotate(0);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.plus-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
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.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'));
|
||||
}
|
||||
|
||||
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,6 +1,5 @@
|
|||
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';
|
||||
import createCanonicalLink from '../../../../utils/createCanonicalLink';
|
||||
|
|
@ -56,42 +55,37 @@ class AssetDisplay extends React.Component {
|
|||
}
|
||||
const sourceUrl = `${createCanonicalLink({ asset: asset.claimData })}.${fileExt}?${outpoint}`;
|
||||
return (
|
||||
<div className={'asset-display-wrap'}>
|
||||
<div className={'asset-display'}>
|
||||
<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) &&
|
||||
<AvailableContent
|
||||
contentType={contentType}
|
||||
sourceUrl={sourceUrl}
|
||||
name={name}
|
||||
thumbnail={thumbnail}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className={'asset-display'}>
|
||||
{(status === LOCAL_CHECK) &&
|
||||
<div>
|
||||
<p>Checking to see if Spee.ch has your asset locally...</p>
|
||||
</div>
|
||||
<AssetTitle />
|
||||
}
|
||||
{(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) &&
|
||||
<AvailableContent
|
||||
contentType={contentType}
|
||||
sourceUrl={sourceUrl}
|
||||
name={name}
|
||||
thumbnail={thumbnail}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@ import React from 'react';
|
|||
|
||||
const AssetTitle = ({ title }) => {
|
||||
return (
|
||||
<div className='asset-title-wrap'>
|
||||
<h3 className='asset-title'>{title}</h3>
|
||||
</div>
|
||||
<h1 className='asset-title'>{title}</h1>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,31 @@
|
|||
import React from 'react';
|
||||
import PageLayout from '@components/PageLayout';
|
||||
import VerticalCollapsibleSplit from '@components/VerticalCollapsibleSplit';
|
||||
import * as Icon from 'react-feather';
|
||||
import AssetDisplay from '@containers/AssetDisplay';
|
||||
import AssetInfo from '@containers/AssetInfo';
|
||||
import ErrorPage from '@pages/ErrorPage';
|
||||
|
||||
/*
|
||||
|
||||
<VerticalCollapsibleSplit
|
||||
name={'asset-display-collapse'}
|
||||
top={}
|
||||
bottom={<AssetInfo />}
|
||||
/>
|
||||
|
||||
*/
|
||||
import AssetTitle from '@containers/AssetTitle';
|
||||
|
||||
class ShowAssetDetails extends React.Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.collapse = this.collapse.bind(this);
|
||||
// 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'));
|
||||
}
|
||||
|
||||
render () {
|
||||
const { asset } = this.props;
|
||||
if (asset) {
|
||||
|
|
@ -25,7 +36,11 @@ class ShowAssetDetails extends React.Component {
|
|||
asset={asset}
|
||||
>
|
||||
<AssetDisplay />
|
||||
|
||||
<AssetTitle />
|
||||
<button className='collapse-button' onClick={this.collapse}>
|
||||
{this.state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
|
||||
</button>
|
||||
{ !this.state.closed && <AssetInfo /> }
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue