PDC-IRAP / pdc-web

Commit ef5fae02e63876ea5516d9f97ca526b271c0eea7

Authored by Anais Amato
Committed by hitier
1 parent 46227d23
Exists in master and in 4 other branches Develop, TEST, dev, othauvin

Update navbar showing active page 

color the menu items and leave them visible
Showing 3 changed files with 86 additions and 37 deletions   Show diff stats
Inline Side-by-side
app/static/css/style.css
  Diff comments   View file @ef5fae0
@@ -58,6 +58,10 @@ nav.sidebar a.disabled { @@ -58,6 +58,10 @@ nav.sidebar a.disabled {
58 border-bottom: 1px solid #ddd 58 border-bottom: 1px solid #ddd
59 } 59 }
60 60
  61 +.sublink_activate {
  62 + border-left: 5px solid #00c5ff;;
  63 + background-color: #e3e3e3;
  64 +}
61 /* -- - - - - - - - - - per site icon settings - - - - - - - - - -- */ 65 /* -- - - - - - - - - - per site icon settings - - - - - - - - - -- */
62 66
63 .admin-icon { 67 .admin-icon {
app/static/js/navbar.js 0 → 100644
  Diff comments   View file @ef5fae0
@@ -0,0 +1,40 @@ @@ -0,0 +1,40 @@
  1 +// Script used with the navbar to color the menu items and leave them visible
  2 +
  3 +
  4 +// Check if an element of the navbar is stored in the local storage or not
  5 +var collapseItem_ul = localStorage.getItem('collapseItem_ul');
  6 +var collapseItem_a = localStorage.getItem('collapseItem_a');
  7 +
  8 +//
  9 +var sublink_activate = $("a[href='" + collapseItem_a + "']");
  10 +sublink_activate.addClass("sublink_activate");
  11 +
  12 +$("#" + collapseItem_ul).addClass("show");
  13 +
  14 +
  15 +//store the id of the collapsible element
  16 +$('.main-nav').click(function () {
  17 + localStorage.setItem('collapseItem_ul', $(this).next().attr("id"));
  18 +});
  19 +$('.sub_link').click(function (e) {
  20 + localStorage.setItem('collapseItem_a', $(this).attr("href"));
  21 +})
  22 +
  23 +
  24 +// a click to the connection bar or 'accueil' button desactivate the localstorage
  25 +$('.link_connect').click(function() {
  26 + $("#" + collapseItem_ul).removeClass("show");
  27 + $("#" + collapseItem_ul).addClass("hide");
  28 + sublink_activate.removeClass("sublink_activate");
  29 + localStorage.removeItem('collapseItem_ul');
  30 + localStorage.removeItem('collapseItem_a');
  31 +
  32 +});
  33 +$("#accueil").click(function (){
  34 + $("#" + collapseItem_ul).removeClass("show");
  35 + $("#" + collapseItem_ul).addClass("hide");
  36 + sublink_activate.removeClass("sublink_activate");
  37 + localStorage.removeItem('collapseItem_ul');
  38 + localStorage.removeItem('collapseItem_a');
  39 +});
  40 +
app/templates/base_page.html
  Diff comments   View file @ef5fae0
@@ -8,8 +8,9 @@ @@ -8,8 +8,9 @@
8 </head> 8 </head>
9 <body> 9 <body>
10 <nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg p-1"> 10 <nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg p-1">
11 - <a class="navbar-brand col-sm-3 col-md-2 " href="{{url_for('main.index')}}"> 11 + <a id="accueil" class="navbar-brand col-sm-3 col-md-2 " href="{{url_for('main.index')}}">
12 <img class="m-0 mr-1 {{config.PDC_SITE_CLASS}}" src="{{ url_for('static', filename='img/pdc-ico.png', version=config.VERSION) }}" height="30" width="30"/> 12 <img class="m-0 mr-1 {{config.PDC_SITE_CLASS}}" src="{{ url_for('static', filename='img/pdc-ico.png', version=config.VERSION) }}" height="30" width="30"/>
  13 +
13 {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a> 14 {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a>
14 <ul class="navbar-nav ml-auto"> 15 <ul class="navbar-nav ml-auto">
15 {% if not current_user.is_anonymous %} 16 {% if not current_user.is_anonymous %}
@@ -17,11 +18,11 @@ @@ -17,11 +18,11 @@
17 <span class="navbar-brand">{{current_user.name}}</span> 18 <span class="navbar-brand">{{current_user.name}}</span>
18 </li> 19 </li>
19 <li class="nav-item text-nowrap"> 20 <li class="nav-item text-nowrap">
20 - <a class="nav-link" href="{{ url_for('auth.logout') }}">Déconnexion</a> 21 + <a class="nav-link link_connect" href="{{ url_for('auth.logout') }}">Déconnexion</a>
21 </li> 22 </li>
22 {% else %} 23 {% else %}
23 <li class="nav-item text-nowrap"> 24 <li class="nav-item text-nowrap">
24 - <a class="nav-link" href="{{ url_for('auth.login') }}">Connexion</a> 25 + <a class="nav-link link_connect" href="{{ url_for('auth.login') }}">Connexion</a>
25 </li> 26 </li>
26 {% endif %} 27 {% endif %}
27 </ul> 28 </ul>
@@ -39,78 +40,78 @@ @@ -39,78 +40,78 @@
39 </a> 40 </a>
40 </li> 41 </li>
41 <li class="nav-item"> 42 <li class="nav-item">
42 - <a aria-expanded="false" class="nav-link" data-target="#agent" data-toggle="collapse" href="#"> 43 + <a aria-expanded="false" id="agents" class="main-nav nav-link" data-target="#agent" data-toggle="collapse" href="#">
43 <span data-feather="user"></span> 44 <span data-feather="user"></span>
44 Agent 45 Agent
45 </a> 46 </a>
46 <ul aria-expanded="false" class="collapse" class="nav" data-parent="#v_menu" id="agent"> 47 <ul aria-expanded="false" class="collapse" class="nav" data-parent="#v_menu" id="agent">
47 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.agents')}}">Liste des agents</a> 48 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.agents')}}">Liste des agents</a>
48 </li> 49 </li>
49 - <li class="nav-item"><a class="nav-link disabled" href="#">Statistiques</a></li>  
50 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des responsabilités</a></li>  
51 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.capacities')}}">Liste des fonctions</a> 50 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Statistiques</a></li>
  51 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des responsabilités</a></li>
  52 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.capacities')}}">Liste des fonctions</a>
52 </li> 53 </li>
53 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des compétences</a></li>  
54 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des pôles</a></li>  
55 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des emplois types</a></li> 54 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des compétences</a></li>
  55 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des pôles</a></li>
  56 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des emplois types</a></li>
56 </ul> 57 </ul>
57 </li> 58 </li>
58 <li class="nav-item"> 59 <li class="nav-item">
59 - <a aria-expanded="false" class="nav-link" data-target="#projet" data-toggle="collapse" href="#"> 60 + <a aria-expanded="false" class="main-nav nav-link" data-target="#projet" data-toggle="collapse" href="#">
60 <span data-feather="file"></span> 61 <span data-feather="file"></span>
61 Projet 62 Projet
62 </a> 63 </a>
63 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="projet"> 64 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="projet">
64 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.projects')}}">Liste des projets</a></li>  
65 - <li class="nav-item"><a class="nav-link disabled" href="#">Statistiques</a></li>  
66 - <li class="nav-item"><a class="nav-link disabled" href="#">Listes des domaines</a></li>  
67 - <li class="nav-item"><a class="nav-link disabled" href="#">Listes des statuts de projets</a></li> 65 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.projects')}}">Liste des projets</a></li>
  66 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Statistiques</a></li>
  67 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Listes des domaines</a></li>
  68 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Listes des statuts de projets</a></li>
68 </ul> 69 </ul>
69 </li> 70 </li>
70 <li class="nav-item"> 71 <li class="nav-item">
71 - <a aria-expanded="false" class="nav-link" data-target="#service" data-toggle="collapse" href="#"> 72 + <a aria-expanded="false" class="main-nav nav-link" data-target="#service" data-toggle="collapse" href="#">
72 <span data-feather="home"></span> 73 <span data-feather="home"></span>
73 Service 74 Service
74 </a> 75 </a>
75 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="service"> 76 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="service">
76 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.services')}}">Liste des services</a> 77 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.services')}}">Liste des services</a>
77 </li> 78 </li>
78 - <li class="nav-item"><a class="nav-link disabled" href="#">Statistiques</a></li> 79 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Statistiques</a></li>
79 </ul> 80 </ul>
80 </li> 81 </li>
81 <li class="nav-item"> 82 <li class="nav-item">
82 - <a aria-expanded="false" class="nav-link" data-target="#cds" data-toggle="collapse" href="#"> 83 + <a aria-expanded="false" class="main-nav nav-link" data-target="#cds" data-toggle="collapse" href="#">
83 <span data-feather="users"></span> 84 <span data-feather="users"></span>
84 Chef de service 85 Chef de service
85 </a> 86 </a>
86 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="cds"> 87 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="cds">
87 - <li class="nav-item"><a class="nav-link disabled" href="#">Renseigner le statut d'un agent pour un 88 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Renseigner le statut d'un agent pour un
88 semestre</a></li> 89 semestre</a></li>
89 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.charge_add')}}">Affecter un agent à un 90 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.charge_add')}}">Affecter un agent à un
90 projet/service</a></li> 91 projet/service</a></li>
91 - <li class="nav-item"><a class="nav-link disabled" href="#">Création agent virtuel</a></li>  
92 - <li class="nav-item"><a class="nav-link disabled" href="#">Charge totale des agents</a></li>  
93 - <li class="nav-item"><a class="nav-link disabled" href="#">Détails des charges</a></li>  
94 - <li class="nav-item"><a class="nav-link disabled" href="#">Graphiques personnalisés</a></li> 92 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Création agent virtuel</a></li>
  93 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Charge totale des agents</a></li>
  94 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Détails des charges</a></li>
  95 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Graphiques personnalisés</a></li>
