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

fixed button css

Browse source
This commit is contained in:
bill bittner 2018-02-06 22:54:06 -08:00
parent 1e9e9e4344
commit dbcf4e4c46
7 changed files with 56 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/assets/css/general.css
View file

@ -427,6 +427,20 @@ button {
background-color: white; background-color: white;
} }
.button--secondary {
border: 0px;
border-bottom: 1px solid black;
padding: 0.5em;
margin: 0.5em 0.3em 0.5em 0.3em;
color: black;
background-color: white;
}
.button--secondary:hover {
border-bottom: 1px solid #9b9b9b;
color: #4156C5;
}
.button--large{ .button--large{
margin: 0px; margin: 0px;
width: calc(100% - 2px); width: calc(100% - 2px);

35
react/components/AssetInfo/index.js
View file

@ -28,29 +28,30 @@ class AssetInfo extends React.Component {
} }
} }
render () { render () {
const { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host, shortId } = this.props;
return ( return (
<div> <div>
{this.props.channelName && {channelName &&
<div className="row row--padded row--wide row--no-top"> <div className="row row--padded row--wide row--no-top">
<div className="column column--2 column--med-10"> <div className="column column--2 column--med-10">
<span className="text">Channel:</span> <span className="text">Channel:</span>
</div> </div>
<div className="column column--8 column--med-10"> <div className="column column--8 column--med-10">
<span className="text"><a href={`/${this.props.channelName}:${this.props.certificateId}`}>{this.props.channelName}</a></span> <span className="text"><a href={`/${channelName}:${certificateId}`}>{channelName}</a></span>
</div> </div>
</div> </div>
} }
{this.props.description && {description &&
<div className="row row--padded row--wide row--no-top"> <div className="row row--padded row--wide row--no-top">
<span className="text">{this.props.description}</span> <span className="text">{description}</span>
</div> </div>
} }
<div className="row row--padded row--wide row--no-top"> <div className="row row--padded row--wide row--no-top">
<div id="show-short-link"> <div id="show-short-link">
<div className="column column--2 column--med-10"> <div className="column column--2 column--med-10">
<Link className="link--primary" to={`/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}><span <Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
className="text">Link:</span></Link> className="text">Link:</span></Link>
</div> </div>
<div className="column column--8 column--med-10"> <div className="column column--8 column--med-10">
@ -59,7 +60,7 @@ class AssetInfo extends React.Component {
<div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div> <div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
<input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly <input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
spellCheck="false" spellCheck="false"
value={`${this.props.host}/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`} value={`${host}/${shortId}/${name}.${fileExt}`}
onClick={this.select}/> onClick={this.select}/>
</div> </div>
<div className="column column--1"> </div> <div className="column column--1"> </div>
@ -79,14 +80,14 @@ class AssetInfo extends React.Component {
<div className="row row--short row--wide"> <div className="row row--short row--wide">
<div className="column column--7"> <div className="column column--7">
<div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div> <div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
{(this.props.contentType === 'video/mp4') ? ( {(contentType === 'video/mp4') ? (
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
onClick={this.select} spellCheck="false" onClick={this.select} spellCheck="false"
value={`<video width="100%" controls poster="${this.props.thumbnail}" src="${this.props.host}/${this.props.claimId}/${this.props.name}.${this.props.fileExt}"/></video>`}/> value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
) : ( ) : (
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
onClick={this.select} spellCheck="false" onClick={this.select} spellCheck="false"
value={`<img src="${this.props.host}/${this.props.claimId}/${this.props.name}.${this.props.fileExt}"/>`} value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
/> />
)} )}
</div> </div>
@ -110,13 +111,13 @@ class AssetInfo extends React.Component {
<div <div
className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap"> className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
<a className="link--primary" target="_blank" <a className="link--primary" target="_blank"
href={`https://twitter.com/intent/tweet?text=${this.props.host}/${this.props.shortId}/${this.props.name}`}>twitter</a> href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
<a className="link--primary" target="_blank" <a className="link--primary" target="_blank"
href={`https://www.facebook.com/sharer/sharer.php?u=${this.props.host}/${this.props.shortId}/${this.props.name}`}>facebook</a> href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
<a className="link--primary" target="_blank" <a className="link--primary" target="_blank"
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${this.props.host}/${this.props.shortId}/${this.props.name}`}>tumblr</a> href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
<a className="link--primary" target="_blank" <a className="link--primary" target="_blank"
href={`https://www.reddit.com/submit?url=${this.props.host}/${this.props.shortId}/${this.props.name}&title=${this.props.name}`}>reddit</a> href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
</div> </div>
</div> </div>
</div> </div>
@ -129,21 +130,21 @@ class AssetInfo extends React.Component {
<div className="column column--2 column--med-10"> <div className="column column--2 column--med-10">
<span className="text">Claim Name:</span> <span className="text">Claim Name:</span>
</div><div className="column column--8 column--med-10"> </div><div className="column column--8 column--med-10">
{this.props.name} {name}
</div> </div>
</div> </div>
<div> <div>
<div className="column column--2 column--med-10"> <div className="column column--2 column--med-10">
<span className="text">Claim Id:</span> <span className="text">Claim Id:</span>
</div><div className="column column--8 column--med-10"> </div><div className="column column--8 column--med-10">
{this.props.claimId} {claimId}
</div> </div>
</div> </div>
<div> <div>
<div className="column column--2 column--med-10"> <div className="column column--2 column--med-10">
<span className="text">File Type:</span> <span className="text">File Type:</span>
</div><div className="column column--8 column--med-10"> </div><div className="column column--8 column--med-10">
{this.props.contentType ? `${this.props.contentType}` : 'unknown'} {contentType ? `${contentType}` : 'unknown'}
</div> </div>
</div> </div>
</div> </div>
@ -155,7 +156,7 @@ class AssetInfo extends React.Component {
</div> </div>
} }
<div className="row row--wide"> <div className="row row--wide">
<button className="button--primary" onClick={this.toggleDetails}>{this.state.showDetails ? '[less]' : '[more]'}</button> <button className="button--secondary" onClick={this.toggleDetails}>{this.state.showDetails ? 'less' : 'more'}</button>
</div> </div>
</div> </div>
); );

3
react/components/ErrorPage/index.js
View file

@ -3,11 +3,12 @@ import NavBar from 'containers/NavBar';
class ErrorPage extends React.Component { class ErrorPage extends React.Component {
render () { render () {
const { error } = this.props;
return ( return (
<div> <div>
<NavBar/> <NavBar/>
<div className="row row--padded"> <div className="row row--padded">
<p>{this.props.error}</p> <p>{error}</p>
</div> </div>
</div> </div>
); );

30
react/components/ShowAssetDetails/index.js
View file

@ -6,22 +6,20 @@ import AssetDisplay from 'containers/AssetDisplay';
import AssetInfo from 'components/AssetInfo'; import AssetInfo from 'components/AssetInfo';
class ShowAssetDetails extends React.Component { class ShowAssetDetails extends React.Component {
componentDidMount () {
console.log('ShowAssetDetails props', this.props);
}
render () { render () {
const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props;
return ( return (
<div> <div>
<NavBar/> <NavBar/>
{this.props.error && {error &&
<div className="row row--padded"> <div className="row row--padded">
<p>{this.props.error}</p> <p>{error}</p>
</div> </div>
} }
{this.props.claimData && {this.props.claimData &&
<div className="row row--tall row--padded"> <div className="row row--tall row--padded">
<div className="column column--10"> <div className="column column--10">
<AssetTitle title={this.props.claimData.title}/> <AssetTitle title={title}/>
</div> </div>
<div className="column column--5 column--sml-10 align-content-top"> <div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded"> <div className="row row--padded">
@ -30,16 +28,16 @@ class ShowAssetDetails extends React.Component {
</div><div className="column column--5 column--sml-10 align-content-top"> </div><div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded"> <div className="row row--padded">
<AssetInfo <AssetInfo
channelName={this.props.claimData.channelName} channelName={channelName}
certificateId={this.props.claimData.certificateId} certificateId={certificateId}
description={this.props.claimData.description} description={description}
name={this.props.claimData.name} name={name}
claimId={this.props.claimData.claimId} claimId={claimId}
fileExt={this.props.claimData.fileExt} fileExt={fileExt}
contentType={this.props.claimData.contentType} contentType={contentType}
thumbnail={this.props.claimData.thumbnail} thumbnail={thumbnail}
host={this.props.claimData.host} host={host}
shortId={this.props.shortId} shortId={shortId}
/> />
</div> </div>
</div> </div>

16
react/components/ShowAssetLite/index.js
View file

@ -5,22 +5,16 @@ import AssetDisplay from 'containers/AssetDisplay';
class ShowLite extends React.Component { class ShowLite extends React.Component {
render () { render () {
const { error, claimData: { name, claimId } } = this.props;
return ( return (
<div className="row row--tall flex-container--column flex-container--center-center"> <div className="row row--tall flex-container--column flex-container--center-center">
{this.props.error && {error &&
<p>{this.props.error}</p> <p>{error}</p>
} }
{this.props.claimData && {this.props.claimData &&
<div> <div>
<AssetDisplay <AssetDisplay />
name={this.props.claimData.name} <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${claimId}/${name}`}>hosted via Spee.ch</Link>
claimId={this.props.claimData.claimId}
src={`/${this.props.claimData.claimId}/${this.props.claimData.name}.${this.props.claimData.fileExt}`}
contentType={this.props.claimData.contentType}
fileExt={this.props.claimData.fileExt}
thumbnail={this.props.claimData.thumbnail}
/>
<Link id="asset-boilerpate" className="link--primary fine-print" to={`/${this.props.claimData.claimId}/${this.props.claimData.name}`}>hosted via Spee.ch</Link>
</div> </div>
} }
</div> </div>

4
react/containers/ChannelClaimsDisplay/view.jsx
View file

@ -69,10 +69,10 @@ class ChannelClaimsDisplay extends React.Component {
/>)} />)}
<div> <div>
{(this.props.currentPage > 1) && {(this.props.currentPage > 1) &&
<button className={'button--primary'} onClick={this.showPreviousResultsPage}>Previous Page</button> <button className={'button--secondary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
} }
{(this.props.currentPage < this.props.totalPages) && {(this.props.currentPage < this.props.totalPages) &&
<button className={'button--primary'} onClick={this.showNextResultsPage}>Next Page</button> <button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button>
} }
</div> </div>
</div> </div>

2
react/containers/PublishMetadataInputs/view.jsx
View file

@ -65,7 +65,7 @@ class PublishMetadataInputs extends React.Component {
</div> </div>
</div> </div>
)} )}
<a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.props.showMetadataInputs ? '[less]' : '[more]'}</a> <button className="button--secondary" onClick={this.toggleShowInputs}>{this.props.showMetadataInputs ? 'less' : 'more'}</button>
</div> </div>
); );
} }