Commit ca2f26ea10c4133aac1d5d6aa4c321dd7c5cc014
Exists in
master
and in
4 other branches
Nicer pages
Showing
7 changed files
with
151 additions
and
59 deletions
Show diff stats
CHANGELOG.md
@@ -24,6 +24,13 @@ or major refactoring improvments. | @@ -24,6 +24,13 @@ or major refactoring improvments. | ||
24 | 24 | ||
25 | ## Unreleased | 25 | ## Unreleased |
26 | 26 | ||
27 | +## [0.3.pre-3] - 2021-04-20 - Nicer display | ||
28 | +### New | ||
29 | +Left menu shows active page | ||
30 | + | ||
31 | +### Changed | ||
32 | +Chart legend on bottom | ||
33 | + | ||
27 | ## [0.3.pre-2] - 2021-04-21 - Display ETP | 34 | ## [0.3.pre-2] - 2021-04-21 - Display ETP |
28 | ### Changed | 35 | ### Changed |
29 | Chart now displays charge in ETP base 1 (was base 100 ) | 36 | Chart now displays charge in ETP base 1 (was base 100 ) |
VERSION.txt
app/main/static/css/charges.css
@@ -28,9 +28,10 @@ | @@ -28,9 +28,10 @@ | ||
28 | stroke-width: 0px; | 28 | stroke-width: 0px; |
29 | } | 29 | } |
30 | 30 | ||
31 | -#charge_table{ | 31 | +#charge_table, .charge_chart{ |
32 | width: 95%; | 32 | width: 95%; |
33 | } | 33 | } |
34 | + | ||
34 | #charge_table, | 35 | #charge_table, |
35 | #charge_table th, | 36 | #charge_table th, |
36 | #charge_table td { | 37 | #charge_table td { |
app/main/static/js/charges.js
@@ -6,9 +6,9 @@ function build_chart(div_selector, data_url, entity_name, category_type) { | @@ -6,9 +6,9 @@ function build_chart(div_selector, data_url, entity_name, category_type) { | ||
6 | 6 | ||
7 | const main_elt = document.getElementById("main") | 7 | const main_elt = document.getElementById("main") |
8 | 8 | ||
9 | - const margin = {top: 60, right: 350, bottom: 100, left: 90}, | 9 | + const margin = {top: 60, right: 150, bottom: 200, left: 90}, |
10 | width = main_elt.offsetWidth * 0.95 - margin.left - margin.right, | 10 | width = main_elt.offsetWidth * 0.95 - margin.left - margin.right, |
11 | - height = 500 - margin.top - margin.bottom; | 11 | + height = 600 - margin.top - margin.bottom; |
12 | 12 | ||
13 | const height_ratio = 1.2; // how murch room to give above chart for lisibility | 13 | const height_ratio = 1.2; // how murch room to give above chart for lisibility |
14 | 14 | ||
@@ -17,8 +17,11 @@ function build_chart(div_selector, data_url, entity_name, category_type) { | @@ -17,8 +17,11 @@ function build_chart(div_selector, data_url, entity_name, category_type) { | ||
17 | 17 | ||
18 | const y_ticks_num = 5 // dont show to many y ticks for lisibility | 18 | const y_ticks_num = 5 // dont show to many y ticks for lisibility |
19 | 19 | ||
20 | - const legend_cell_size = 15; // size of legend colored scare | ||
21 | - const legend_x = width + 20; // begin legend a bit after the end of the chart | 20 | + const legendRectSize = 15; // size of rectangle in legend |
21 | + | ||
22 | + // const legend_cell_size = 15; // size of legend colored scare | ||
23 | + // const legend_x = width + 20; // begin legend a bit after the end of the chart | ||
24 | + // const legend_y = 600 - margin.bottom + 20; // begin legend a bit after the end of the chart | ||
22 | 25 | ||
23 | const dot_radius = 6; // size of total line dot | 26 | const dot_radius = 6; // size of total line dot |
24 | 27 | ||
@@ -131,28 +134,60 @@ function build_chart(div_selector, data_url, entity_name, category_type) { | @@ -131,28 +134,60 @@ function build_chart(div_selector, data_url, entity_name, category_type) { | ||
131 | 134 | ||
132 | var addlegend = function (color_scale) { | 135 | var addlegend = function (color_scale) { |
133 | 136 | ||
137 | + // add horizontal legend | ||
134 | let reverse_keys = color_scale.domain().reverse(); | 138 | let reverse_keys = color_scale.domain().reverse(); |
139 | + var legendSpacing = 5; | ||
135 | 140 | ||
136 | - let legend = svg.append('g') | ||
137 | - .attr('transform', 'translate(' + legend_x + ', -30)'); | 141 | + var legendWrap = svg.append('g') |
142 | + .attr('width', '100%') | ||
143 | + .attr('class', 'legendwrap'); | ||
138 | 144 | ||
139 | - legend.selectAll() | 145 | + var legend = svg.select('.legendwrap').selectAll('.legend') |
140 | .data(reverse_keys) | 146 | .data(reverse_keys) |
141 | - .enter().append('rect') | ||
142 | - .attr('height', legend_cell_size + 'px') | ||
143 | - .attr('width', legend_cell_size + 'px') | ||
144 | - .attr('class', 'legend') | ||
145 | - .attr('x', 5) | ||
146 | - .attr('y', (d, i) => i * legend_cell_size) | ||
147 | - .style("fill", d => color_scale(d)); | 147 | + .enter() |
148 | + .append('g') | ||
149 | + .attr('class', 'legend'); | ||
148 | 150 | ||
149 | - legend.selectAll() | ||
150 | - .data(reverse_keys) | ||
151 | - .enter().append('text') | ||
152 | - .attr("transform", (d, i) => "translate(30, " + (i * legend_cell_size + legend_cell_size / 1.6) + ")") | 151 | + legend.append('rect') |
152 | + .attr('width', legendRectSize) | ||
153 | + .attr('height', legendRectSize) | ||
154 | + .style('fill', color_scale) | ||
155 | + .style('stroke', color_scale); | ||
156 | + | ||
157 | + legend.append('text') | ||
153 | .attr('class', 'legend') | 158 | .attr('class', 'legend') |
154 | - .style("fill", "black") | ||
155 | - .text(d => d); | 159 | + .attr('x', legendRectSize + legendSpacing * 1.5) |
160 | + .attr('y', 13) | ||
161 | + .text(function(d) { | ||
162 | + return d; | ||
163 | + }); | ||
164 | + | ||
165 | + var ypos = 0, | ||
166 | + newxpos = 0, | ||
167 | + maxwidth = 0, | ||
168 | + xpos; | ||
169 | + | ||
170 | + legend | ||
171 | + .attr("transform", function(d, i) { | ||
172 | + var length = d3.select(this).select("text").node().getComputedTextLength() + 40; | ||
173 | + xpos = newxpos; | ||
174 | + if (width < xpos + length) { | ||
175 | + newxpos = xpos = 0; | ||
176 | + ypos += 30; | ||
177 | + } | ||
178 | + newxpos += length; | ||
179 | + if (newxpos > maxwidth) maxwidth = newxpos; | ||
180 | + | ||
181 | + return 'translate(' + xpos + ',' + ypos + ')'; | ||
182 | + | ||
183 | + }); | ||
184 | + | ||
185 | + | ||
186 | + legendWrap | ||
187 | + .attr("transform", function(d, i) { | ||
188 | + return "translate(0 ," + (height + 100) + ")"; | ||
189 | + }); | ||
190 | + | ||
156 | } | 191 | } |
157 | 192 | ||
158 | function draw_categories_grouped(data, categories) { | 193 | function draw_categories_grouped(data, categories) { |
app/static/css/style.css
@@ -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 { |
@@ -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
@@ -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> |