[fixes #388] Adds active class to top nav

codefordurham · May 31, 2017 · 230fcc1 · 230fcc1
1 parent 3dc76d6
commit 230fcc1
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/frontend/app/app.js b/frontend/app/app.js
@@ -398,7 +398,10 @@ angular.module('SchoolsApp.directives', [])
     .directive('simpleNav', [function() {
         return {
             restrict: 'AE',
-            templateUrl: 'app/templates/simpleNav.html'
+            templateUrl: 'app/templates/simpleNav.html',
+            scope: {
+              'activeTab': '@'
+            }
         }
     }])
     .directive('search', [function() {

diff --git a/frontend/app/templates/about.html b/frontend/app/templates/about.html
@@ -1,4 +1,4 @@
-<simple-nav></simple-nav>
+<simple-nav active-tab="about"></simple-nav>
 
 <div class="container">
 <h1>About Us</h1>

diff --git a/frontend/app/templates/map.html b/frontend/app/templates/map.html
@@ -1,4 +1,4 @@
-<simple-nav class="content-row" id="simple-nav"></simple-nav>
+<simple-nav class="content-row" id="simple-nav" active-tab="map"></simple-nav>
 
 <leaflet class="content-row" id="leaflet-map" legend="legend" defaults="defaults" center="durham" maxbounds="durham.maxbounds" event-broadcast="events" geojson="geojson" markers="markers" tiles="tiles"></leaflet>
 

diff --git a/frontend/app/templates/navigating.html b/frontend/app/templates/navigating.html
@@ -1,4 +1,4 @@
-<simple-nav></simple-nav>
+<simple-nav active-tab="guide"></simple-nav>
 
 <div class="container">
 <h1><center>My Public School Choices</center></h1>

diff --git a/frontend/app/templates/schools.html b/frontend/app/templates/schools.html
@@ -1,4 +1,4 @@
-<simple-nav></simple-nav>
+<simple-nav active-tab="schools"></simple-nav>
 
 <div class="container">
     <div class="row">

diff --git a/frontend/app/templates/simpleNav.html b/frontend/app/templates/simpleNav.html
@@ -17,10 +17,10 @@ <h1 class='name'>Durham School Navigator <small><span class="label label-info">A
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav navbar-right">
-        <li><a href="#/">Map</a></li>
-        <li><a href="#about">About</a></li>
-        <li><a href="#navigating">School Guide</a></li>
-        <li><a href="#schools">Schools</a></li>
+        <li ng-class="{active: activeTab == 'map'}"><a href="#/">Map</a></li>
+        <li ng-class="{active: activeTab == 'about'}"><a href="#about">About</a></li>
+        <li ng-class="{active: activeTab == 'guide'}"><a href="#navigating">School Guide</a></li>
+        <li ng-class="{active: activeTab == 'schools'}"><a href="#schools">Schools</a></li>
       </ul>
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->