Meilleure navbar

J'attends angular-ui-bootstrap pour angular 1.3 pour l'animation

Meilleure navbar
J'attends angular-ui-bootstrap pour angular 1.3 pour l'animation
Geoffrey PREUD'HOMME
1 parent f661af15
Showing 5 changed files with 31 additions and 16 deletions Show diff stats
public/css/style.css
public/js/app.js
public/js/controllers/SessionCtrl.js
public/views/index.html
public/views/membres.html
@@ -3,39 +3,49 @@ html {
 }
 body {
-    padding-top: 50px;
+    padding-top: 70px;
 }
 [data-notify="title"] {
     display: block;
 }
-#ngViewAnimationContainer {
+.ng-enter {
+    -webkit-animation: fadeInLeft 0.5s;
+    animation: fadeInLeft 0.5s;
+}
+
+.ng-leave {
+    -webkit-animation: fadeOutLeft 0.5s;
+    animation: fadeOutLeft 0.5s;
+}
+
+body > .container {
     position: relative;
 }
-[ng-view].ng-enter {
+body > .container > .ng-enter {
     position: absolute;
     -webkit-animation: zoomIn 0.5s;
     animation: zoomIn 0.5s;
 }
-[ng-view].ng-leave {
+body > .container > .ng-leave {
     position: absolute;
     -webkit-animation: fadeOutDown 0.5s;
     animation: fadeOutDown 0.5s;
 }
-#membre-list {
+table {
     width: 90%;
 }
-#membre-list .ng-enter {
+table .ng-enter {
     -webkit-animation: fadeInLeft 0.5s;
     animation: fadeInLeft 0.5s;
 }
-#membre-list .ng-leave {
+table .ng-leave {
     -webkit-animation: fadeOutLeft 0.5s;
     animation: fadeOutLeft 0.5s;
 }
-angular.module('ciApp', ['ngRoute', 'ngAnimate', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']).config(['$routeProvider', '$locationProvider',
+angular.module('ciApp', ['ngAnimate', 'ngRoute', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']).config(['$routeProvider', '$locationProvider',
     function ($routeProvider, $locationProvider) {
         $routeProvider
             .when('/', {
 angular.module('SessionsCtrl', ['SessionsServ']).controller('SessionCtrl', ['$scope', 'SessionServ',
     function ($scope, SessionServ) {
+        $scope.isCollapsed = false;
         $scope.session = SessionServ.cur;
         $scope.disconnect = function () {
             SessionServ.disconnect();
@@ -14,7 +14,6 @@
     <script src="libs/angular/angular.min.js"></script>
     <script src="libs/angular-route/angular-route.min.js"></script>
     <script src="/libs/angular-animate/angular-animate.js"></script>
-    <script src="libs/angular-bootstrap/ui-bootstrap.min.js"></script>
     <script src="libs/jsencrypt/bin/jsencrypt.min.js"></script>
     <script src="libs/remarkable-bootstrap-notify/bootstrap-notify.min.js"></script>
     <script src="libs/ladda/js/spin.js"></script>
@@ -30,17 +29,23 @@
 </head>
 <body ng-app="ciApp">
-    <div class="container">
-        <nav class="navbar navbar-default">
+        <nav class="navbar navbar-default navbar-fixed-top" ng-controller="SessionCtrl">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <a class="navbar-brand" href="/">Club Info</a>
+                    <button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
+                        <span class="sr-only">Ouvrir le menu</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
                 </div>
-                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
                     <ul class="nav navbar-nav">
                         <li><a href="/membres">Membres</a></li>
+                        <li ng-show="session"><a href="/forum">Forum</a></li>
                     </ul>
-                    <ul class="nav navbar-nav navbar-right" ng-controller="SessionCtrl">
+                    <ul class="nav navbar-nav navbar-right" id="SessionIndc">
                         <li>
                             <a ng-hide="session" href="/connect">Se connecter</a>
                             <a ng-show="session" href="#" ng-click="disconnect()">{{ session.nom }} <span class="glyphicon glyphicon-off"></span></a>
@@ -49,10 +54,9 @@
                 </div>
             </div>
         </nav>
-        <div id="ngViewAnimationContainer">
+        <div class="container" id="ngViewAnimationContainer">
             <div ng-view></div>
         </div>
-    </div>
 </body>
 </html>
@@ -4,7 +4,7 @@
             <span id="membre-qt" class="label label-info">{{ membres.length }}</span> personnes au Club Info !</h1>
         <p>Mais avec toi, ça serait encore plus sympa !</p>
     </div>
-    <table id="membre-list" class="table table-striped table-hover">
+    <table class="table table-striped table-hover">
         <thead>
             <tr>
                 <th>Nom</th>