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 | 24 | |
| 25 | 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 | 34 | ## [0.3.pre-2] - 2021-04-21 - Display ETP |
| 28 | 35 | ### Changed |
| 29 | 36 | Chart now displays charge in ETP base 1 (was base 100 ) | ... | ... |
VERSION.txt
app/main/static/css/charges.css
app/main/static/js/charges.js
| ... | ... | @@ -6,9 +6,9 @@ function build_chart(div_selector, data_url, entity_name, category_type) { |
| 6 | 6 | |
| 7 | 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 | 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 | 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 | 17 | |
| 18 | 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 | 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 | 134 | |
| 132 | 135 | var addlegend = function (color_scale) { |
| 133 | 136 | |
| 137 | + // add horizontal legend | |
| 134 | 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 | 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 | 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 | 193 | function draw_categories_grouped(data, categories) { | ... | ... |
app/static/css/style.css
| ... | ... | @@ -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 { | ... | ... |
| ... | ... | @@ -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 | </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> | ... | ... |