Ejegg has submitted this change and it was merged.
Change subject: sidebar nav changes
......................................................................
sidebar nav changes
~fixed userBoard back to using params from app-content
~fixed white background issue
~it's prettier
Change-Id: I15a781afdf5ecf2ccfbaf167d9f39db1b3966ab2
---
M server.js
M src/components/app-content/app-content.html
M src/components/app-content/app-content.js
M src/components/nav-bar/nav-bar.html
M src/components/nav-bar/nav-bar.js
M src/css/style.css
6 files changed, 126 insertions(+), 55 deletions(-)
Approvals:
Ejegg: Looks good to me, approved
diff --git a/server.js b/server.js
index b0ef5bf..1d88449 100644
--- a/server.js
+++ b/server.js
@@ -80,7 +80,7 @@
app.get( '/auth/drupal', function( req, res ) {
req.session.passport = {
user: {
- displayName: 'debuguser'
+ displayName: 'HoneyD'
}
};
res.redirect( '/' );
diff --git a/src/components/app-content/app-content.html
b/src/components/app-content/app-content.html
index 3ec432d..8f2c95b 100644
--- a/src/components/app-content/app-content.html
+++ b/src/components/app-content/app-content.html
@@ -1,13 +1,10 @@
<section id="navbar">
- <nav-bar params="welcome: welcome, loggedIn: loggedIn"></nav-bar>
+ <nav-bar params="welcome: welcome, loggedIn: loggedIn, userBoards:
userBoards"></nav-bar>
</section>
<div class="container-fluid" data-bind='if: loggedIn'>
<div class="row">
- <div data-bind="component: 'bigEnglishBoard'"
class="col-md-12"></div>
- </div>
- <div class="row layoutRow">
- <div data-bind="component: 'fraud-gauge'" class="col-md-4
firstWidget"></div>
+ <div data-bind="component: userDefaultBoard"
class="col-md-12"></div>
</div>
</div>
@@ -15,7 +12,6 @@
<div class="row">
<div class="jumbotron">
<h1>Welcome To Dash.</h1>
- <h3>Please <a href="/auth/drupal"><button class="btn
btn-info">Log in</button></a> to continue.</h3>
</div>
</div>
</div>
diff --git a/src/components/app-content/app-content.js
b/src/components/app-content/app-content.js
index e3dc2b7..08e79ab 100644
--- a/src/components/app-content/app-content.js
+++ b/src/components/app-content/app-content.js
@@ -13,6 +13,17 @@
self.description = ko.observable();
self.graphs = ko.observableArray([]);
+ //set this based on user settings.
+ self.userDefaultBoard = ko.observable('bigEnglishBoard');
+
+ //for now make this dummy - it should come from params/global user
settings
+ self.userBoards = ko.observableArray([
+ { name: 'Big English', component: 'bigEnglishBoard' },
+ { name: 'A/B Testing', component: 'bigEnglishBoard' },
+ { name: 'Fraud Monitoring', component: 'bigEnglishBoard' },
+ { name: 'Times Honey is Cute', component: 'bigEnglishBoard' }
+ ]);
+
self.loggedIn = ko.observable(false);
self.welcome = ko.observable('');
$.get('/user/info', function(userInfo) {
diff --git a/src/components/nav-bar/nav-bar.html
b/src/components/nav-bar/nav-bar.html
index 69844bc..1c2bcc9 100644
--- a/src/components/nav-bar/nav-bar.html
+++ b/src/components/nav-bar/nav-bar.html
@@ -7,28 +7,51 @@
<div class="row sidebar-nav navRow">
<div class="col-md-12 navRow">
- <div class="row-fluid">
- <ul>
- <li><span
id="navDefaultBoard"><i class="fa fa-dashboard"></span></i></li>
- <li><span
id="navProfileSettings"><i class="fa fa-user"></span></i></li>
- </ul>
+
+ <div class="row-fluid text-center"
id="collapseNavMenu" data-bind="click: hideNav">
+ <span id="navCollapseArrows"><i
class="fa fa-angle-double-left"></i></span>
</div>
- <div class="row-fluid">
- <ul>
- <li><span id="navFavorites"><i
class="fa fa-star-o"></span></i></li>
- <li><span id="navLibrary"><i
class="fa fa-book"></span></i></li>
- </ul>
+
+ <div class="row-fluid mainNavButtonLogin"
data-bind="visible: !loggedIn()">
+ <span class="row-fluid text-center
loginBtn">
+ <i class="fa fa-user"></i>
+ <a href="/auth/drupal">Log
in</a>
+ </span>
</div>
- <div class="row-fluid">
- <ul class="text-center"
id="collapseNavMenu" data-bind="click: hideNav">
- <span id="navCollapseArrows"><i
class="fa fa-angle-double-left"></i></span>
- </ul>
- </div>
- <div class="row-fluid text-center logoutBtn"
data-bind="visible: loggedIn">
- <a href="/logout"><button class="btn
btn-block btn-info">Log out</button></a>
- <p class="loginWelcome"><i class="fa
fa-user"></i> <span data-bind="text: welcome"></span></p>
- </div>
+
+ <span class="showProfile" data-bind="visible:
loggedIn">
+ <div class="row-fluid mainNavButton
profileLinks" data-bind="click: toggleProfileList">
+ <i class="fa fa-user"></i><span
class="loginWelcome" data-bind="text: welcome"></span>
+ </div>
+
+ <div class="hide subNavBoardOpts
subNavButton" id="profileLinks">
+ <ul>
+ <li><a
href="/logout">Log out</a></li>
+ <li><a
href="#">Profile</a></li>
+ </ul>
+ </div>
+ </span>
+
+ <span class="showNav" data-bind="visible:
loggedIn">
+ <div class="row-fluid mainNavButton
boards" data-bind="click: toggleBoardList">
+ <i class="fa
fa-pie-chart"></i><span> Boards</span>
+ </div>
+
+ <div class="hide subNavBoardOpts
subNavButton" id="boards">
+ <ul data-bind="foreach:
userBoards">
+ <li><span
data-bind="text: name"></span></li>
+ </ul>
+ </div>
+
+ <div class="mainNavButton"><i class="fa
fa-plug"></i><span> Library</span>
+ </div>
+
+ <div class="mainNavButton"><i class="fa
fa-calculator"></i><span> Reports</span>
+ </div>
+ </span>
+
</div>
</div>
</div>
</div>
+
diff --git a/src/components/nav-bar/nav-bar.js
b/src/components/nav-bar/nav-bar.js
index dcfa1c9..d0612c1 100644
--- a/src/components/nav-bar/nav-bar.js
+++ b/src/components/nav-bar/nav-bar.js
@@ -8,6 +8,7 @@
var self = this;
self.loggedIn = params.loggedIn;
self.welcome = params.welcome;
+ self.userBoards = params.userBoards;
self.hideNav = function(){
//make the nav menu fold out of view.
@@ -22,6 +23,28 @@
$('#dashApp').css('padding-left', '175px');
}, 200);
};
+
+ $('.mainNavButton').click(function(e){
+ $('.mainNavButton').removeClass('selectedSubNav');
+ if($(e.target).hasClass('mainNavButton')){
+ $(e.target).addClass('selectedSubNav');
+ } else {
+ $(e.target.parentElement).addClass('selectedSubNav');
+ }
+ });
+
+ self.toggleBoardList = function(){
+ $('#boards.subNavBoardOpts').slideDown(200, 'swing', function(){
+ $('#boards.subNavBoardOpts').toggleClass('hide');
+ });
+ };
+
+ self.toggleProfileList = function(){
+ $('#profileLinks.subNavBoardOpts').slideDown(200, 'swing',
function(){
+ $('#profileLinks.subNavBoardOpts').toggleClass('hide');
+ });
+ };
+
}
return { viewModel: NavBarViewModel, template: template };
diff --git a/src/css/style.css b/src/css/style.css
index 6cbb253..18b6d94 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -11,7 +11,7 @@
}
.container-fluid {
- padding: 15px 25px 0 0;
+ padding: 15px 65px;
}
#dashApp {
@@ -24,15 +24,15 @@
}
.navRow {
- width: 100px;
+ width: 200px;
padding:0;
margin: 0;
}
.navWrapper {
- margin-left: -100px;
- left: 100px;
- width: 100px;
+ margin-left: -200px;
+ left: 200px;
+ width: 200px;
position: fixed;
height: 100%;
overflow-y: auto;
@@ -55,18 +55,18 @@
margin-bottom: 0;
}
-.sidebar-nav li {
- font-size: 24px;
- display: inline-block;
- width: 48.5px;
- text-align: center;
- padding: .5em;
+.mainNavButton, .mainNavButtonLogin {
+ font-size: 16px;
+ font-weight: normal;
+ width: 100%;
+ text-align: left;
+ padding: 1em;
+ border-bottom: rgba(255,255,255,0.3) solid 1px;
+ overflow: hidden;
}
-.sidebar-nav li:hover, .sidebar-nav li:hover a {
- background-color: #f5f5f5;
- color: #5e668a;
- cursor: pointer;
+.mainNavButton i {
+ margin-right: 8px;
}
.sidebar-nav a {
@@ -117,28 +117,46 @@
cursor: pointer;
}
+.selectedSubNav {
+ background-color: #f5f5f5;
+ color: #5e668a;
+ cursor: pointer;
+ border-top: 1px rgba(94,102,138,0.5) solid;
+}
+
+.subNavButton {
+ background-color: rgba(255,255,255,0.5);
+ color: #5e668a;
+ cursor: pointer;
+ transition:700ms ease-in;
+}
+
+.subNavButton {
+ border-top: 1px rgba(94,102,138,0.5) solid;
+}
+
+.subNavButton a {
+ color: #5e668a;
+}
+
+.subNavBoardOpts li {
+ padding: 10px;
+ text-align: right;
+}
+
+.subNavBoardOpts li:hover {
+ background-color: rgba(94,102,138,0.2);
+}
+
#welcomeTitle {
margin-bottom: 50px;
border-bottom: 1px #555 solid;
}
-.loginWelcome > i {
- padding: 0 3px;
-}
-
-.loginWelcome {
- width: 100px;
- padding: 3px;
- background-color: rgba(255,255,255,0.4);
- overflow-wrap: break-word;
- padding: 3px;
- font-size: .8em;
-}
-
.titlebrand, .titlebrandToggle {
background-color: #d9534f;
overflow: hidden;
- padding: 8px;
+ padding: 12px;
margin: 0;
}
--
To view, visit https://gerrit.wikimedia.org/r/184422
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I15a781afdf5ecf2ccfbaf167d9f39db1b3966ab2
Gerrit-PatchSet: 5
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ssmith <[email protected]>
Gerrit-Reviewer: Ejegg <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
