LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Packages Projects Releases 4 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;
}
.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{
margin: 0px;
width: calc(100% - 2px);

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

@ -28,29 +28,30 @@ class AssetInfo extends React.Component {
}
}
render () {
const { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host, shortId } = this.props;
return (
<div>
{this.props.channelName &&
{channelName &&
<div className="row row--padded row--wide row--no-top">
<div className="column column--2 column--med-10">
<span className="text">Channel:</span>
</div>
<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>
}
{this.props.description &&
{description &&
<div className="row row--padded row--wide row--no-top">
<span className="text">{this.props.description}</span>
<span className="text">{description}</span>
</div>
}
<div className="row row--padded row--wide row--no-top">
<div id="show-short-link">
<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>
</div>
<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>
<input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
spellCheck="false"
value={`${this.props.host}/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}
value={`${host}/${shortId}/${name}.${fileExt}`}
onClick={this.select}/>
</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="column column--7">
<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
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
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>
@ -110,13 +111,13 @@ class AssetInfo extends React.Component {
<div
className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
<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"
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"
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"
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>
@ -129,21 +130,21 @@ class AssetInfo extends React.Component {
<div className="column column--2 column--med-10">
<span className="text">Claim Name:</span>
</div><div className="column column--8 column--med-10">
{this.props.name}
{name}
</div>
</div>
<div>
<div className="column column--2 column--med-10">
<span className="text">Claim Id:</span>
</div><div className="column column--8 column--med-10">
{this.props.claimId}
{claimId}
</div>
</div>
<div>
<div className="column column--2 column--med-10">
<span className="text">File Type:</span>
</div><div className="column column--8 column--med-10">
{this.props.contentType ? `${this.props.contentType}` : 'unknown'}
{contentType ? `${contentType}` : 'unknown'}
</div>
</div>
</div>
@ -155,7 +156,7 @@ class AssetInfo extends React.Component {
</div>
}
<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>
);

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

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

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

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

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

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

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

@ -69,10 +69,10 @@ class ChannelClaimsDisplay extends React.Component {
/>)}
<div>
{(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) &&
<button className={'button--primary'} onClick={this.showNextResultsPage}>Next Page</button>
<button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button>
}
</div>
</div>

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

@ -65,7 +65,7 @@ class PublishMetadataInputs extends React.Component {
</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>
);
}