From d7bd65eccac5218970f432991bf896f35133db54 Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 21:41:50 -0700 Subject: [PATCH 01/10] Switch sidebar (soon to be top nav) to nav from Bootstrap. --- views/layout.jade | 1 + views/sidebar.jade | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/views/layout.jade b/views/layout.jade index 0a80d08..aa01c74 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -7,6 +7,7 @@ html meta(http-equiv='X-UA-Compatible', content='IE=Edge,chrome=1') link(rel='icon', href='/static/i/favicon.ico') link(rel='shortcut icon', href='/static/i/favicon.ico') + link(rel='stylesheet', href='/static/stylesheets/bootstrap.css') link(rel='stylesheet', href='/static/stylesheets/style.css') script(src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js") // if lt IE 9 diff --git a/views/sidebar.jade b/views/sidebar.jade index b576795..062d468 100644 --- a/views/sidebar.jade +++ b/views/sidebar.jade @@ -1,8 +1,8 @@ -ul.lnav - li.first - a(href="/apps",rel="main",id="my_apps") My Apps +ul.nav.nav-tabs + li.active + a#my_apps(href="/apps", rel="main") My Apps ul.snav li - a(href="/app/create",rel="modal",class="app_create") Create New App + a.app_create(href="/app/create", rel="modal") Create New App li - a(href="/domains",rel="main") My Domains \ No newline at end of file + a(href="/domains", rel="main") My Domains \ No newline at end of file From 4eae665f2673387414676a6199327293794cb7c0 Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 21:47:08 -0700 Subject: [PATCH 02/10] Rename sidebar to nav. Get rid of reset CSS, as that's taken care of by Bootstrap --- public/stylesheets/style.css | 29 ----------------------------- views/layout.jade | 2 +- views/{sidebar.jade => nav.jade} | 0 3 files changed, 1 insertion(+), 30 deletions(-) rename views/{sidebar.jade => nav.jade} (100%) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 4a1734c..02b0403 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,23 +1,3 @@ -/* Resets ------- */ - -html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, -p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, -img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, -dl, dt, dd, ol, ul, li, fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figure, figcaption, hgroup, -menu, footer, header, nav, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; -} - -article, aside, canvas, figure, figure img, figcaption, hgroup, -footer, header, nav, section, audio, video { - display: block; -} - body { font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; color:#4b4b4b; @@ -46,10 +26,6 @@ a { float:right; } -.fl { - float:left; -} - .oh { overflow:hidden; } @@ -62,11 +38,6 @@ a { min-height:300px; } -.sidebar { - margin: 0 30px; - width:200px; -} - ul.lnav { padding:0; list-style:none; diff --git a/views/layout.jade b/views/layout.jade index aa01c74..1634e3f 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -22,7 +22,7 @@ html #content_wrapper - if(is_logged) .sidebar.fl - != partial("sidebar") + != partial("nav") .content != body .cl diff --git a/views/sidebar.jade b/views/nav.jade similarity index 100% rename from views/sidebar.jade rename to views/nav.jade From a441e43e4fa860b899653307d6900e48f23aff1a Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 21:49:07 -0700 Subject: [PATCH 03/10] Compress formatting of some short CSS rules. --- public/stylesheets/style.css | 38 ++++++++---------------------------- 1 file changed, 8 insertions(+), 30 deletions(-) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 02b0403..96309e8 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -3,39 +3,17 @@ body { color:#4b4b4b; } -h1,h2,h3 { - line-height:1.2em; -} - -ul,ol { - padding-left:2em; -} - -p { - line-height:1.2em; - padding:0.5em 0; -} - -*:focus {outline: none;} +h1, h2, h3 { line-height:1.2em; } +ul, ol { padding-left:2em; } +p { line-height:1.2em; padding:0.5em 0; } -a { - color: #1d64a0; -} - -.fr { - float:right; -} +.fr { float: right; } +.oh { overflow: hidden; } +.cl {clear: both; } -.oh { - overflow:hidden; -} - -.cl { - clear:both; -} #content_wrapper { - padding-top:1.4em; - min-height:300px; + padding-top: 1.4em; + min-height: 300px; } ul.lnav { From ed109f2e8f21ca5df103b81fadd29b0920fa21d0 Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 22:18:46 -0700 Subject: [PATCH 04/10] Front-end changes Remove dropdown shadow for header. Add background gradient. Add main wrapper. Add padding/margin around nav. --- public/stylesheets/style.css | 38 ++++++++++++++++++++------- views/layout.jade | 51 ++++++++++++++++++------------------ 2 files changed, 54 insertions(+), 35 deletions(-) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 96309e8..c137c92 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -4,7 +4,6 @@ body { } h1, h2, h3 { line-height:1.2em; } -ul, ol { padding-left:2em; } p { line-height:1.2em; padding:0.5em 0; } .fr { float: right; } @@ -183,20 +182,33 @@ p#incomplete { margin-right: 8px; } -header{ +header { padding: 30px 0; text-align: center; border-bottom: 1px solid #FFF; - box-shadow: 3px 7px 5px #DDD; - -webkit-box-shadow: 3px 7px 5px #DDD; - -moz-box-shadow: 3px 7px 5px #DDD; - -o-box-shadow: 3px 7px 5px #DDD; - background: #F2F2F2 url('/static/i/rocket-logo-small.png') 30px 15px no-repeat; + + background: #f2f2f2; + background-image: url('/static/i/rocket-logo-small.png'); + background-position: 30px 15px; + background-repeat: no-repeat; + background: url('/static/i/rocket-logo-small.png') no-repeat 30px 15px, + -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ddd)); + background: url('/static/i/rocket-logo-small.png') no-repeat 30px 15px, + -webkit-linear-gradient(top, #f2f2f2, #ddd); + background: url('/static/i/rocket-logo-small.png') no-repeat 30px 15px, + -moz-linear-gradient(top, #f2f2f2, #ddd); + background: url('/static/i/rocket-logo-small.png') no-repeat 30px 15px, + -ms-linear-gradient(top, #f2f2f2, #ddd); + background: url('/static/i/rocket-logo-small.png') no-repeat 30px 15px, + -o-linear-gradient(top, #f2f2f2, #ddd); + background: url('/static/i/rocket-logo-small.png') no-repeat 30px 15px, + linear-gradient(to bottom, #f2f2f2, #ddd); } + header h1 { font-size: 2.8em; - text-shadow: 1px 1px 1px #FFF; - color: #000; + text-shadow: 2px 2px 2px #fff; + color: black; } footer { @@ -210,6 +222,14 @@ footer p { line-height:1.4em; } +.main { + margin-top: 15px; +} + +.nav { + padding: 0 20px; +} + /**** MODAL ****/ .modal { visibility: hidden; diff --git a/views/layout.jade b/views/layout.jade index 1634e3f..7e6b4b0 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -15,34 +15,33 @@ html body header h1 Nodester Admin Panel - - if(is_logged) - p.log_info - | Howdy #{user} ! - a(href="/logout") Logout - #content_wrapper + .main - if(is_logged) - .sidebar.fl - != partial("nav") - .content - != body - .cl - footer - p NOTE
- | This project is work in progress.
- | Kindly file issues/pull requests at - a(href='http://github.com/nodester/admin-panel', target="_blank") http://github.com/nodester/admin-panel - p Special thanks to the creators of - a(target="_blank", href='http://nodester.com') Nodester.com - | for this brilliant platform :) + != partial("nav") + p.log_info + | Howdy #{user} ! + a(href="/logout") Logout + #content_wrapper + .content + != body + .cl + footer + p NOTE
+ | This project is work in progress.
+ | Kindly file issues/pull requests at + a(href='http://github.com/nodester/admin-panel', target="_blank") http://github.com/nodester/admin-panel + p Special thanks to the creators of + a(target="_blank", href='http://nodester.com') Nodester.com + | for this brilliant platform :) - p - by - | @michealbenedict, - | @crp_underground and - | @kev_nz - | for @nodester - #modal.modal - .close × - #modal_content + p - by + | @michealbenedict, + | @crp_underground and + | @kev_nz + | for @nodester + #modal.modal + .close × + #modal_content script(src="/static/javascripts/lib/jq.modal.js") script(src="/static/javascripts/lib/underscore-min.js") From e1005ee110ee6aa1b38bdf130a7abc54d6740a03 Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 22:23:56 -0700 Subject: [PATCH 05/10] More CSS tweaks. Center .tree table Delete nbsps; use greater margin instead. Remove lnav CSS as it's no longer in use --- public/stylesheets/style.css | 39 +++++------------------------------ views/frontend-templates.jade | 3 --- 2 files changed, 5 insertions(+), 37 deletions(-) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c137c92..8dd361b 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -15,13 +15,6 @@ p { line-height:1.2em; padding:0.5em 0; } min-height: 300px; } -ul.lnav { - padding:0; - list-style:none; - width:150px; - font-size:12px; -} - ul.snav { display:none; } @@ -30,31 +23,6 @@ ul.snav > li { padding:5px 0; } -ul.lnav > li.first { - margin:0; -} - -ul.lnav > li { - margin-top:2px; -} - -ul.lnav > li > a { - display:block; - background:#ddd; - padding:0.5em 1em; - color:#555; - text-decoration:none; -} - -ul.lnav > li > a:hover, -ul.lnav > li.active > a { - background:#bbb; -} - -ul.lnav > li.active ul.snav { - display:block; -} - .login_wrap { width:420px; margin: 0 auto; @@ -160,7 +128,10 @@ p#incomplete { margin-bottom: 1em; width:99%; } -.tree{width:75%;} +.tree { + width: 75%; + margin: 0 auto; +} .tree th, .table th { font-weight: normal; @@ -179,7 +150,7 @@ p#incomplete { } .tree .actions a { - margin-right: 8px; + margin-right: 20px; } header { diff --git a/views/frontend-templates.jade b/views/frontend-templates.jade index c040d66..78f5e20 100644 --- a/views/frontend-templates.jade +++ b/views/frontend-templates.jade @@ -12,11 +12,8 @@ script(id="app-tmpl", type="text/html") td.status {{running}} td.actions a.start(href="/app") start -   a.stop(href="/app") stop -   a.applogs(href="/applogs/{{name}}") logs -   a.app_info(href="/app/{{name}}") info script(id="log-tmpl", type="text/html") From 4a5d9b46bdd83e2601c60684bdcbce1bf8ccb815 Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 22:34:29 -0700 Subject: [PATCH 06/10] Remove empty appListView/domainListView objects -- they didn't seem to be doing anything. Am I missing something @Kevnz? --- public/javascripts/main.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/public/javascripts/main.js b/public/javascripts/main.js index fd4a842..df0872d 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -46,12 +46,6 @@ var apps = new Apps; // Meh, not sure how to handle this yet, // and its utility seems minimal. Later. var Router = Backbone.Router.extend({ - initialize: function() { - panel.appListView = {}; - panel.domainListView = {} - //panel.appListView.render(); - }, - routes: { 'apps': 'apps', 'domains': 'domains', From 83c975e7011c6658566d2ad7d9027280ca6c7b51 Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 22:38:59 -0700 Subject: [PATCH 07/10] Add default route to apps --- public/javascripts/main.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/public/javascripts/main.js b/public/javascripts/main.js index df0872d..72af3c2 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -49,7 +49,8 @@ var Router = Backbone.Router.extend({ routes: { 'apps': 'apps', 'domains': 'domains', - 'login': 'login' + 'login': 'login', + '*path': 'default' }, apps: function() { @@ -63,8 +64,12 @@ var Router = Backbone.Router.extend({ panel.domainListView.render(); }, - login: function(){ + login: function() { + }, + + default: function() { + this.navigate('apps'); } }); From 861c2b3a57c6465d79aae45dca7aadbde029555d Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 22:55:58 -0700 Subject: [PATCH 08/10] Add view for nav panel, with navigation. No more page refreshes --- public/javascripts/main.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/public/javascripts/main.js b/public/javascripts/main.js index 72af3c2..b6d882c 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -29,13 +29,13 @@ var Apps = Backbone.Collection.extend({ var Domain = Backbone.Model.extend({ idAttribute: 'domain', - url: function(){return '/api/appdomains/' + this.appname} + url: function() { return '/api/appdomains/' + this.appname } }); var Domains = Backbone.Collection.extend({ model: Domain, url: '/api/appdomains' -}) +}); var apps = new Apps; @@ -46,6 +46,10 @@ var apps = new Apps; // Meh, not sure how to handle this yet, // and its utility seems minimal. Later. var Router = Backbone.Router.extend({ + initialize: function() { + panel.navView = new NavView; + }, + routes: { 'apps': 'apps', 'domains': 'domains', @@ -77,6 +81,21 @@ var Router = Backbone.Router.extend({ // Views // ----- + +var NavView = Backbone.View.extend({ + el: '.nav', + events: { + 'click li a': 'navigate' + }, + + navigate: function(e) { + e.preventDefault(); + var href = $(e.currentTarget).attr('href'); + panel.router.navigate(href.substr(1), {trigger: true}); + } + +}); + var AppView = Backbone.View.extend({ tagName: 'tr', @@ -197,7 +216,7 @@ var DomainListView = Backbone.View.extend({ $(function() { - new Router; + panel.router = new Router; Backbone.history.start({pushState: true}); //HACK Until I wire it into the backbone view From 6214afdc0725d1cfd41de40cf578af4ea4d789aa Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 22:59:16 -0700 Subject: [PATCH 09/10] Switch active tabs --- public/javascripts/main.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/javascripts/main.js b/public/javascripts/main.js index b6d882c..8913b47 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -92,6 +92,9 @@ var NavView = Backbone.View.extend({ e.preventDefault(); var href = $(e.currentTarget).attr('href'); panel.router.navigate(href.substr(1), {trigger: true}); + // Switch active tab display + this.$('li').removeClass('active'); + $(e.currentTarget).parent().addClass('active'); } }); From f1b9eb16ef51e1b12ee470b5b02df76d33cb351f Mon Sep 17 00:00:00 2001 From: Aaron Kavlie Date: Mon, 5 Mar 2012 23:19:46 -0700 Subject: [PATCH 10/10] Move 'create new app' action to button below apps list --- public/javascripts/main.js | 4 ++-- public/stylesheets/style.css | 16 ++++++--------- views/frontend-templates.jade | 37 +++++++++++++++++++---------------- views/index.jade | 1 - views/nav.jade | 3 --- 5 files changed, 28 insertions(+), 33 deletions(-) diff --git a/public/javascripts/main.js b/public/javascripts/main.js index 8913b47..9238ec2 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -166,7 +166,7 @@ var AppListView = Backbone.View.extend({ render: function() { var html = Mustache.to_html(this.tmpl); - $('.tree').html(html).fadeIn('fast'); + $('.content').html(html).fadeIn('fast'); this.collection.each(function(app) { var view = new AppView({model: app}); $('.tree tbody').append(view.render().el); @@ -207,7 +207,7 @@ var DomainListView = Backbone.View.extend({ //this.$el.html(html); var html = Mustache.to_html(this.tmpl); - $('.tree').html(html).fadeIn('fast'); + $('.content').html(html).fadeIn('fast'); this.collection.each(function(domain) { var view = new DomainView({model: domain}); $('.tree tbody').append(view.render().el); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 8dd361b..af463bd 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,6 +1,6 @@ body { - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; - color:#4b4b4b; + /*font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/ + /*color: #4b4b4b;*/ } h1, h2, h3 { line-height:1.2em; } @@ -15,12 +15,9 @@ p { line-height:1.2em; padding:0.5em 0; } min-height: 300px; } -ul.snav { - display:none; -} - -ul.snav > li { - padding:5px 0; +.content { + width: 75%; + margin: 0 auto; } .login_wrap { @@ -129,8 +126,7 @@ p#incomplete { width:99%; } .tree { - width: 75%; - margin: 0 auto; + width: 100%; } .tree th, .table th { diff --git a/views/frontend-templates.jade b/views/frontend-templates.jade index 78f5e20..5a65a61 100644 --- a/views/frontend-templates.jade +++ b/views/frontend-templates.jade @@ -1,10 +1,11 @@ script(id="app-list-tmpl", type="text/html") - tr - th name - th port - th app-status - th action - + table.tree + tr + th name + th port + th app-status + th action + button.btn.btn-primary Create a new app script(id="app-tmpl", type="text/html") td.name {{name}} @@ -47,17 +48,19 @@ script(id="app-info-tmpl", type="text/html") a.submit.r5.redgrad.no_u(href="/app/{{appname}}", data-params="{'appname':'{{appname}}'}") Destroy App script(id="domain-list-tmpl", type="text/html") - thead - tr - th domain - th appname - th port - th actions - tbody - tfoot - tr - td(colspan="4") - a.add(href="#") Add + table.tree + thead + tr + th domain + th appname + th port + th actions + tbody + tfoot + tr + td(colspan="4") + a.add(href="#") Add + script(id="domain-tmpl", type="text/html") td {{domain}} td {{appname}} diff --git a/views/index.jade b/views/index.jade index f5cbb64..33584cb 100644 --- a/views/index.jade +++ b/views/index.jade @@ -1,7 +1,6 @@ .c #loader img(src:"/static/i/loader.gif") - table.tree(cellspacing:0,cellpadding:0) script $(function(){ // $.getScript('/static/javascripts/main.js"'); diff --git a/views/nav.jade b/views/nav.jade index 062d468..9acf580 100644 --- a/views/nav.jade +++ b/views/nav.jade @@ -1,8 +1,5 @@ ul.nav.nav-tabs li.active a#my_apps(href="/apps", rel="main") My Apps - ul.snav - li - a.app_create(href="/app/create", rel="modal") Create New App li a(href="/domains", rel="main") My Domains \ No newline at end of file