All pages except listen page are fixed width, matching the baw-server…

… pages Angualr root sets property on the scope, then conditional class attribute on content wrapper is determined by this property. To set the pages that should be full width liquid or fixed width, add the 'fullWidth' propery to the route config.
QutEcoacoustics · Sep 11, 2014 · d92b5b1 · d92b5b1
1 parent 5a3de5d
commit d92b5b1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/src/app/app.js b/src/app/app.js
@@ -128,7 +128,7 @@ var app = angular.module('baw',
                           {templateUrl: '/assets/recording.html', controller: 'RecordingCtrl' }).
 
                      when('/listen', {templateUrl: paths.site.files.listen, controller: 'ListenCtrl', title: 'Listen'}).
-                     when('/listen/:recordingId', {templateUrl: paths.site.files.listen, controller: 'ListenCtrl', title: ':recordingId'}).
+                     when('/listen/:recordingId', {templateUrl: paths.site.files.listen, controller: 'ListenCtrl', title: ':recordingId', fullWidth: true}).
                      //when('/listen/:recordingId/start=:start/end=:end', {templateUrl: paths.site.files.listen, controller: 'ListenCtrl'}).
 
                      when('/accounts', {templateUrl: '/assets/accounts_sign_in.html', controller: 'AccountsCtrl'}).
@@ -266,6 +266,11 @@ var app = angular.module('baw',
                   $location.path('/404?path=');
               });
 
+              //https://docs.angularjs.org/api/ngRoute/service/$route
+              $rootScope.$on("$routeChangeSuccess", function (event, current, previous, rejection) {
+                  $rootScope.fullWidth = $route.current.$$route.fullWidth;
+              });
+
               // reload a view and controller (shortcut for full page refresh)
               $rootScope.$reloadView = function () {
                   $route.reload();
@@ -328,5 +333,8 @@ var app = angular.module('baw',
                      $scope.activePath = function activePath(pathFragment) {
                          return $location.path().indexOf(pathFragment) != -1;
                      };
+                     $scope.getWidth = function () {
+                         return ($scope.$parent.fullWidth ? 'container-liquid' : 'container');
+                     }
 
                  }]);
diff --git a/src/index.html b/src/index.html
@@ -22,15 +22,18 @@
 <body baw-auth class="waiting-for-angular">
 
     <nav class="navbar navbar-inverse navbar-fixed-top">
-        <div class="navbar-header">
+        <div class="navbar-inner">
+            <div class="container">
+
             <button type="button" class="navbar-toggle" data-toggle="collapse">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
+
             <a class="navbar-brand" ng-href="{{paths.api.links.homeAbsolute}}" target="_self">Bioacoustics Workbench</a>
-        </div>
+
 
         <div class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
@@ -69,6 +72,9 @@
             </ul>
         </div>
 
+        </div>
+        </div>
+
     </nav>
 
     <!--<div id="login-holder">-->
@@ -138,9 +144,35 @@
         <!--</div>-->
     <!--</div>-->
 
-    <navigation ng-controller="NavigationCtrl"></navigation>
-    <!-- each view must specify the controller they use -->
-    <div id="content-wrapper" class="container-liquid" ng-view></div>
+    <div ng-class="{ 'container-liquid': fullWidth, 'container': !fullWidth }">
+        <div class="row-fluid">
+            <navigation ng-controller="NavigationCtrl"></navigation>
+        </div>
+
+        <div class="row-fluid">
+            <!-- each view must specify the controller they use -->
+            <div id="content-wrapper" class="container-liquid" ng-view></div>
+        </div>
+    </div>
+
+    <footer ng-class="{ 'container-liquid': fullWidth, 'container': !fullWidth }">
+        <ul class="nav nav-pills">
+            <li class="disabled">
+                <a data-original-title="" title="">
+                    © QUT
+                    2014
+                </a>
+            </li>
+            <li class="disabled">
+                <a data-original-title="" title="">staging ver 0.10.0</a>
+            </li>
+            <li><a href="/website_status" data-original-title="" title="">Statistics</a></li>
+            <li><a href="/contact_us" data-original-title="" title="">Contact Us</a></li>
+            <li><a href="/disclaimers" data-original-title="" title="">Disclaimers</a></li>
+            <li><a href="/credits" data-original-title="" title="">Credits</a></li>
+            <li><a href="/ethics_statement" data-original-title="" title="">Ethics Statement</a></li>
+        </ul>
+    </footer>
 
 </body>
 </html>