mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-23 17:47:24 +00:00
settings UI, clean up
This commit is contained in:
Jeremy Kauffman
parent
8cf9395ea8
commit
3a6e1529d8
10 changed files with 527 additions and 552 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,3 +1,5 @@
|
||||||
dist/css/*
|
dist/css/*
|
||||||
dist/js/*
|
dist/js/*
|
||||||
|
node_modules
|
||||||
.sass-cache
|
.sass-cache
|
||||||
|
.idea
|
||||||
|
|
|
||||||
7
dist/index.html
vendored
7
dist/index.html
vendored
|
|
@ -22,6 +22,11 @@
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
|
||||||
<script src="./js/lbry.js"></script>
|
<script src="./js/lbry.js"></script>
|
||||||
<script src="./js/gui.js"></script>
|
<script src="./js/component/common.js"></script>
|
||||||
|
<script src="./js/component/splash.js"></script>
|
||||||
|
<script src="./js/page/home.js"></script>
|
||||||
|
<script src="./js/page/settings.js"></script>
|
||||||
|
<script src="./js/app.js"></script>
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
36
js/app.js
Normal file
36
js/app.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
var appStyles = {
|
||||||
|
width: '800px',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginRight: 'auto',
|
||||||
|
};
|
||||||
|
var App = React.createClass({
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
viewingPage: window.location.search === '?settings' ? 'settings' : 'home'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
componentDidMount: function() {
|
||||||
|
lbry.getStartNotice(function(notice) {
|
||||||
|
if (notice) {
|
||||||
|
alert(notice);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setPage: function(page) {
|
||||||
|
this.setState({
|
||||||
|
viewingPage: page
|
||||||
|
});
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
if (this.state.viewingPage == 'home') {
|
||||||
|
var content = <HomePage setPage={this.setPage}/>;
|
||||||
|
} else if (this.state.viewingPage == 'settings') {
|
||||||
|
var content = <SettingsPage closeCallback={this.setPage.bind(this, 'home')} setPage={this.setPage} />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div style={appStyles}>
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
47
js/component/common.js
Normal file
47
js/component/common.js
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
//component/icon.js
|
||||||
|
|
||||||
|
var Icon = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
var className = 'icon ' + this.props.icon;
|
||||||
|
return <span className={className}></span>
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var Link = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
console.log(this.props);
|
||||||
|
var href = this.props.href ? this.props.href : 'javascript:;',
|
||||||
|
icon = this.props.icon ? <Icon icon={this.props.icon} /> : '',
|
||||||
|
className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text');
|
||||||
|
return (
|
||||||
|
<a className={className} href={href} style={this.props.style ? this.props.style : {}} onClick={this.props.onClick}>
|
||||||
|
{this.props.icon ? icon : '' }
|
||||||
|
{this.props.label}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var creditAmountStyle = {
|
||||||
|
color: '#216C2A',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: '0.8em'
|
||||||
|
}, estimateStyle = {
|
||||||
|
marginLeft : '5px',
|
||||||
|
color: '#aaa',
|
||||||
|
};
|
||||||
|
|
||||||
|
var CreditAmount = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
amount: React.PropTypes.number,
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
var formattedAmount = lbry.formatCredits(this.props.amount);
|
||||||
|
return (
|
||||||
|
<span className="credit-amount">
|
||||||
|
<span style={creditAmountStyle}>{formattedAmount}</span>
|
||||||
|
{ this.props.isEstimate ? <span style={estimateStyle}>(est)</span> : null }
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
33
js/component/splash.js
Normal file
33
js/component/splash.js
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
var splashStyle = {
|
||||||
|
color: 'white',
|
||||||
|
backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
minHeight: '100vh',
|
||||||
|
minWidth: '100vw',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}, splashMessageStyle = {
|
||||||
|
marginTop: '24px'
|
||||||
|
};
|
||||||
|
|
||||||
|
var SplashScreen = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
message: React.PropTypes.string,
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
var imgSrc = lbry.imagePath('lbry-white-485x160.png');
|
||||||
|
return (
|
||||||
|
<div className="splash-screen" style={splashStyle}>
|
||||||
|
<img src={imgSrc} alt="LBRY"/>
|
||||||
|
<div style={splashMessageStyle}>
|
||||||
|
<h3>
|
||||||
|
{this.props.message}
|
||||||
|
<span className="busy-indicator"></span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
544
js/gui.js
544
js/gui.js
|
|
@ -1,545 +1,4 @@
|
||||||
//component/icon.js
|
|
||||||
|
|
||||||
var Icon = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
var className = 'icon ' + this.props.icon;
|
|
||||||
return <span className={className}></span>
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//component/link.js
|
|
||||||
|
|
||||||
var Link = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
console.log(this.props);
|
|
||||||
var href = this.props.href ? this.props.href : 'javascript:;',
|
|
||||||
icon = this.props.icon ? <Icon icon={this.props.icon} /> : '',
|
|
||||||
className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
|
|
||||||
(this.props.fadeIn ? ' fade-in-link' : '');
|
|
||||||
return (
|
|
||||||
<a className={className} href={href} style={this.props.style ? this.props.style : {}} onClick={this.props.onClick}>
|
|
||||||
{this.props.icon ? icon : '' }
|
|
||||||
{this.props.label}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
//component/splash.js
|
|
||||||
var splashStyle = {
|
|
||||||
color: 'white',
|
|
||||||
backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
minHeight: '100vh',
|
|
||||||
minWidth: '100vw',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
}, splashMessageStyle = {
|
|
||||||
marginTop: '24px'
|
|
||||||
};
|
|
||||||
|
|
||||||
var SplashScreen = React.createClass({
|
|
||||||
propTypes: {
|
|
||||||
message: React.PropTypes.string,
|
|
||||||
},
|
|
||||||
render: function() {
|
|
||||||
var imgSrc = lbry.imagePath('lbry-white-485x160.png');
|
|
||||||
return (
|
|
||||||
<div className="splash-screen" style={splashStyle}>
|
|
||||||
<img src={imgSrc} alt="LBRY"/>
|
|
||||||
<div style={splashMessageStyle}>
|
|
||||||
<h3>
|
|
||||||
{this.props.message}
|
|
||||||
<span className="busy-indicator"></span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//component/credit-amount.js
|
|
||||||
var creditAmountStyle = {
|
|
||||||
color: '#216C2A',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
fontSize: '0.8em'
|
|
||||||
}, estimateStyle = {
|
|
||||||
marginLeft : '5px',
|
|
||||||
color: '#aaa',
|
|
||||||
};
|
|
||||||
|
|
||||||
var CreditAmount = React.createClass({
|
|
||||||
propTypes: {
|
|
||||||
amount: React.PropTypes.number,
|
|
||||||
},
|
|
||||||
render: function() {
|
|
||||||
var formattedAmount = lbry.formatCredits(this.props.amount);
|
|
||||||
return (
|
|
||||||
<span className="credit-amount">
|
|
||||||
<span style={creditAmountStyle}>{formattedAmount}</span>
|
|
||||||
{ this.props.isEstimate ? <span style={estimateStyle}>(est)</span> : null }
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//component/header.js
|
|
||||||
var logoStyle = {
|
|
||||||
padding: '48px 12px',
|
|
||||||
textAlign: 'center',
|
|
||||||
maxHeight: '80px',
|
|
||||||
},
|
|
||||||
balanceStyle = {
|
|
||||||
// float: 'right',
|
|
||||||
marginTop: '3px'
|
|
||||||
},
|
|
||||||
imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled
|
|
||||||
height: '80px'
|
|
||||||
};
|
|
||||||
|
|
||||||
var Header = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<header>
|
|
||||||
<div style={logoStyle}>
|
|
||||||
<img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var topBarStyle = {
|
|
||||||
'float': 'right'
|
|
||||||
};
|
|
||||||
|
|
||||||
var TopBar = React.createClass({
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
balance: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
componentDidMount: function() {
|
|
||||||
lbry.getBalance(function(balance) {
|
|
||||||
this.setState({
|
|
||||||
balance: balance
|
|
||||||
});
|
|
||||||
}.bind(this));
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<span className='top-bar' style={topBarStyle}>
|
|
||||||
<span style={balanceStyle}>
|
|
||||||
<CreditAmount amount={this.state.balance}/>
|
|
||||||
</span>
|
|
||||||
<Menu onPageChosen={this.props.onPageChosen}/>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var menuStyle = {
|
|
||||||
position: 'relative',
|
|
||||||
top: '3px',
|
|
||||||
marginLeft: '2px'
|
|
||||||
}, menuItemStyle = {
|
|
||||||
marginLeft: '3px'
|
|
||||||
};
|
|
||||||
|
|
||||||
var chooseSettingsPage = function() {
|
|
||||||
this.props.onPageChosen('settings');
|
|
||||||
};
|
|
||||||
|
|
||||||
var Menu = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<span className='menu' style={menuStyle}>
|
|
||||||
<Link href='#' icon="icon-gear" fadeIn={true} style={menuItemStyle} onClick={chooseSettingsPage.bind(this)}/>
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
//component/discover.js
|
|
||||||
|
|
||||||
var searchInputStyle = {
|
|
||||||
width: '400px',
|
|
||||||
display: 'block',
|
|
||||||
marginBottom: '48px',
|
|
||||||
marginLeft: 'auto',
|
|
||||||
marginRight: 'auto'
|
|
||||||
},
|
|
||||||
fetchResultsStyle = {
|
|
||||||
color: '#888',
|
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: '1.2em'
|
|
||||||
};
|
|
||||||
|
|
||||||
var SearchActive = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<section style={fetchResultsStyle}>
|
|
||||||
Looking up the Dewey Decimals
|
|
||||||
<span className="busy-indicator"></span>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var searchNoResultsStyle = {
|
|
||||||
textAlign: 'center'
|
|
||||||
}, searchNoResultsMessageStyle = {
|
|
||||||
fontStyle: 'italic',
|
|
||||||
marginRight: '5px'
|
|
||||||
};
|
|
||||||
|
|
||||||
var SearchNoResults = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<section style={searchNoResultsStyle}>
|
|
||||||
<span style={searchNoResultsMessageStyle}>No one has checked anything in for {this.props.query} yet.</span>
|
|
||||||
<Link label="Be the first" href="javascript:alert('aww I do nothing')" />
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var SearchResults = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
var rows = [];
|
|
||||||
console.log('results');
|
|
||||||
console.log('made it here');
|
|
||||||
this.props.results.forEach(function(result) {
|
|
||||||
rows.push(
|
|
||||||
<SearchResultRow name={result.name} title={result.stream_name} imgUrl={result.thumbnail}
|
|
||||||
description={result.description} cost_est={result.cost_est} />
|
|
||||||
);
|
|
||||||
});
|
|
||||||
console.log(this.props.results);
|
|
||||||
console.log(rows);
|
|
||||||
console.log('done');
|
|
||||||
return (
|
|
||||||
<section>{rows}</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var searchRowImgStyle = {
|
|
||||||
maxHeight: '100px',
|
|
||||||
display: 'block',
|
|
||||||
marginLeft: 'auto',
|
|
||||||
marginRight: 'auto',
|
|
||||||
float: 'left'
|
|
||||||
},
|
|
||||||
searchRowCostStyle = {
|
|
||||||
float: 'right',
|
|
||||||
marginLeft: '20px',
|
|
||||||
marginTop: '5px',
|
|
||||||
display: 'inline-block'
|
|
||||||
},
|
|
||||||
searchRowNameStyle = {
|
|
||||||
fontSize: '0.9em',
|
|
||||||
color: '#666',
|
|
||||||
marginBottom: '24px',
|
|
||||||
clear: 'both'
|
|
||||||
},
|
|
||||||
searchRowDescriptionStyle = {
|
|
||||||
color : '#444',
|
|
||||||
marginBottom: '24px',
|
|
||||||
fontSize: '0.9em'
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
var SearchResultRow = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
var uri = 'lbry://' + this.props.name;
|
|
||||||
return (
|
|
||||||
<div className="row-fluid">
|
|
||||||
<div className="span3">
|
|
||||||
<img src={this.props.imgUrl} alt="Photo for {this.props.title}" style={searchRowImgStyle} />
|
|
||||||
</div>
|
|
||||||
<div className="span9">
|
|
||||||
<span style={searchRowCostStyle}>
|
|
||||||
<CreditAmount amount={this.props.cost_est} isEstimate={true}/>
|
|
||||||
</span>
|
|
||||||
<h2>{this.props.title}</h2>
|
|
||||||
<div style={searchRowNameStyle}>{uri}</div>
|
|
||||||
<p style={searchRowDescriptionStyle}>{this.props.description}</p>
|
|
||||||
<div>
|
|
||||||
<Link href={uri} label="Watch" icon="icon-play" button="primary" />
|
|
||||||
<Link href={uri} label="Download" icon="icon-download" button="alt" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
var discoverMainStyle = {
|
|
||||||
color: '#333'
|
|
||||||
};
|
|
||||||
|
|
||||||
var Discover = React.createClass({
|
|
||||||
userTypingTimer: null,
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
results: [],
|
|
||||||
searching: false,
|
|
||||||
query: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
search: function() {
|
|
||||||
if (this.state.query)
|
|
||||||
{
|
|
||||||
console.log('search');
|
|
||||||
lbry.search(this.state.query, this.searchCallback.bind(this, this.state.query));
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
this.setState({
|
|
||||||
searching: false,
|
|
||||||
results: []
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
searchCallback: function(originalQuery, results) {
|
|
||||||
if (this.state.searching) //could have canceled while results were pending, in which case nothing to do
|
|
||||||
{
|
|
||||||
this.setState({
|
|
||||||
results: results,
|
|
||||||
searching: this.state.query != originalQuery, //multiple searches can be out, we're only done if we receive one we actually care about
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onQueryChange: function(event) {
|
|
||||||
if (this.userTypingTimer)
|
|
||||||
{
|
|
||||||
clearTimeout(this.userTypingTimer);
|
|
||||||
}
|
|
||||||
|
|
||||||
//@TODO: Switch to React.js timing
|
|
||||||
this.userTypingTimer = setTimeout(this.search, 800); // 800ms delay, tweak for faster/slower
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
searching: event.target.value.length > 0,
|
|
||||||
query: event.target.value
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
console.log(this.state);
|
|
||||||
return (
|
|
||||||
<main style={discoverMainStyle}>
|
|
||||||
<section><input type="search" style={searchInputStyle} onChange={this.onQueryChange}
|
|
||||||
placeholder="Find movies, music, games, and more"/></section>
|
|
||||||
{ this.state.searching ? <SearchActive /> : null }
|
|
||||||
{ !this.state.searching && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
|
|
||||||
{ !this.state.searching && !this.state.results.length && this.state.query ? <SearchNoResults query={this.state.query} /> : null }
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var HomePage = React.createClass({
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Header />
|
|
||||||
<Discover />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var settingsPageStyles = {
|
|
||||||
paddingTop: '60px',
|
|
||||||
fontSize: '16px',
|
|
||||||
}, settingsPageHeaderStyles = {
|
|
||||||
textAlign: 'center'
|
|
||||||
}, settingsBottomButtonsStyles = {
|
|
||||||
textAlign: 'center'
|
|
||||||
}, settingsSectionStyles = {
|
|
||||||
paddingBottom: '15px',
|
|
||||||
}, settingsQuestionStyles = {
|
|
||||||
display: 'block',
|
|
||||||
}, maxDownloadQuestionStyles = {
|
|
||||||
display: 'block',
|
|
||||||
paddingTop: '3px'
|
|
||||||
}, maxUploadQuestionStyles = {
|
|
||||||
display: 'block'
|
|
||||||
}, settingsRadioOptionStyles = {
|
|
||||||
display: 'block',
|
|
||||||
marginLeft: '13px'
|
|
||||||
}, settingsCheckBoxOptionStyles = {
|
|
||||||
display: 'block',
|
|
||||||
marginLeft: '13px'
|
|
||||||
}, settingsNumberFieldStyles = {
|
|
||||||
width: '40px'
|
|
||||||
}, downloadDirectoryLabelStyles = {
|
|
||||||
fontSize: '.9em',
|
|
||||||
marginLeft: '13px'
|
|
||||||
}, downloadDirectoryFieldStyles= {
|
|
||||||
width: '300px'
|
|
||||||
};
|
|
||||||
|
|
||||||
var SettingsPage = React.createClass({
|
|
||||||
storeSetting: function(setting, val) {
|
|
||||||
var settings = Object.assign({}, this.state.settings);
|
|
||||||
settings[setting] = val;
|
|
||||||
this.setState({
|
|
||||||
'settings': settings
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onRunOnStartChange: function (event) {
|
|
||||||
this.storeSetting('run_on_startup', event.target.checked);
|
|
||||||
},
|
|
||||||
onShareDataChange: function (event) {
|
|
||||||
this.storeSetting('upload_log', event.target.checked);
|
|
||||||
},
|
|
||||||
onDownloadDirChange: function(event) {
|
|
||||||
this.storeSetting('default_download_directory', event.target.value);
|
|
||||||
},
|
|
||||||
onMaxUploadPrefChange: function(isLimited) {
|
|
||||||
if (!isLimited) {
|
|
||||||
this.storeSetting('max_upload', 0.0);
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
isMaxUpload: isLimited
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onMaxUploadFieldChange: function(event) {
|
|
||||||
this.storeSetting('max_upload', Number(event.target.value));
|
|
||||||
},
|
|
||||||
onMaxDownloadPrefChange: function(isLimited) {
|
|
||||||
if (!isLimited) {
|
|
||||||
this.storeSetting('max_download', 0.0);
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
isMaxDownload: isLimited
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onMaxDownloadFieldChange: function(event) {
|
|
||||||
this.storeSetting('max_download', Number(event.target.value));
|
|
||||||
},
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
settings: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
componentWillMount: function() {
|
|
||||||
lbry.getSettings(function(settings) {
|
|
||||||
this.setState({
|
|
||||||
settings: settings,
|
|
||||||
isMaxUpload: settings.max_upload != 0,
|
|
||||||
isMaxDownload: settings.max_download != 0
|
|
||||||
});
|
|
||||||
}.bind(this));
|
|
||||||
},
|
|
||||||
onDone: function() {
|
|
||||||
lbry.setSettings(this.state.settings);
|
|
||||||
this.props.closeCallback();
|
|
||||||
},
|
|
||||||
render: function() {
|
|
||||||
if (!this.state.settings) { // If the settings aren't loaded yet, don't render anything.
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={settingsPageStyles}>
|
|
||||||
<h1 style={settingsPageHeaderStyles}>Settings</h1>
|
|
||||||
<section style={settingsSectionStyles}>
|
|
||||||
<h4>Run on startup</h4>
|
|
||||||
<label style={settingsCheckBoxOptionStyles}>
|
|
||||||
<input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer
|
|
||||||
</label>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section style={settingsSectionStyles}>
|
|
||||||
<h4>Download directory</h4>
|
|
||||||
<span style={settingsQuestionStyles}>Where would you like the files you download from LBRY to be saved?</span>
|
|
||||||
<label htmlFor="default_download_directory" style={downloadDirectoryLabelStyles}>Download directory </label><input style={downloadDirectoryFieldStyles} type="text" name="default_download_directory" defaultValue={this.state.settings.default_download_directory} onChange={this.onDownloadDirChange}/>
|
|
||||||
</section>
|
|
||||||
<section style={settingsSectionStyles}>
|
|
||||||
<h4>Share diagnostic data</h4>
|
|
||||||
<label style={settingsCheckBoxOptionStyles}>
|
|
||||||
<input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
|
|
||||||
</label>
|
|
||||||
</section>
|
|
||||||
<section style={settingsSectionStyles}>
|
|
||||||
<h4>Bandwidth limits</h4>
|
|
||||||
<span style={maxUploadQuestionStyles}>How much of your upload bandwidth may LBRY use?</span>
|
|
||||||
<label style={settingsRadioOptionStyles}>
|
|
||||||
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
|
|
||||||
</label>
|
|
||||||
<label style={settingsRadioOptionStyles}>
|
|
||||||
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
|
|
||||||
<span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
|
|
||||||
</label>
|
|
||||||
<span style={maxDownloadQuestionStyles}>How much of your download bandwidth may LBRY use?</span>
|
|
||||||
<label style={settingsRadioOptionStyles}>
|
|
||||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
|
|
||||||
</label>
|
|
||||||
<label style={settingsRadioOptionStyles}>
|
|
||||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
|
|
||||||
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
|
|
||||||
</label>
|
|
||||||
</section>
|
|
||||||
<div style={settingsBottomButtonsStyles}>
|
|
||||||
<Link href="#" onClick={this.onDone} label="Done" button="primary" icon="icon-check"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
var appStyles = {
|
|
||||||
width: '800px',
|
|
||||||
marginLeft: 'auto',
|
|
||||||
marginRight: 'auto',
|
|
||||||
};
|
|
||||||
var App = React.createClass({
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
viewingPage: 'home'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
componentDidMount: function() {
|
|
||||||
lbry.getStartNotice(function(notice) {
|
|
||||||
if (notice) {
|
|
||||||
alert(notice);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handlePageChosen: function(page) {
|
|
||||||
this.setState({
|
|
||||||
viewingPage: page
|
|
||||||
});
|
|
||||||
},
|
|
||||||
render: function() {
|
|
||||||
if (this.state.viewingPage == 'home') {
|
|
||||||
var content = <HomePage/>;
|
|
||||||
} else if (this.state.viewingPage == 'settings') {
|
|
||||||
var content = <SettingsPage closeCallback={this.handlePageChosen.bind(this, 'home')}/>;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div style={appStyles}>
|
|
||||||
<TopBar onPageChosen={this.handlePageChosen}/>
|
|
||||||
{content}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//main.js
|
//main.js
|
||||||
var init = function() {
|
var init = function() {
|
||||||
|
|
@ -555,5 +14,4 @@ var init = function() {
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
248
js/page/home.js
Normal file
248
js/page/home.js
Normal file
|
|
@ -0,0 +1,248 @@
|
||||||
|
var searchInputStyle = {
|
||||||
|
width: '400px',
|
||||||
|
display: 'block',
|
||||||
|
marginBottom: '48px',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginRight: 'auto'
|
||||||
|
},
|
||||||
|
fetchResultsStyle = {
|
||||||
|
color: '#888',
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: '1.2em'
|
||||||
|
};
|
||||||
|
|
||||||
|
var SearchActive = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<section style={fetchResultsStyle}>
|
||||||
|
Looking up the Dewey Decimals
|
||||||
|
<span className="busy-indicator"></span>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var searchNoResultsStyle = {
|
||||||
|
textAlign: 'center'
|
||||||
|
}, searchNoResultsMessageStyle = {
|
||||||
|
fontStyle: 'italic',
|
||||||
|
marginRight: '5px'
|
||||||
|
};
|
||||||
|
|
||||||
|
var SearchNoResults = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<section style={searchNoResultsStyle}>
|
||||||
|
<span style={searchNoResultsMessageStyle}>No one has checked anything in for {this.props.query} yet.</span>
|
||||||
|
<Link label="Be the first" href="javascript:alert('aww I do nothing')" />
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var SearchResults = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
var rows = [];
|
||||||
|
console.log('results');
|
||||||
|
console.log('made it here');
|
||||||
|
this.props.results.forEach(function(result) {
|
||||||
|
rows.push(
|
||||||
|
<SearchResultRow name={result.name} title={result.stream_name} imgUrl={result.thumbnail}
|
||||||
|
description={result.description} cost_est={result.cost_est} />
|
||||||
|
);
|
||||||
|
});
|
||||||
|
console.log(this.props.results);
|
||||||
|
console.log(rows);
|
||||||
|
console.log('done');
|
||||||
|
return (
|
||||||
|
<section>{rows}</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var searchRowImgStyle = {
|
||||||
|
maxHeight: '100px',
|
||||||
|
display: 'block',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginRight: 'auto',
|
||||||
|
float: 'left'
|
||||||
|
},
|
||||||
|
searchRowCostStyle = {
|
||||||
|
float: 'right',
|
||||||
|
marginLeft: '20px',
|
||||||
|
marginTop: '5px',
|
||||||
|
display: 'inline-block'
|
||||||
|
},
|
||||||
|
searchRowNameStyle = {
|
||||||
|
fontSize: '0.9em',
|
||||||
|
color: '#666',
|
||||||
|
marginBottom: '24px',
|
||||||
|
clear: 'both'
|
||||||
|
},
|
||||||
|
searchRowDescriptionStyle = {
|
||||||
|
color : '#444',
|
||||||
|
marginBottom: '24px',
|
||||||
|
fontSize: '0.9em'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var SearchResultRow = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
var uri = 'lbry://' + this.props.name;
|
||||||
|
return (
|
||||||
|
<div className="row-fluid">
|
||||||
|
<div className="span3">
|
||||||
|
<img src={this.props.imgUrl} alt="Photo for {this.props.title}" style={searchRowImgStyle} />
|
||||||
|
</div>
|
||||||
|
<div className="span9">
|
||||||
|
<span style={searchRowCostStyle}>
|
||||||
|
<CreditAmount amount={this.props.cost_est} isEstimate={true}/>
|
||||||
|
</span>
|
||||||
|
<h2>{this.props.title}</h2>
|
||||||
|
<div style={searchRowNameStyle}>{uri}</div>
|
||||||
|
<p style={searchRowDescriptionStyle}>{this.props.description}</p>
|
||||||
|
<div>
|
||||||
|
<Link href={uri} label="Watch" icon="icon-play" button="primary" />
|
||||||
|
<Link href={uri} label="Download" icon="icon-download" button="alt" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var discoverMainStyle = {
|
||||||
|
color: '#333'
|
||||||
|
};
|
||||||
|
|
||||||
|
var Discover = React.createClass({
|
||||||
|
userTypingTimer: null,
|
||||||
|
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
results: [],
|
||||||
|
searching: false,
|
||||||
|
query: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
search: function() {
|
||||||
|
if (this.state.query)
|
||||||
|
{
|
||||||
|
console.log('search');
|
||||||
|
lbry.search(this.state.query, this.searchCallback.bind(this, this.state.query));
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.setState({
|
||||||
|
searching: false,
|
||||||
|
results: []
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
searchCallback: function(originalQuery, results) {
|
||||||
|
if (this.state.searching) //could have canceled while results were pending, in which case nothing to do
|
||||||
|
{
|
||||||
|
this.setState({
|
||||||
|
results: results,
|
||||||
|
searching: this.state.query != originalQuery, //multiple searches can be out, we're only done if we receive one we actually care about
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onQueryChange: function(event) {
|
||||||
|
if (this.userTypingTimer)
|
||||||
|
{
|
||||||
|
clearTimeout(this.userTypingTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
//@TODO: Switch to React.js timing
|
||||||
|
this.userTypingTimer = setTimeout(this.search, 800); // 800ms delay, tweak for faster/slower
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
searching: event.target.value.length > 0,
|
||||||
|
query: event.target.value
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
console.log(this.state);
|
||||||
|
return (
|
||||||
|
<main style={discoverMainStyle}>
|
||||||
|
<section><input type="search" style={searchInputStyle} onChange={this.onQueryChange}
|
||||||
|
placeholder="Find movies, music, games, and more"/></section>
|
||||||
|
{ this.state.searching ? <SearchActive /> : null }
|
||||||
|
{ !this.state.searching && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
|
||||||
|
{ !this.state.searching && !this.state.results.length && this.state.query ? <SearchNoResults query={this.state.query} /> : null }
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var logoStyle = {
|
||||||
|
padding: '48px 12px',
|
||||||
|
textAlign: 'center',
|
||||||
|
maxHeight: '80px',
|
||||||
|
},
|
||||||
|
imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled
|
||||||
|
height: '80px'
|
||||||
|
};
|
||||||
|
|
||||||
|
var Header = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<TopBar onPageChosen={this.handlePageChosen}/>
|
||||||
|
<div style={logoStyle}>
|
||||||
|
<img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var topBarStyle = {
|
||||||
|
'float': 'right'
|
||||||
|
},
|
||||||
|
balanceStyle = {
|
||||||
|
'marginRight': '5px'
|
||||||
|
};
|
||||||
|
|
||||||
|
var TopBar = React.createClass({
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
balance: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
componentDidMount: function() {
|
||||||
|
lbry.getBalance(function(balance) {
|
||||||
|
this.setState({
|
||||||
|
balance: balance
|
||||||
|
});
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<span className='top-bar' style={topBarStyle}>
|
||||||
|
<span style={balanceStyle}>
|
||||||
|
<CreditAmount amount={this.state.balance}/>
|
||||||
|
</span>
|
||||||
|
<Link href='/?settings' icon="icon-gear" />
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var HomePage = React.createClass({
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
<Discover />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
121
js/page/settings.js
Normal file
121
js/page/settings.js
Normal file
|
|
@ -0,0 +1,121 @@
|
||||||
|
var settingsRadioOptionStyles = {
|
||||||
|
display: 'block',
|
||||||
|
marginLeft: '13px'
|
||||||
|
}, settingsCheckBoxOptionStyles = {
|
||||||
|
display: 'block',
|
||||||
|
marginLeft: '13px'
|
||||||
|
}, settingsNumberFieldStyles = {
|
||||||
|
width: '40px'
|
||||||
|
}, downloadDirectoryLabelStyles = {
|
||||||
|
fontSize: '.9em',
|
||||||
|
marginLeft: '13px'
|
||||||
|
}, downloadDirectoryFieldStyles= {
|
||||||
|
width: '300px'
|
||||||
|
};
|
||||||
|
|
||||||
|
var SettingsPage = React.createClass({
|
||||||
|
storeSetting: function(setting, val) {
|
||||||
|
var settings = Object.assign({}, this.state.settings);
|
||||||
|
settings[setting] = val;
|
||||||
|
this.setState({
|
||||||
|
'settings': settings
|
||||||
|
});
|
||||||
|
lbry.setSettings(settings);
|
||||||
|
},
|
||||||
|
onRunOnStartChange: function (event) {
|
||||||
|
this.storeSetting('run_on_startup', event.target.checked);
|
||||||
|
},
|
||||||
|
onShareDataChange: function (event) {
|
||||||
|
this.storeSetting('upload_log', event.target.checked);
|
||||||
|
},
|
||||||
|
onDownloadDirChange: function(event) {
|
||||||
|
this.storeSetting('default_download_directory', event.target.value);
|
||||||
|
},
|
||||||
|
onMaxUploadPrefChange: function(isLimited) {
|
||||||
|
if (!isLimited) {
|
||||||
|
this.storeSetting('max_upload', 0.0);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
isMaxUpload: isLimited
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onMaxUploadFieldChange: function(event) {
|
||||||
|
this.storeSetting('max_upload', Number(event.target.value));
|
||||||
|
},
|
||||||
|
onMaxDownloadPrefChange: function(isLimited) {
|
||||||
|
if (!isLimited) {
|
||||||
|
this.storeSetting('max_download', 0.0);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
isMaxDownload: isLimited
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onMaxDownloadFieldChange: function(event) {
|
||||||
|
this.storeSetting('max_download', Number(event.target.value));
|
||||||
|
},
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
settings: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
componentWillMount: function() {
|
||||||
|
lbry.getSettings(function(settings) {
|
||||||
|
this.setState({
|
||||||
|
settings: settings,
|
||||||
|
isMaxUpload: settings.max_upload != 0,
|
||||||
|
isMaxDownload: settings.max_download != 0
|
||||||
|
});
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
if (!this.state.settings) { // If the settings aren't loaded yet, don't render anything.
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<h1>Settings</h1>
|
||||||
|
<section>
|
||||||
|
<h4>Run on startup</h4>
|
||||||
|
<label style={settingsCheckBoxOptionStyles}>
|
||||||
|
<input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer
|
||||||
|
</label>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h4>Download directory</h4>
|
||||||
|
<div className="help">Where would you like the files you download from LBRY to be saved?</div>
|
||||||
|
<input style={downloadDirectoryFieldStyles} type="text" name="default_download_directory" defaultValue={this.state.settings.default_download_directory} onChange={this.onDownloadDirChange}/>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h4>Max Upload</h4>
|
||||||
|
<label style={settingsRadioOptionStyles}>
|
||||||
|
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
|
||||||
|
</label>
|
||||||
|
<label style={settingsRadioOptionStyles}>
|
||||||
|
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
|
||||||
|
<span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
|
||||||
|
</label>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h4>Max Download</h4>
|
||||||
|
<label style={settingsRadioOptionStyles}>
|
||||||
|
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
|
||||||
|
</label>
|
||||||
|
<label style={settingsRadioOptionStyles}>
|
||||||
|
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
|
||||||
|
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
|
||||||
|
</label>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h4>Share diagnostic data</h4>
|
||||||
|
<label style={settingsCheckBoxOptionStyles}>
|
||||||
|
<input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
|
||||||
|
</label>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<Link href="/" label="<< Return"/>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -5,10 +5,11 @@ $spacing-vertical: 24px;
|
||||||
$color-primary: #155B4A;
|
$color-primary: #155B4A;
|
||||||
$color-light-alt: hsl(hue($color-primary), 15, 85);
|
$color-light-alt: hsl(hue($color-primary), 15, 85);
|
||||||
$color-text-dark: #000;
|
$color-text-dark: #000;
|
||||||
|
$color-help: #666;
|
||||||
$color-money: #216C2A;
|
$color-money: #216C2A;
|
||||||
$color-meta-light: #505050;
|
$color-meta-light: #505050;
|
||||||
|
|
||||||
$font-size: 18px;
|
$font-size: 16px;
|
||||||
|
|
||||||
$mobile-width-threshold: 801px;
|
$mobile-width-threshold: 801px;
|
||||||
$max-content-width: 1000px;
|
$max-content-width: 1000px;
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,16 @@ body
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 2.0em; }
|
section
|
||||||
|
{
|
||||||
|
margin-bottom: $spacing-vertical;
|
||||||
|
&:last-child
|
||||||
|
{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 2.0em; margin-bottom: $spacing-vertical / 2; margin-top: $spacing-vertical * 1.5; }
|
||||||
h2 { font-size: 1.75em; }
|
h2 { font-size: 1.75em; }
|
||||||
h3 { font-size: 1.4em; }
|
h3 { font-size: 1.4em; }
|
||||||
h4 { font-size: 1.2em; }
|
h4 { font-size: 1.2em; }
|
||||||
|
|
@ -24,13 +33,11 @@ sup, sub {
|
||||||
}
|
}
|
||||||
sup { top: -0.4em; }
|
sup { top: -0.4em; }
|
||||||
sub { top: 0.4em; }
|
sub { top: 0.4em; }
|
||||||
|
label { cursor: pointer; }
|
||||||
|
|
||||||
.fade-in-link {
|
header
|
||||||
opacity: 0.55;
|
{
|
||||||
transition: opacity .225s ease;
|
line-height: $spacing-vertical;
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
|
|
@ -106,4 +113,21 @@ input[type="search"]
|
||||||
{
|
{
|
||||||
color: $color-primary;
|
color: $color-primary;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
&:hover
|
||||||
|
{
|
||||||
|
opacity: 0.70;
|
||||||
|
transition: opacity .225s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in-link {
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.help
|
||||||
|
{
|
||||||
|
color: $color-help;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue