public/homebrewery
1
0
Fork 0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-20 00:41:30 +00:00
Code Issues Releases Wiki Activity

styling for the new save current button done

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-05-24 22:22:29 -04:00
parent 56bb0e0ad8
commit 5a1041cbb3
2 changed files with 116 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
client/homebrew/pages/homePage/homePage.jsx
View File

@@ -1,70 +1,74 @@
var React = require('react'); var React = require('react');
var _ = require('lodash'); var _ = require('lodash');
var cx = require('classnames'); var cx = require('classnames');
var Nav = require('naturalcrit/nav/nav.jsx'); var Nav = require('naturalcrit/nav/nav.jsx');
var Navbar = require('../../navbar/navbar.jsx'); var Navbar = require('../../navbar/navbar.jsx');
var PatreonNavItem = require('../../navbar/patreon.navitem.jsx'); var PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
var SplitPane = require('naturalcrit/splitPane/splitPane.jsx'); var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
var Editor = require('../../editor/editor.jsx'); var Editor = require('../../editor/editor.jsx');
var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
var HomePage = React.createClass({ var HomePage = React.createClass({
getDefaultProps: function() { getDefaultProps: function() {
return { return {
welcomeText : "" welcomeText : ""
}; };
}, },
getInitialState: function() { getInitialState: function() {
return { return {
text: this.props.welcomeText text: this.props.welcomeText
}; };
}, },
handleSplitMove : function(){ handleSplitMove : function(){
this.refs.editor.update(); this.refs.editor.update();
}, },
handleTextChange : function(text){ handleTextChange : function(text){
this.setState({ this.setState({
text : text text : text
}); });
}, },
renderNavbar : function(){ renderNavbar : function(){
return <Navbar> return <Navbar>
<Nav.section> <Nav.section>
<PatreonNavItem /> <PatreonNavItem />
<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'> <Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
report issue report issue
</Nav.item> </Nav.item>
<Nav.item newTab={true} href='/homebrew/changelog' color='purple' icon='fa-file-text-o'> <Nav.item newTab={true} href='/homebrew/changelog' color='purple' icon='fa-file-text-o'>
Changelog Changelog
</Nav.item> </Nav.item>
<Nav.item href='/homebrew/new' color='green' icon='fa-external-link'> <Nav.item href='/homebrew/new' color='green' icon='fa-external-link'>
New Brew New Brew
</Nav.item> </Nav.item>
</Nav.section> </Nav.section>
</Navbar> </Navbar>
}, },
render : function(){ render : function(){
return <div className='homePage page'> return <div className='homePage page'>
{this.renderNavbar()} {this.renderNavbar()}
<div className='content'> <div className='content'>
<SplitPane onDragFinish={this.handleSplitMove} ref='pane'> <SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/> <Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
<BrewRenderer text={this.state.text} /> <BrewRenderer text={this.state.text} />
</SplitPane> </SplitPane>
</div> </div>
<a href='/homebrew/new' className='floatingNewButton'> <div className={cx('floatingSaveButton', {show : this.props.welcomeText != this.state.text})}>
Create your own <i className='fa fa-magic' /> Save current <i className='fa fa-save' />
</a> </div>
</div>
} <a href='/homebrew/new' className='floatingNewButton'>
}); Create your own <i className='fa fa-magic' />
</a>
module.exports = HomePage; </div>
}
});
module.exports = HomePage;

62
client/homebrew/pages/homePage/homePage.less
View File

@@ -1,21 +1,43 @@
.homePage{
.homePage{ position : relative;
position : relative; a.floatingNewButton{
a.floatingNewButton{ .animate(background-color);
.animate(background-color); position : absolute;
position : absolute; display : block;
display : block; right : 70px;
right : 70px; bottom : 70px;
bottom : 70px; z-index : 100;
z-index : 100; z-index : 5001;
padding : 1em; padding : 1em;
background-color : @orange; background-color : @orange;
font-size : 1.5em; font-size : 1.5em;
color : white; color : white;
text-decoration : none; text-decoration : none;
box-shadow : 3px 3px 15px black; box-shadow : 3px 3px 15px black;
&:hover{ &:hover{
background-color : darken(@orange, 20%); background-color : darken(@orange, 20%);
} }
} }
.floatingSaveButton{
.animateAll();
position : absolute;
display : block;
right : 200px;
bottom : 90px;
z-index : 100;
z-index : 5000;
padding : 0.8em;
cursor : pointer;
background-color : @blue;
font-size : 0.8em;
color : white;
text-decoration : none;
box-shadow : 3px 3px 15px black;
&:hover{
background-color : darken(@blue, 20%);
}
&.show{
right : 350px;
}
}
} }