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 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 65 /* -- - - - - - - - - - per site icon settings - - - - - - - - - -- */
62 66  
63 67 .admin-icon {
... ...
app/static/js/navbar.js 0 → 100644
  Diff comments   View file @ef5fae0
... ... @@ -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 </head>
9 9 <body>
10 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 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 14 {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a>
14 15 <ul class="navbar-nav ml-auto">
15 16 {% if not current_user.is_anonymous %}
... ... @@ -17,11 +18,11 @@
17 18 <span class="navbar-brand">{{current_user.name}}</span>
18 19 </li>
19 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 22 </li>
22 23 {% else %}
23 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 26 </li>
26 27 {% endif %}
27 28 </ul>
... ... @@ -39,78 +40,78 @@
39 40 </a>
40 41 </li>
41 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 44 <span data-feather="user"></span>
44 45 Agent
45 46 </a>
46 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 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 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 57 </ul>
57 58 </li>
58 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 61 <span data-feather="file"></span>
61 62 Projet
62 63 </a>
63 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 69 </ul>
69 70 </li>
70 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 73 <span data-feather="home"></span>
73 74 Service
74 75 </a>
75 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 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 80 </ul>
80 81 </li>
81 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 84 <span data-feather="users"></span>
84 85 Chef de service
85 86 </a>
86 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 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 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 96 </ul>
96 97 </li>
97 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 100 <span data-feather="settings"></span>
100 101 Administrateur
101 102 </a>
102 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 116 </ul>
116 117 </li>
... ... @@ -138,7 +139,11 @@
138 139 <script>
139 140 feather.replace()
140 141 </script>
  142 +
  143 + <script type="text/javascript" src="{{ url_for('static', filename='js/navbar.js', version=config.VERSION) }}"></script>
  144 +
141 145 {% block more_scripts %}
142 146 {% endblock %}
  147 +
143 148 </body>
144 149 </html>
... ...