diff --git a/main.coffee b/main.coffee index 57f084a..aaf2300 100644 --- a/main.coffee +++ b/main.coffee @@ -55,6 +55,8 @@ app.get '/', (req, res) -> locals: { title: 'Spark.' docs: threeDocs + flashError: req.flash('error') || '' + flashInfo: req.flash('info') || '' } } @@ -64,6 +66,8 @@ app.get '/scenes', (req, res) -> locals: { title: 'Spark.' docs: docs + flashError: req.flash('error') || '' + flashInfo: req.flash('info') || '' } } @@ -71,6 +75,8 @@ app.get '/new', (req, res) -> res.render 'new', { locals: { title: 'Spark.' + flashError: req.flash('error') || '' + flashInfo: req.flash('info') || '' } } @@ -89,8 +95,11 @@ app.post '/new', (req, res) -> created_at: new Date() stories: [] }, (err, returnedDoc, returnedData) -> + req.flash 'info', 'Scene was successfully created! Now add a Story!' res.redirect('/'+returnedData.id) - else res.redirect('/') + else + req.flash 'error', 'Scene was not created. You are not logged in.' + res.redirect('/') app.get '/concept', (req, res) -> fs.readFile 'CONCEPT.md', 'ascii', (err, data) -> @@ -107,12 +116,16 @@ app.get '/random', (req, res) -> app.get '/:id', (req, res) -> scene.findById req.params.id, (err, doc) -> + flashInfo = req.flash 'info' + flashError = req.flash 'error' if doc res.render 'single', { locals:{ title:"Spark." id: req.params.id doc: doc.value + flashInfo: flashInfo || '' + flashError: flashError || '' } } else @@ -126,6 +139,8 @@ app.get '/:id/edit', (req, res) -> title:"Spark." id: req.params.id doc: doc.value + flashError: req.flash('error') || '' + flashInfo: req.flash('info') || '' } } else @@ -144,10 +159,13 @@ app.post '/:id/edit', (req, res) -> newDoc.creator = req.param 'creator' scene.saveById req.params.id, newDoc, (saveErr, saveDoc, saveRes) -> throw saveErr if saveErr + req.flash 'info', 'Scene successfully edited.' res.redirect '/'+req.params.id else + req.flash 'error', 'Scene not edited. You are not the owner of this Scene.' res.redirect '/'+req.params.id else + req.flash 'error', 'Scene not edited. You are not logged in.' res.redirect '/'+req.params.id @@ -159,6 +177,7 @@ app.post '/:id/delete', (req, res) -> if (doc.value.createUserId == uid) scene.deleteById storyId, doc.value._rev, (deleteErr, deleteRes) -> throw deleteErr if deleteErr + req.flash 'info', 'Scene was deleted. Aww.' res.redirect '/' app.post '/:id/add', (req, res) -> @@ -176,20 +195,17 @@ app.post '/:id/add', (req, res) -> } hash = crypto.createHmac('sha1', 'abcdeg').update(newStory.title+newStory.story+newStory.createUserId).digest('hex') - - newStory._id=hash - + newStory._id=hash tempDoc.stories.push newStory - scene.saveById req.params.id, tempDoc, (saveErr, doc, saveRes) -> throw saveErr if saveErr + req.flash 'info', 'Story was added to this Scene. Thank you!' res.redirect('/'+req.params.id) else - console.log "could not retrieve original document" + req.flash 'error', 'That did not work.' res.redirect('/'+req.params.id) app.post '/:id/delete/:commentId', (req, res) -> - console.log "finding..." scene.findById req.params.id, (err, doc) -> newStoryUserId = 'not authed' newStories = [] @@ -203,9 +219,10 @@ app.post '/:id/delete/:commentId', (req, res) -> if (newStoryUserId == req.session.auth.userId) scene.saveById req.params.id, doc.value, (saveErr, saveDoc, saveRes) -> throw saveErr if saveErr - res.notice = 'Saved.' + req.flash 'info', 'The Story is now gone. Care to write another one?' res.redirect '/'+req.params.id else + req.flash 'error', 'You are not the owner of this Story. Someone will get mad!' res.redirect '/'+req.params.id @@ -224,8 +241,10 @@ app.post '/:id/save/:commentId', (req, res) -> if (newStoryUserId == req.session.auth.userId) scene.saveById req.params.id, doc.value, (saveErr, saveDoc, saveRes) -> throw saveErr if saveErr + req.flash 'info', 'Story successfully changed.' res.redirect '/'+req.params.id else + req.flash 'error', 'That was not your Story.' res.redirect '/'+req.params.id # Run App diff --git a/public/js/bootstrap-alert.js b/public/js/bootstrap-alert.js new file mode 100644 index 0000000..d17f44e --- /dev/null +++ b/public/js/bootstrap-alert.js @@ -0,0 +1,94 @@ +/* ========================================================== + * bootstrap-alert.js v2.0.2 + * http://twitter.github.com/bootstrap/javascript.html#alerts + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function( $ ){ + + "use strict" + + /* ALERT CLASS DEFINITION + * ====================== */ + + var dismiss = '[data-dismiss="alert"]' + , Alert = function ( el ) { + $(el).on('click', dismiss, this.close) + } + + Alert.prototype = { + + constructor: Alert + + , close: function ( e ) { + var $this = $(this) + , selector = $this.attr('data-target') + , $parent + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + $parent = $(selector) + $parent.trigger('close') + + e && e.preventDefault() + + $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) + + $parent + .trigger('close') + .removeClass('in') + + function removeElement() { + $parent + .trigger('closed') + .remove() + } + + $.support.transition && $parent.hasClass('fade') ? + $parent.on($.support.transition.end, removeElement) : + removeElement() + } + + } + + + /* ALERT PLUGIN DEFINITION + * ======================= */ + + $.fn.alert = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('alert') + if (!data) $this.data('alert', (data = new Alert(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + $.fn.alert.Constructor = Alert + + + /* ALERT DATA-API + * ============== */ + + $(function () { + $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) + }) + +}( window.jQuery ); \ No newline at end of file diff --git a/public/less/bootstrap.css b/public/less/bootstrap.css index a7ddba4..ca132e9 100644 --- a/public/less/bootstrap.css +++ b/public/less/bootstrap.css @@ -2673,7 +2673,7 @@ input[type="submit"].btn.small { .navbar .brand { float: left; display: block; - padding: 8px 20px 12px; + padding: 4px 20px 6px; margin-left: -20px; font-size: 20px; font-weight: 200; @@ -2682,7 +2682,7 @@ input[type="submit"].btn.small { } .navbar .navbar-text { margin-bottom: 0; - line-height: 40px; + line-height: 30px; color: #ffffff; } .navbar .navbar-text a:hover { @@ -2691,7 +2691,7 @@ input[type="submit"].btn.small { } .navbar .btn, .navbar .btn-group { - margin-top: 5px; + margin-top: 0px; } .navbar .btn-group .btn { margin-top: 0; @@ -2811,7 +2811,7 @@ input[type="submit"].btn.small { } .navbar .nav > li > a { float: none; - padding: 10px 10px 11px; + padding: 5px 10px 6px; line-height: 19px; color: #057dd5; text-decoration: none; @@ -2829,7 +2829,7 @@ input[type="submit"].btn.small { background-color: #01253f; } .navbar .divider-vertical { - height: 40px; + height: 30px; width: 1px; margin: 0 9px; overflow: hidden; @@ -3681,7 +3681,7 @@ a.thumbnail:hover { visibility: hidden; } body { - padding-top: 75px; + padding-top: 60px; } h1 { color: #03518a; @@ -3745,5 +3745,6 @@ h1 { margin-bottom: 7px; } footer { + text-align: center; margin-top: 10px; } diff --git a/public/less/navbar.less b/public/less/navbar.less index 16553c1..30ded22 100755 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -58,7 +58,8 @@ .brand { float: left; display: block; - padding: 8px 20px 12px; + // padding: 8px 20px 12px; + padding: (((@navbarHeight - 20) / 2) * 0.8) 20px (((@navbarHeight - 20) / 2) * 1.2); margin-left: -20px; // negative indent to left-align the text down the page font-size: 20px; font-weight: 200; @@ -68,7 +69,7 @@ // Plain text in topbar .navbar-text { margin-bottom: 0; - line-height: 40px; + line-height: @navbarHeight; color: @navbarText; a:hover { color: @white; @@ -78,7 +79,8 @@ // Buttons in navbar .btn, .btn-group { - margin-top: 5px; // make buttons vertically centered in navbar + //margin-top: 5px; // make buttons vertically centered in navbar + margin-top: (@navbarHeight - 30px) / 2; } .btn-group .btn { margin-top: 0; // then undo the margin here so we don't accidentally double it @@ -194,7 +196,8 @@ // Links .navbar .nav > li > a { float: none; - padding: 10px 10px 11px; + padding: (@navbarHeight - 20)/2 10px ((@navbarHeight - 20)/2 + 1); + // padding: 10px 10px 11px; line-height: 19px; color: @navbarLinkColor; text-decoration: none; diff --git a/public/less/utilities.less b/public/less/utilities.less index e54d7d5..c420bfe 100755 --- a/public/less/utilities.less +++ b/public/less/utilities.less @@ -23,7 +23,7 @@ } body { - padding-top: 75px; + padding-top: 60px; } h1 { @@ -102,5 +102,6 @@ h1 { margin-bottom:7px; } footer { + text-align:center; margin-top:10px; } \ No newline at end of file diff --git a/public/less/variables.less b/public/less/variables.less index ff3a363..8d2d831 100755 --- a/public/less/variables.less +++ b/public/less/variables.less @@ -68,7 +68,7 @@ @hrBorder: @grayLighter; // Navbar -@navbarHeight: 40px; +@navbarHeight: 30px; @navbarBackground: darken(@linkColor, 15%); @navbarBackgroundHighlight: darken(@linkColor, 10%); @navbarLinkBackgroundHover: transparent; diff --git a/views/bootstrap.jade b/views/bootstrap.jade index 06c2d8c..717754b 100644 --- a/views/bootstrap.jade +++ b/views/bootstrap.jade @@ -2,5 +2,6 @@ script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') script(src='/js/jquery.lightbox-0.5.pack.js') script(src='/js/jquery.wookmark.min.js') script(src='/js/jquery.noisy.min.js') +script(src='/js/bootstrap-alert.js') link(rel='stylesheet', href='/less/bootstrap.css') link(rel='stylesheet', href='/css/jquery.lightbox-0.5.css') diff --git a/views/layout.jade b/views/layout.jade index 8349913..7dbe0e3 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -44,7 +44,25 @@ html a(href="/logout")= "Logout" - else a(href= "/auth/twitter")= "Login with Twitter" - div.container!= body + div.container + - if (typeof(flashError) != "undefined" || (typeof(flashInfo) != "undefined")) + div.row.notices + .span12 + - if (typeof(flashError) != "undefined") + - if (flashError != '') + .alert.alert-error + a.close(data-dismiss='alert')= "x" + strong Oops! + - for singleFlash in flashError + span= singleFlash + - if (typeof(flashInfo) != "undefined") + - if (flashInfo != '') + .alert.alert-success + a.close(data-dismiss='alert')= "x" + strong Fantastic! + - for singleFlash in flashInfo + span= singleFlash + !=body footer p © a(href= "http://www.arvidkahl.de")="Arvid Kahl" @@ -69,6 +87,7 @@ html | to host the Scenes and Stories. script $(function(){ + $('.alert').alert(); $('#sparkNavBar div.navbar-inner').noisy({ 'intensity' : 1, 'size' : '139',