From 376b386b3145e6f874eb765c2c008378193afe49 Mon Sep 17 00:00:00 2001 From: Keivan Beigi Date: Thu, 1 Aug 2013 18:02:55 -0700 Subject: [PATCH] show a basic spinner while the app is loading all the js files/series list. --- UI/.idea/dictionaries/Keivan_Beigi.xml | 1 + UI/Content/menu.less | 39 ++++++++++-- UI/Content/theme.less | 30 +--------- UI/MainMenuView.js | 42 ------------- UI/Navbar/NavbarTemplate.html | 62 +++++++++++++++++++ UI/Navbar/NavbarView.js | 41 +++++++++++++ UI/Router.js | 4 +- UI/app.js | 1 + UI/index.html | 82 +++++--------------------- 9 files changed, 159 insertions(+), 143 deletions(-) delete mode 100644 UI/MainMenuView.js create mode 100644 UI/Navbar/NavbarTemplate.html create mode 100644 UI/Navbar/NavbarView.js diff --git a/UI/.idea/dictionaries/Keivan_Beigi.xml b/UI/.idea/dictionaries/Keivan_Beigi.xml index 981e29f30..00d8e4cec 100644 --- a/UI/.idea/dictionaries/Keivan_Beigi.xml +++ b/UI/.idea/dictionaries/Keivan_Beigi.xml @@ -7,6 +7,7 @@ couldn mouseenter mouseleave + navbar \ No newline at end of file diff --git a/UI/Content/menu.less b/UI/Content/menu.less index 78f1000cb..36dc4bdee 100644 --- a/UI/Content/menu.less +++ b/UI/Content/menu.less @@ -10,15 +10,15 @@ } } -#in-sub-nav li a { +#nav-region li a { color : #b9b9b9; } -#in-sub-nav li a:focus { +#nav-region li a:focus { text-decoration : none; } -#in-sub-nav { +#nav-region { margin-bottom : 80px; .span12 { @@ -33,7 +33,38 @@ } } -.backdrop #in-sub-nav { +.backdrop #nav-region { background-color : #000000; .opacity(0.85); } + +#nav-region li a:hover, #in-sub-nav li a.active { + background-color : #555555; + text-decoration : none; +} + +#nav-region { + ul { + text-align : center; + margin-bottom : 10px; + } + li { + list-style-type : none; + display : inline-block; + a { + display : block; + border-radius : 6px; + padding : 15px 10px 5px; + min-height : 56px; + min-width : 64px; + margin : 20px 10px 10px; + color : #ffffff; + font-weight : 100; + } + span.label.pull-right { + position : relative; + top : 24px; + right : 14px; + } + } +} diff --git a/UI/Content/theme.less b/UI/Content/theme.less index bf147ba12..d7ac48c8d 100644 --- a/UI/Content/theme.less +++ b/UI/Content/theme.less @@ -57,10 +57,7 @@ footer { color : rgba(255, 255, 255, 0.8); } -#in-sub-nav li a:hover, #in-sub-nav li a.active { - background-color : #555555; - text-decoration : none; -} + body h1, body h2, body h3, body h4, body h5, body h6 { text-transform : capitalize; @@ -81,28 +78,3 @@ body h1, body h2, body h3, body h4, body h5, body h6 { } } -#in-sub-nav { - ul { - text-align : center; - margin-bottom : 10px; - } - li { - list-style-type : none; - display : inline-block; - a { - display : block; - border-radius : 6px; - padding : 15px 10px 5px; - min-height : 56px; - min-width : 64px; - margin : 20px 10px 10px; - color : #ffffff; - font-weight : 100; - } - span.label.pull-right { - position : relative; - top : 24px; - right : 14px; - } - } -} diff --git a/UI/MainMenuView.js b/UI/MainMenuView.js deleted file mode 100644 index 2c689af37..000000000 --- a/UI/MainMenuView.js +++ /dev/null @@ -1,42 +0,0 @@ -'use strict'; -define(['marionette'], function (Marionette) { - var MainMenuView = Marionette.ItemView.extend({ - events: { - 'click a': 'onClick' - }, - - onClick: function (event) { - - event.preventDefault(); - - var target = $(event.target); - - //look down for - var href = event.target.getAttribute('href'); - - //if couldn't find it look up - if (!href && target.parent('a') && target.parent('a')[0]) { - - var linkElement = target.parent('a')[0]; - - href = linkElement.getAttribute('href'); - this.setActive(linkElement); - } else { - this.setActive(event.target); - } - }, - - setActive: function (element) { - //Todo: Set active on first load - this.$('a').removeClass('active'); - $(element).addClass('active'); - }, - - initialize: function () { - this.setElement($('#main-menu-region')); - } - }); - - return new MainMenuView(); - -}); diff --git a/UI/Navbar/NavbarTemplate.html b/UI/Navbar/NavbarTemplate.html new file mode 100644 index 000000000..4879a0c47 --- /dev/null +++ b/UI/Navbar/NavbarTemplate.html @@ -0,0 +1,62 @@ +
+
+
+ +
+
+
diff --git a/UI/Navbar/NavbarView.js b/UI/Navbar/NavbarView.js new file mode 100644 index 000000000..b78f8f678 --- /dev/null +++ b/UI/Navbar/NavbarView.js @@ -0,0 +1,41 @@ +'use strict'; +define( + [ + 'marionette' + ], function (Marionette) { + return Marionette.ItemView.extend({ + events: { + 'click a': 'onClick' + }, + + template : 'Navbar/NavbarTemplate', + + onClick: function (event) { + + event.preventDefault(); + + var target = $(event.target); + + //look down for + var href = event.target.getAttribute('href'); + + //if couldn't find it look up + if (!href && target.parent('a') && target.parent('a')[0]) { + + var linkElement = target.parent('a')[0]; + + href = linkElement.getAttribute('href'); + this.setActive(linkElement); + } + else { + this.setActive(event.target); + } + }, + + setActive: function (element) { + //Todo: Set active on first load + this.$('a').removeClass('active'); + $(element).addClass('active'); + } + }); + }); diff --git a/UI/Router.js b/UI/Router.js index 65ebc869a..7052b939c 100644 --- a/UI/Router.js +++ b/UI/Router.js @@ -5,8 +5,9 @@ require( 'marionette', 'Controller', 'Series/SeriesCollection', + 'Navbar/NavbarView', 'jQuery/RouteBinder' - ], function (App, Marionette, Controller, SeriesCollection, RouterBinder) { + ], function (App, Marionette, Controller, SeriesCollection,NavbarView, RouterBinder) { var Router = Marionette.AppRouter.extend({ @@ -39,6 +40,7 @@ require( .done(function(){ Backbone.history.start({ pushState: true }); RouterBinder.bind(App.Router); + App.navbarRegion.show(new NavbarView()); }) }); diff --git a/UI/app.js b/UI/app.js index 3b616641a..babb84c19 100644 --- a/UI/app.js +++ b/UI/app.js @@ -188,6 +188,7 @@ define( }); app.addRegions({ + navbarRegion: '#nav-region', mainRegion : '#main-region', footerRegion: '#footer-region' }); diff --git a/UI/index.html b/UI/index.html index 41386b579..bb088a77f 100644 --- a/UI/index.html +++ b/UI/index.html @@ -17,81 +17,29 @@ - - - - + + + + -
-
-
-
- - -
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+