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 @@
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-