fixed button css
This commit is contained in:
bill bittner
parent
1e9e9e4344
commit
dbcf4e4c46
7 changed files with 56 additions and 48 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue