LeClubInfo / ci-site2016

Commit 55a107898fbf50372192eda237f67a30f93eee50

Authored by Geoffrey PREUD'HOMME
1 parent f661af15

Meilleure navbar 

J'attends angular-ui-bootstrap pour angular 1.3 pour l'animation
Showing 5 changed files with 31 additions and 16 deletions   Show diff stats
Inline Side-by-side
public/css/style.css
  Show/Hide comments   View file @55a1078
... ... @@ -3,39 +3,49 @@ html {
3 3 }
4 4  
5 5 body {
6   - padding-top: 50px;
  6 + padding-top: 70px;
7 7 }
8 8  
9 9 [data-notify="title"] {
10 10 display: block;
11 11 }
12 12  
13   -#ngViewAnimationContainer {
  13 +.ng-enter {
  14 + -webkit-animation: fadeInLeft 0.5s;
  15 + animation: fadeInLeft 0.5s;
  16 +}
  17 +
  18 +.ng-leave {
  19 + -webkit-animation: fadeOutLeft 0.5s;
  20 + animation: fadeOutLeft 0.5s;
  21 +}
  22 +
  23 +body > .container {
14 24 position: relative;
15 25 }
16 26  
17   -[ng-view].ng-enter {
  27 +body > .container > .ng-enter {
18 28 position: absolute;
19 29 -webkit-animation: zoomIn 0.5s;
20 30 animation: zoomIn 0.5s;
21 31 }
22 32  
23   -[ng-view].ng-leave {
  33 +body > .container > .ng-leave {
24 34 position: absolute;
25 35 -webkit-animation: fadeOutDown 0.5s;
26 36 animation: fadeOutDown 0.5s;
27 37 }
28 38  
29   -#membre-list {
  39 +table {
30 40 width: 90%;
31 41 }
32 42  
33   -#membre-list .ng-enter {
  43 +table .ng-enter {
34 44 -webkit-animation: fadeInLeft 0.5s;
35 45 animation: fadeInLeft 0.5s;
36 46 }
37 47  
38   -#membre-list .ng-leave {
  48 +table .ng-leave {
39 49 -webkit-animation: fadeOutLeft 0.5s;
40 50 animation: fadeOutLeft 0.5s;
41 51 }
... ...
public/js/app.js
  Show/Hide comments   View file @55a1078
1   -angular.module('ciApp', ['ngRoute', 'ngAnimate', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']).config(['$routeProvider', '$locationProvider',
  1 +angular.module('ciApp', ['ngAnimate', 'ngRoute', 'SessionsCtrl', 'ConnectCtrl', 'MembreCtrl']).config(['$routeProvider', '$locationProvider',
2 2 function ($routeProvider, $locationProvider) {
3 3 $routeProvider
4 4 .when('/', {
... ...
public/js/controllers/SessionCtrl.js
  Show/Hide comments   View file @55a1078
1 1 angular.module('SessionsCtrl', ['SessionsServ']).controller('SessionCtrl', ['$scope', 'SessionServ',
2 2 function ($scope, SessionServ) {
  3 + $scope.isCollapsed = false;
3 4 $scope.session = SessionServ.cur;
4 5 $scope.disconnect = function () {
5 6 SessionServ.disconnect();
... ...
public/views/index.html
  Show/Hide comments   View file @55a1078
... ... @@ -14,7 +14,6 @@
14 14 <script src="libs/angular/angular.min.js"></script>
15 15 <script src="libs/angular-route/angular-route.min.js"></script>
16 16 <script src="/libs/angular-animate/angular-animate.js"></script>
17   - <script src="libs/angular-bootstrap/ui-bootstrap.min.js"></script>
18 17 <script src="libs/jsencrypt/bin/jsencrypt.min.js"></script>
19 18 <script src="libs/remarkable-bootstrap-notify/bootstrap-notify.min.js"></script>
20 19 <script src="libs/ladda/js/spin.js"></script>
... ... @@ -30,17 +29,23 @@
30 29 </head>
31 30  
32 31 <body ng-app="ciApp">
33   - <div class="container">
34   - <nav class="navbar navbar-default">
  32 + <nav class="navbar navbar-default navbar-fixed-top" ng-controller="SessionCtrl">
35 33 <div class="container-fluid">
36 34 <div class="navbar-header">
37 35 <a class="navbar-brand" href="/">Club Info</a>
  36 + <button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
  37 + <span class="sr-only">Ouvrir le menu</span>
  38 + <span class="icon-bar"></span>
  39 + <span class="icon-bar"></span>
  40 + <span class="icon-bar"></span>
  41 + </button>
38 42 </div>
39   - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  43 + <div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
40 44 <ul class="nav navbar-nav">
41 45 <li><a href="/membres">Membres</a></li>
  46 + <li ng-show="session"><a href="/forum">Forum</a></li>
42 47 </ul>
43   - <ul class="nav navbar-nav navbar-right" ng-controller="SessionCtrl">
  48 + <ul class="nav navbar-nav navbar-right" id="SessionIndc">
44 49 <li>
45 50 <a ng-hide="session" href="/connect">Se connecter</a>
46 51 <a ng-show="session" href="#" ng-click="disconnect()">{{ session.nom }} <span class="glyphicon glyphicon-off"></span></a>
... ... @@ -49,10 +54,9 @@
49 54 </div>
50 55 </div>
51 56 </nav>
52   - <div id="ngViewAnimationContainer">
  57 + <div class="container" id="ngViewAnimationContainer">
53 58 <div ng-view></div>
54 59 </div>
55   - </div>
56 60 </body>
57 61  
58 62 </html>
... ...
public/views/membres.html
  Show/Hide comments   View file @55a1078
... ... @@ -4,7 +4,7 @@
4 4 <span id="membre-qt" class="label label-info">{{ membres.length }}</span> personnes au Club Info !</h1>
5 5 <p>Mais avec toi, ça serait encore plus sympa !</p>
6 6 </div>
7   - <table id="membre-list" class="table table-striped table-hover">
  7 + <table class="table table-striped table-hover">
8 8 <thead>
9 9 <tr>
10 10 <th>Nom</th>
... ...