Ssmith has uploaded a new change for review.
https://gerrit.wikimedia.org/r/184422
Change subject: sidebar nav changes
......................................................................
sidebar nav changes
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, 105 insertions(+), 54 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/22/184422/1
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..79f1a40 100644
--- a/src/components/app-content/app-content.html
+++ b/src/components/app-content/app-content.html
@@ -4,10 +4,7 @@
<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..53cde44 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..c2f670e 100644
--- a/src/components/nav-bar/nav-bar.html
+++ b/src/components/nav-bar/nav-bar.html
@@ -7,28 +7,38 @@
<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 mainNavButton">
+ <i class="fa fa-user"></i>
+ <span class="row-fluid text-center
logoutBtn" data-bind="if: loggedIn">
+ <a href="/logout"><span
class="loginWelcome" data-bind="text: welcome"></span></a>
+ </span>
+ <span class="row-fluid text-center
loginBtn" data-bind="if: !loggedIn()">
+ <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="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">
+ <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..8accfd1 100644
--- a/src/components/nav-bar/nav-bar.js
+++ b/src/components/nav-bar/nav-bar.js
@@ -9,6 +9,14 @@
self.loggedIn = params.loggedIn;
self.welcome = params.welcome;
+ //for now make this dummy - it should come from params/global user
settings
+ self.userBoards = ko.observableArray([
+ { name: "Big English" },
+ { name: "A/B Testing" },
+ { name: "Fraud Monitoring" },
+ { name: "Times Honey is Cute" },
+ ]);
+
self.hideNav = function(){
//make the nav menu fold out of view.
$('#navContainer .navWrapper').toggleClass('hide');
@@ -22,6 +30,16 @@
$('#dashApp').css('padding-left', '175px');
}, 200);
};
+
+ $('.mainNavButton').click(function(e){
+ $('.mainNavButton').removeClass('selectedSubNav');
+ $(e.target).addClass('selectedSubNav');
+ });
+
+ self.toggleBoardList = function(){
+ $('.subNavBoardOpts').toggleClass('hide');
+ };
+
}
return { viewModel: NavBarViewModel, template: template };
diff --git a/src/css/style.css b/src/css/style.css
index 6cbb253..06e637e 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 {
+ 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,44 @@
cursor: pointer;
}
+.selectedSubNav {
+ background-color: #f5f5f5;
+ color: #5e668a;
+ cursor: pointer;
+}
+
+.mainNavButton:hover, .subNavButton {
+ background-color: #f5f5f5;
+ color: #5e668a;
+ cursor: pointer;
+}
+
+.subNavButton {
+ border-top: 1px rgba(94,102,138,0.2) solid;
+}
+
+.mainNavButton:hover, .selectedSubNav a, .mainNavButton:hover 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: newchange
Gerrit-Change-Id: I15a781afdf5ecf2ccfbaf167d9f39db1b3966ab2
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ssmith <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
