diff --git a/client/homebrew/editPage/editPage.jsx b/client/homebrew/editPage/editPage.jsx index 08b0c8e..16029ba 100644 --- a/client/homebrew/editPage/editPage.jsx +++ b/client/homebrew/editPage/editPage.jsx @@ -11,8 +11,6 @@ var request = require("superagent"); var EditPage = React.createClass({ getDefaultProps: function() { return { - //text : "", - pending : false, id : null, entry : { text : "", @@ -27,10 +25,19 @@ var EditPage = React.createClass({ getInitialState: function() { return { text: this.props.entry.text, - pending : false + pending : false, + lastUpdated : this.props.entry.updatedAt }; }, + componentDidMount: function() { + var self = this; + window.onbeforeunload = function(){ + if(!self.state.pending) return; + return "You have unsaved changes!"; + } + }, + handleTextChange : function(text){ this.setState({ text : text, @@ -45,17 +52,18 @@ var EditPage = React.createClass({ .send({text : this.state.text}) .end((err, res) => { this.setState({ - pending : false + pending : false, + lastUpdated : res.body.updatedAt }) }) }, 1500), render : function(){ - return
@@ -66,9 +74,6 @@ var EditPage = React.createClass({
- - - } }); diff --git a/client/homebrew/editPage/editPage.less b/client/homebrew/editPage/editPage.less index 6e9ab51..605b59c 100644 --- a/client/homebrew/editPage/editPage.less +++ b/client/homebrew/editPage/editPage.less @@ -1,24 +1,5 @@ .editPage{ - .paneSplit{ - width : 100%; - max-height: 100%; - .leftPane, .rightPane{ - display: inline-block; - vertical-align: top; - position: relative; - min-height: 100%; - } - .leftPane{ - width : 40%; - } - .rightPane{ - width : 60%; - - overflow-y: scroll; - } - - } } \ No newline at end of file diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 6f6c3a5..79727d7 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -55,6 +55,11 @@ var Icons = [ icon : 'fa-arrows-v', snippet : "
\n\n", tooltip : "Vertical Spacing" + }, + { + icon : 'fa-image', + snippet : "", + tooltip : "Insert Image" } @@ -68,6 +73,10 @@ var Editor = React.createClass({ }; }, + componentDidMount: function() { + this.refs.textarea.focus(); + }, + handleTextChange : function(e){ this.props.onChange(e.target.value); }, diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index 30176ae..f77d1c4 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -4,11 +4,13 @@ height : 100%; min-height : 100%; width : 100%; + display: flex; + flex-direction: column; .textIcons{ - position : absolute; display : inline-block; vertical-align : top; .icon{ + display : inline-block; height : 30px; width : 30px; cursor : pointer; @@ -26,10 +28,13 @@ } } textarea{ - display : inline-block; + box-sizing : border-box; resize : none; overflow-y : scroll; height : 100%; width : 100%; + padding : 10px; + border : none; + outline: none; } } \ No newline at end of file diff --git a/client/homebrew/homePage/homePage.jsx b/client/homebrew/homePage/homePage.jsx index c122e2f..460de08 100644 --- a/client/homebrew/homePage/homePage.jsx +++ b/client/homebrew/homePage/homePage.jsx @@ -12,7 +12,7 @@ var HomePage = React.createClass({ getInitialState: function() { return { - text: "# Welcome" + text: "# Welcome \n Katie help me decide what should go here." }; }, @@ -38,8 +38,18 @@ var HomePage = React.createClass({ return(
- - +
+
+ +
+
+ +
+
+ + + Create your own +
); } diff --git a/client/homebrew/homePage/homePage.less b/client/homebrew/homePage/homePage.less index 64108fb..d5eae45 100644 --- a/client/homebrew/homePage/homePage.less +++ b/client/homebrew/homePage/homePage.less @@ -1,3 +1,20 @@ -.homePage{ +.homePage{ + position : relative; + a.floatingNewButton{ + .animate(background-color); + position : absolute; + display : block; + right : 70px; + bottom : 70px; + padding : 1em; + background-color : @orange; + font-size : 1.5em; + color : white; + text-decoration : none; + box-shadow : 3px 3px 15px black; + &:hover{ + background-color : darken(@orange, 20%); + } + } } \ No newline at end of file diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less index 6a046f2..d9a4717 100644 --- a/client/homebrew/homebrew.less +++ b/client/homebrew/homebrew.less @@ -12,4 +12,31 @@ html,body, #reactContainer{ .homebrew{ background-color: @steel; height : 100%; + + .paneSplit{ + width : 100%; + height: 100vh; + padding-top: 25px; + position: relative; + box-sizing: border-box; + + .leftPane, .rightPane{ + display: inline-block; + vertical-align: top; + position: relative; + height: 100%; + min-height: 100%; + } + + .leftPane{ + width : 40%; + } + .rightPane{ + width : 60%; + height: 100%; + + overflow-y: scroll; + } + + } } \ No newline at end of file diff --git a/client/homebrew/phb/phb.less b/client/homebrew/phb/phb.less index 4f4d421..0e16a2b 100644 --- a/client/homebrew/phb/phb.less +++ b/client/homebrew/phb/phb.less @@ -1,11 +1,12 @@ .pbhPages{ background-color: @steel; - padding : 40px 0px; + padding : 30px 0px; &>.phb{ box-shadow : 1px 4px 14px #000; margin-left: auto; margin-right: auto; + margin-bottom: 30px; } } @font-face { @@ -72,7 +73,7 @@ position : relative; overflow: hidden; - //Accents + //Page Accents &:after{ content : ""; position: absolute; @@ -85,8 +86,8 @@ background-image : url('/assets/homebrew/assets/accent.png'); } - - p,ul,blockquote{ + //Avoid breaking up + p,ul,blockquote,table{ -webkit-column-break-inside : avoid; -moz-column-break-inside : avoid; -o-column-break-inside : avoid; @@ -338,7 +339,7 @@ &+p{ &::first-letter{ float: left; - margin-top: 0.3em; + margin-top: 0.4em; margin-bottom: 0.4em; font-family: Solbera; font-size: 10em; diff --git a/client/homebrew/sharePage/sharePage.jsx b/client/homebrew/sharePage/sharePage.jsx index d24a3e6..b7ee6f0 100644 --- a/client/homebrew/sharePage/sharePage.jsx +++ b/client/homebrew/sharePage/sharePage.jsx @@ -24,9 +24,8 @@ var SharePage = React.createClass({ return(
- + lastUpdated={this.props.entry.updatedAt} + />
diff --git a/client/homebrew/statusbar/statusbar.jsx b/client/homebrew/statusbar/statusbar.jsx index c732cbc..9da5569 100644 --- a/client/homebrew/statusbar/statusbar.jsx +++ b/client/homebrew/statusbar/statusbar.jsx @@ -1,6 +1,7 @@ var React = require('react'); var _ = require('lodash'); var cx = require('classnames'); +var Moment = require('moment'); var Logo = require('naturalCrit/logo/logo.jsx'); @@ -14,6 +15,8 @@ var Statusbar = React.createClass({ shareId : null, isPending : false, + lastUpdated : null, + info : null }; }, @@ -23,8 +26,11 @@ var Statusbar = React.createClass({ }, renderInfo : function(){ - //render last update? - //number of times viewed? + if(!this.props.lastUpdated) return null; + + return
+ Last updated: {Moment(this.props.lastUpdated).fromNow()} +
}, renderNewButton : function(){ @@ -36,6 +42,8 @@ var Statusbar = React.createClass({ }, renderEdit : function(){ + return null; + if(!this.props.editId) return null; return
@@ -47,10 +55,9 @@ var Statusbar = React.createClass({ renderShare : function(){ if(!this.props.shareId) return null; - return
- Share Link - -
+ return + Share Link + }, renderStatus : function(){ @@ -71,17 +78,16 @@ var Statusbar = React.createClass({
-
- Homerewery -
+ + The Homerewery +
{this.renderStatus()} - {this.renderEdit()} + {this.renderInfo()} {this.renderShare()} - {this.renderNewButton()}
diff --git a/client/homebrew/statusbar/statusbar.less b/client/homebrew/statusbar/statusbar.less index 8e0206e..aeff217 100644 --- a/client/homebrew/statusbar/statusbar.less +++ b/client/homebrew/statusbar/statusbar.less @@ -1,18 +1,26 @@ .statusbar{ - height : 1.0em; + height : 25px; background-color : black; font-size : 24px; + position: fixed; + width :100%; + z-index : 1000; color : white; line-height : 1.0em; border-bottom : 1px solid @grey; .logo{ display : inline-block; vertical-align : middle; - margin-right : 40px; + margin-right : 20px; + margin-top: -5px; + svg{ + margin-top: -6px; + } } .left{ display : inline-block; + vertical-align: top; } .right{ float : right; @@ -20,8 +28,11 @@ .toolName{ vertical-align : middle; font-family : CodeBold; + text-decoration: none; + color: white; + display: block; font-size : 16px; - line-height : 100%; + line-height : 30px; small{ font-family : CodeBold; } @@ -44,10 +55,17 @@ color : white; text-decoration : none; &:hover{ - background-color : rgba(255,0,0,0.4); + background-color : fade(@green, 70%); } } - .editField, .shareField{ + .shareField{ + color : white; + text-decoration : none; + cursor : pointer; + .animate(background-color); + &:hover{ + background-color : fade(@teal, 70%); + } span{ margin-right : 10px; } diff --git a/gulpfile.js b/gulpfile.js index 9a86463..bedeb96 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,6 +27,8 @@ var gulp = vitreumTasks(gulp, { "classnames", "jsoneditor", + "moment", + "superagent", "marked", diff --git a/package.json b/package.json index 816dcf1..74e2592 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "jsoneditor": "^4.2.1", "lodash": "^3.10.1", "marked": "^0.3.5", + "moment": "^2.11.0", "mongoose": "^4.3.3", "pico-flux": "^1.1.0", "pico-router": "^1.0.0", diff --git a/server/homebrew.api.js b/server/homebrew.api.js index 010c03e..648436d 100644 --- a/server/homebrew.api.js +++ b/server/homebrew.api.js @@ -46,12 +46,12 @@ module.exports = function(app){ //Updating app.put('/homebrew/update/:id', function(req, res){ HomebrewModel.find({editId : req.params.id}, function(err, objs){ - if(!objs.length || err) return res.send(400); + if(!objs.length || err) return res.status(404).send("Can not find homebrew with that id"); var resEntry = objs[0]; resEntry.text = req.body.text; resEntry.save(function(err, obj){ - if(!err) return res.sendStatus(500); - return res.send(200); + if(err) return res.status(500).send("Error while saving"); + return res.status(200).send(obj); }) }); }); diff --git a/shared/naturalCrit/logo/logo.jsx b/shared/naturalCrit/logo/logo.jsx index dafb38a..0be6136 100644 --- a/shared/naturalCrit/logo/logo.jsx +++ b/shared/naturalCrit/logo/logo.jsx @@ -2,14 +2,14 @@ var React = require('react'); var Logo = React.createClass({ render : function(){ - return
+ return NaturalCrit -
+ } }); diff --git a/shared/naturalCrit/logo/logo.less b/shared/naturalCrit/logo/logo.less index 9b7fdb7..3a6d936 100644 --- a/shared/naturalCrit/logo/logo.less +++ b/shared/naturalCrit/logo/logo.less @@ -9,6 +9,9 @@ .logo{ + color : white; + text-decoration: none; + display: block; svg{ vertical-align : middle;