dashboard topbar improvement

sails/src/assets/scripts/modules/supervisor/controllers/supervisor.js

@@ -28,6 +28,10 @@ dashboardControllers.controller('SupervisorCtrl', function SupervisorCtrl(
     $location.path('/setup');
     $location.path('/setup');
   };
   };
 
 
+  $scope.isActive = function (viewLocation) {
+    return viewLocation === $location.path();
+  };
+
   // Subscribe to the supervisor's room
   // Subscribe to the supervisor's room
   IOService.post('/sup/subscribe', {
   IOService.post('/sup/subscribe', {
     action: 'subscribe',
     action: 'subscribe',

sails/src/assets/scripts/modules/supervisor/views/header.html

 <nav
 <nav
   class="topbar navbar navbar-default"
   class="topbar navbar navbar-default"
   role="navigation">
   role="navigation">
-  <div class="container-fluid">
+  <div class="container">
     <div class="navbar-header">
     <div class="navbar-header">
       <a
       <a
         class="topbar__logo navbar-brand"
         class="topbar__logo navbar-brand"
@@ -15,17 +15,17 @@
     </div>
     </div>
     <div class="collapse navbar-collapse">
     <div class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
       <ul class="nav navbar-nav">
-        <li ng-class="{active: $location.url() == '/students'}">
+        <li ng-class="{active: isActive('/students')}">
           <a href="/app/#/students">
           <a href="/app/#/students">
             <i class="fa fa-users" aria-hidden="true"></i> {{ 'students' | translate }}
             <i class="fa fa-users" aria-hidden="true"></i> {{ 'students' | translate }}
           </a>
           </a>
         </li>
         </li>
-        <li ng-if="user.isOffice" ng-class="{active: $location.url() == '/supervisor/list'}">
+        <li ng-if="user.isOffice" ng-class="{active: isActive('/supervisor/list')}">
           <a class="pointer" role="menuitem" tabindex="0" href="/app/#/supervisor/list">
           <a class="pointer" role="menuitem" tabindex="0" href="/app/#/supervisor/list">
             <i class="fa fa-users" aria-hidden="true"></i> {{ 'supervisors' | translate }}
             <i class="fa fa-users" aria-hidden="true"></i> {{ 'supervisors' | translate }}
           </a>
           </a>
         </li>
         </li>
-        <li ng-if="!user.isTutor" ng-class="{active: $location.url() == '/instructions'}">
+        <li ng-if="!user.isTutor" ng-class="{active: isActive('/instructions')}">
           <a href="/app/#/instructions">
           <a href="/app/#/instructions">
             <i class="glyphicon glyphicon-tasks" aria-hidden="true"></i> {{ 'instructions' | translate }}
             <i class="glyphicon glyphicon-tasks" aria-hidden="true"></i> {{ 'instructions' | translate }}
           </a>
           </a>

sails/src/assets/scripts/modules/supervisor/views/supervisor.html

 <!-- SupervisorCtrl controls here, see app.js -->
 <!-- SupervisorCtrl controls here, see app.js -->
+<header-supervisor></header-supervisor>
 <div class="container">
 <div class="container">
-
-    <header-supervisor></header-supervisor>
-
     <!-- The content -->
     <!-- The content -->
     <div ui-view id="main-content"></div>
     <div ui-view id="main-content"></div>
 </div>
 </div>

sails/src/assets/styles/main.css

@@ -1198,3 +1198,10 @@ input.editable.scene-name {
   position:absolute;
   position:absolute;
   width:100%
   width:100%
 }
 }
+
+.navbar-nav{
+	margin-left: 1em;
+}
+.navbar-default .navbar-nav > .active > a{
+	border-radius: .4em;
+}

sails/src/assets/styles/topbar.less

@@ -3,10 +3,12 @@
  * a supervisor has logged in.
  * a supervisor has logged in.
  */
  */
 .topbar {
 .topbar {
-  padding: 0.5em;
+  /*padding: 0.5em;
   border-top: none;
   border-top: none;
   border-top-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-right-radius: 0;*/
+  padding: 0.7em;
+  border-radius: none;
 
 
   &__logo {
   &__logo {
   	width: 5rem;
   	width: 5rem;