95 </ul> 96 </ul>
96 </li> 97 </li>
97 <li class="nav-item"> 98 <li class="nav-item">
98 - <a aria-expanded="false" class="nav-link" data-target="#admin" data-toggle="collapse" href="#"> 99 + <a aria-expanded="false" class="main-nav nav-link" data-target="#admin" data-toggle="collapse" href="#">
99 <span data-feather="settings"></span> 100 <span data-feather="settings"></span>
100 Administrateur 101 Administrateur
101 </a> 102 </a>
102 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="admin"> 103 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="admin">
103 104
104 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau projet</a></li>  
105 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau service</a></li>  
106 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouvelle compétence</a></li>  
107 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouvelle fonction</a></li>  
108 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau domaine</a></li>  
109 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouvelle responsabilité</a></li>  
110 - <li class="nav-item"><a class="nav-link disabled" href="#">Affecter un responsable de projet</a></li>  
111 - <li class="nav-item"><a class="nav-link disabled" href="#">Affecter un responsable de service</a></li>  
112 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.periods')}}">Liste des périodes</a></li>  
113 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau semestre</a></li> 105 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau projet</a></li>
  106 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau service</a></li>
  107 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouvelle compétence</a></li>
  108 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouvelle fonction</a></li>
  109 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau domaine</a></li>
  110 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouvelle responsabilité</a></li>
  111 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Affecter un responsable de projet</a></li>
  112 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Affecter un responsable de service</a></li>
  113 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.periods')}}">Liste des périodes</a></li>
  114 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau semestre</a></li>
114 115
115 </ul> 116 </ul>
116 </li> 117 </li>
@@ -138,7 +139,11 @@ @@ -138,7 +139,11 @@
138 <script> 139 <script>
139 feather.replace() 140 feather.replace()
140 </script> 141 </script>
  142 +
  143 + <script type="text/javascript" src="{{ url_for('static', filename='js/navbar.js', version=config.VERSION) }}"></script>
  144 +
141 {% block more_scripts %} 145 {% block more_scripts %}
142 {% endblock %} 146 {% endblock %}
  147 +
143 </body> 148 </body>
144 </html> 149 </html>