Commit 8952e278 authored by Lionel DURAND's avatar Lionel DURAND
Browse files

20220325_amelioration_calcul_besoins_et_navigation_carto

parents e4c54ed8 34b96724
context("Test de vérification des couleurs des territoires après un changement d'échelle territoriale", () => {
const COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES = '#d7d7d7';
const COULEUR_TERRITOIRE_NOTE_0 = '#9b0000';
const COULEUR_TERRITOIRE_NOTE_3 = '#d05c2d';
const COULEUR_TERRITOIRE_NOTE_5 = '#f2994a';
const COULEUR_TERRITOIRE_NOTE_8 = '#759850';
const COULEUR_TERRITOIRE_NOTE_10 = '#219653';
it('Valider couleur des territoires pour régions', () => {
// init
cy.viewport(1500, 1000);
cy.visit('carte.html');
cy.get('#carte__groupe-boutons__choix-echelle-territoriale__regions').click({ force: true });
cy.get('#carte__boutons-choix-echelle-territoriale__REGION').click({ force: true });
cy.get('.cmp__carte__id-territoire__R-24').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_8);
cy.get('.cmp__carte__id-territoire__R-44').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_10);
cy.get('.cmp__carte__id-territoire__R-24').should('have.attr', 'fill', '#759850');
cy.get('.cmp__carte__id-territoire__R-44').should('have.attr', 'fill', '#219653');
});
});
......@@ -26,7 +26,7 @@ context('Test de vérification des couleurs des territoires selon leur note sur
// Permet d'attendre que la carte soit chargée avant de changer d'axe
cy.get('.cmp__carte__id-territoire__D-92').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_0);
// Changer d'axe
cy.get('#carte__groupe-boutons__choix-axe__pratiques-agricoles').click({ force: true });
cy.get('#carte__menu-choix-indicateur-dans-panneau-statique__note-pratiques-agricoles').click({ force: true });
cy.get('.cmp__carte__id-territoire__D-75').should('have.attr', 'fill', COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES);
cy.get('.cmp__carte__id-territoire__D-55').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_3);
......
......@@ -23,34 +23,46 @@
</head>
<body style="opacity: 0">
<div id="zone-message-erreur"></div>
<div id="carte__message-erreur"></div>
<header class="zone-entete-page-position-fixe">
<nav id="carte__entete__titre-et-nav"></nav>
<!-- <nav id="carte__entete__retour-diagnostic"></nav>-->
<nav id="carte__barre-navigation">
<div id="carte__bouton-retour-diagnostic"></div>
<nav id="carte__boutons-choix-echelle-territoriale"></nav>
</nav>
</header>
<menu id="carte__menu-glissant"></menu>
<main class="zone-scroll-principal">
<section id="section-description">
<div id="carte__groupe-boutons__choix-axe" class="masquer-sur-ecran-petit"></div>
<div id="contenu__description-axe" class="masquer-sur-ecran-petit"></div>
<div id="carte__menu-indicateurs__choix-indicateur-desktop" class="masquer-sur-ecran-petit"></div>
<menu id="carte__panneau-glissant__panneau-mobile">
<div id="carte__menu-indicateurs__choix-indicateur-mobile"></div>
</menu>
</section>
<section id="section-carte">
<div id="controles-carte">
<div id="carte__groupe-boutons__choix-echelle-territoriale"></div>
<div id="carte__bouton__afficher-panneau-indicateurs" class="masquer-par-defaut afficher-sur-ecran-petit"></div>
</div>
<div id="carte__carte-coloree"></div>
</section>
</main>
<footer id="cmp__footer"></footer>
<div id="carte__contenu-erreur" class="invisible">
<div>
<h2>Données manquantes</h2>
<p>
Il peut s'agir d'une erreur de saisie dans le code du territoire dans l'URL, ou bien d'une indisponibilité temporaire du serveur.
<br />Merci de vérifier votre saisie, et d'essayer à nouveau dans quelques secondes. <br />Si le problème persiste, vous pouvez
nous envoyer un message via le
<a href="https://resiliencealimentaire.org/formulaire-crater/" target="_blank">formulaire de contact</a>.
</p>
</div>
</div>
<div id="carte__contenu-pret">
<menu id="carte__menu-glissant"></menu>
<menu id="carte__panneau-glissant" class="masquer-par-defaut afficher-sur-tablette">
<div id="carte__menu-choix-indicateur-dans-panneau-glissant"></div>
</menu>
<main class="zone-scroll-principal">
<section id="section-choix-indicateur" class="masquer-sur-tablette">
<div id="carte__menu-choix-indicateur-dans-panneau-statique"></div>
</section>
<section id="section-carte">
<div id="controles-carte">
<div id="carte__bouton-afficher-panneau-glissant-choix-indicateur" class="masquer-par-defaut afficher-sur-tablette"></div>
</div>
<div id="carte__carte-coloree"></div>
</section>
</main>
</div>
</body>
<script src="./config.js" defer></script>
......
This diff is collapsed.
......@@ -2,13 +2,11 @@
// Carte.css
--------------------------------------*/
/*:root {*/
/* --hauteur-entete-retour-diagnostic: 1.8rem;*/
/* --hauteur-entete-retour-diagnostic: 0;*/
/* !* Redéfinition de la hauteur de l'entete qui est différente de celle par défaut définie dans base.css *!*/
/* --hauteur-totale-entete: calc(var(--hauteur-cmp-entete-titre-nav) + var(--hauteur-entete-retour-diagnostic)) !important;*/
/* color: var(--c-texte-base);*/
/*}*/
:root {
--hauteur-barre-navigation: 3.0rem;
/* Redéfinition de la hauteur de l'entete qui est différente de celle par défaut définie dans base.css */
--hauteur-totale-entete: calc(var(--hauteur-cmp-entete-titre-nav) + var(--hauteur-barre-navigation)) !important;
}
/*--------------------------------------
// TODO : voir si margin 0 en serait pas mieux pour tous les titres dans base.css
......@@ -32,15 +30,14 @@ main {
grid-template-columns: 50% 50%
}
#carte__entete__retour-diagnostic {
height: var(--hauteur-entete-retour-diagnostic);
background-color: var(--c-nav-territoires-arriereplan);
div.invisible {
display: none !important;
}
#section-description {
min-height: calc(100vh - var(--hauteur-totale-entete));
padding: 1rem 2rem 1rem 2rem;
background-color: var(--c-carte-arriereplan-section-description);
#section-choix-indicateur {
height: calc(100vh - var(--hauteur-totale-entete));
overflow-y: auto;
background-color: var(--c-carte-arriereplan-section-choix-indicateur);
}
#section-carte {
......@@ -74,6 +71,21 @@ main {
z-index: var(--z-index-carte-controles) !important;
}
#carte__message-erreur__zone-message-erreur{
height: var(--hauteur-totale-entete);
}
#carte__contenu-erreur {
margin-top: var(--hauteur-totale-entete);
height: calc(100vh - var(--hauteur-totale-entete));
width: 100%;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--c-accueil-arriereplan);
}
/*--------------------------------------
// Header
--------------------------------------*/
......@@ -83,10 +95,18 @@ main {
}
/*-----------------------------------------------------------------
// Entete retour diagnostic
// Barre navigation
------------------------------------------------------------------*/
#carte__entete__retour-diagnostic ul {
#carte__barre-navigation {
overflow-x: auto;
height: var(--hauteur-barre-navigation);
background-color: var(--c-nav-territoires-arriereplan);
display: flex;
align-items: center;
}
#carte__barre-navigation ul {
margin: 0 ;
padding-left: 2rem;
height: var(--hauteur-entete-retour-diagnostic);
......@@ -95,172 +115,34 @@ main {
align-items: center;
}
#carte__entete__retour-diagnostic li {
#carte__barre-navigation li {
list-style: none;
margin: 0;
cursor: pointer;
}
#carte__entete__retour-diagnostic a {
#carte__barre-navigation a {
text-decoration: none;
font-size: var(--smaller);
}
#carte__entete__retour-diagnostic a:hover{
#carte__barre-navigation a:hover{
text-decoration: underline;
}
/*--------------------------------------
// Groupe de boutons choix de l'axe actif
--------------------------------------*/
#carte__groupe-boutons__choix-axe ul {
padding: 0rem 0 1.8rem 0;
white-space: nowrap;
}
#carte__groupe-boutons__choix-axe li {
padding: 0.5em;
}
#carte__groupe-boutons__choix-axe input + label {
background-color: transparent;
color: var(--c-carte-texte-bouton-axe-inactif);
padding: 0.5em 0.5em;
margin:0;
border-radius: 0.5rem;
border: solid 1px var(--c-carte-fond-bouton-axe-actif);
}
#carte__groupe-boutons__choix-axe input:checked + label {
color: var(--c-texte-base3);
background-color: var(--c-carte-fond-bouton-axe-actif);
box-shadow: 0 2px 6px 0 var(--ombre);
}
#carte__groupe-boutons__choix-axe .cmp__barre-glissante__fleche-gauche {
color: var(--c-carte-fond-bouton-axe-actif);
background-image: linear-gradient(to right, var(--c-carte-arriereplan) 30%, transparent);
}
#carte__groupe-boutons__choix-axe .cmp__barre-glissante__fleche-droite {
color: var(--c-carte-fond-bouton-axe-actif);
background-image: linear-gradient(to left, var(--c-carte-arriereplan) 30%, transparent);
}
/* ------------------------------------ */
/* Composant Menu indicateurs */
/* ------------------------------------ */
.cmp__menu-indicateurs *, .cmp__menu-indicateurs *:before, .cmp__menu-indicateurs *:after {
box-sizing: border-box;
}
.cmp__menu-indicateurs {
margin: 0;
}
.cmp__menu-indicateurs input {
display: none;
}
.cmp__menu-indicateurs li {
list-style: none;
cursor: pointer;
display: inline-block;
padding: 0.2em;
}
.cmp__menu-indicateurs input + label {
cursor: pointer;
background-color: #a7a7a7;
padding: 0.2em 1em;
user-select: none;
}
.cmp__menu-indicateurs input:checked + label {
background-color: #fff;
}
.cmp__menu-indicateurs p{
font-size: var(--smaller1);
}
/*--------------------------------------*/
/* Menu indicateurs DESKTOP */
/* Panneau glissant de choix d'indicateur*/
/*--------------------------------------*/
#carte__menu-indicateurs__choix-indicateur-desktop {
height: 80vh;
overflow: auto;
margin: auto;
}
#carte__menu-indicateurs__choix-indicateur-desktop ul {
display: flex;
flex-direction: column;
padding: 0;
}
#carte__menu-indicateurs__choix-indicateur-desktop li {
padding: 0.2rem;
}
#carte__menu-indicateurs__choix-indicateur-desktop input + label {
background-color: white;
box-shadow: 0 2px 6px 0 var(--ombre);
border: solid 2px transparent;
cursor: inherit;
display: block;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
padding: 1rem;
border-radius: 0.2em;
}
#carte__menu-indicateurs__choix-indicateur-desktop input + label:hover {
background-color: var(--c-carte-indicateur-hover-fond);
}
#carte__menu-indicateurs__choix-indicateur-desktop .non-cliquable input + label{
background-color: var(--c-carte-indicateur-indisponible-fond);
cursor: not-allowed;
}
#carte__menu-indicateurs__choix-indicateur-desktop input:checked + label{
border: solid 2px var(--c-carte-indicateur-selectionne-bordure);
cursor: inherit;
}
#carte__menu-indicateurs__choix-indicateur-desktop h1{
font-size: var(--smaller1);
margin: 0;
}
#carte__menu-indicateurs__choix-indicateur-desktop h2{
font-size: var(--smaller);
font-weight: normal;
margin: 0;
margin-top: 1rem;
}
#carte__menu-indicateurs__choix-indicateur-desktop svg{
display: none;
}
/*--------------------------------------*/
/* MOBILE : Panneau glissant de choix d'indicateur*/
/*--------------------------------------*/
#carte__panneau-glissant__panneau-mobile {
#carte__panneau-glissant {
height: calc(100vh - var(--hauteur-totale-entete) - 0.2rem);
overflow: auto;
grid-template-columns: 1fr 40px;
grid-template-rows: 3rem;
}
#carte__panneau-glissant__panneau-mobile__bouton-fermer {
#carte__panneau-glissant__bouton-fermer {
grid-column-start: 2;
grid-column-end: 3;
padding-right: 0.8rem;
......@@ -268,73 +150,98 @@ main {
}
/*--------------------------------------*/
/* MOBILE : Menu de choix d'indicateur*/
/* Menu de choix d'indicateur dans panneau*/
/*--------------------------------------*/
#carte__menu-indicateurs__choix-indicateur-mobile {
.cmp__menu-choix-indicateur {
margin: auto;
grid-column-start: 1;
grid-column-end: 3;
}
#carte__menu-indicateurs__choix-indicateur-mobile ul {
.cmp__menu-choix-indicateur .non-cliquable {
display: none;
}
.cmp__menu-choix-indicateur > h1 {
margin: 1rem 0rem 1rem 0.5rem;
text-align: center;
}
.cmp__menu-choix-indicateur ul {
display: flex;
flex-direction: column;
padding: 0;
list-style-type: none;
}
#carte__menu-indicateurs__choix-indicateur-mobile li {
padding: 0.2rem;
.cmp__menu-choix-indicateur li {
padding: 0.2rem 0.5rem 0.2rem 0.5rem;
}
.cmp__menu-choix-indicateur input {
display: none;
}
#carte__menu-indicateurs__choix-indicateur-mobile input + label {
.cmp__menu-choix-indicateur label {
background-color: white;
box-shadow: 0 2px 6px 0 var(--ombre);
border: solid 2px transparent;
cursor: inherit;
display: flex;
align-items: center;
cursor: pointer;
display: grid;
grid-template-columns: 60px;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
padding: 0.3rem;
border-radius: 0.2em;
padding: 0.2rem;
text-align: center;
font-size: var(--smaller2);
}
#carte__menu-indicateurs__choix-indicateur-mobile input + label:hover {
.cmp__menu-choix-indicateur label:hover {
background-color: var(--c-carte-indicateur-hover-fond);
}
#carte__menu-indicateurs__choix-indicateur-mobile .non-cliquable input + label{
background-color: var(--c-carte-indicateur-indisponible-fond);
cursor: not-allowed;
.cmp__menu-choix-indicateur input:checked + label {
border: solid 2px var(--c-carte-indicateur-selectionne-bordure);
cursor: pointer;
}
#carte__menu-indicateurs__choix-indicateur-mobile input:checked + label{
border: solid 2px var(--c-carte-indicateur-selectionne-bordure);
cursor: inherit;
.cmp__menu-choix-indicateur label .icone {
grid-column-start: 1;
grid-column-end: 2;
margin: auto;
padding-right: 0.6rem;
}
#carte__menu-indicateurs__choix-indicateur-mobile label h1{
font-size: var(--title4);
padding-left: 1rem;
.cmp__menu-choix-indicateur label .texte {
grid-column-start: 2;
grid-column-end: 3;
margin: auto 0;
}
#carte__menu-indicateurs__choix-indicateur-mobile label h2{
display: none;
.cmp__menu-choix-indicateur svg {
width: 40px;
height: 40px;
}
#carte__menu-indicateurs__choix-indicateur-mobile label h3{
display: none;
.cmp__menu-choix-indicateur label h1, h2, h3 {
padding: 0.2rem 0rem 0.2rem 0rem;
}
#carte__menu-indicateurs__choix-indicateur-mobile svg{
width: 40px;
height: 40px;
}
.cmp__menu-choix-indicateur label h1{
font-size: var(--smaller);
margin: 0;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
display: flex;
align-items: center;
}
.cmp__menu-choix-indicateur label h2 {
font-size: var(--smaller1);
font-weight: normal;
}
#carte__menu-indicateurs__choix-indicateur-mobile .non-cliquable {
#carte__menu-choix-indicateur-dans-panneau-glissant label h3{
display: none;
}
......@@ -342,10 +249,6 @@ main {
/* Detail Section carte */
/*--------------------------------------*/
/*--------------------------------------*/
/* Section carte - boutons choix echelle*/
/*--------------------------------------*/
#controles-carte {
position: absolute;
display: flex;
......@@ -357,11 +260,37 @@ main {
background-color: transparent;
}
#carte__bouton__afficher-panneau-indicateurs {
#carte__bouton-retour-diagnostic a {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin: 0.2rem;
margin-left: 1rem;
color: var(--bleu-marine);
}
#carte__bouton-retour-diagnostic:hover a {
text-decoration: underline;
}
#carte__bouton-retour-diagnostic svg {
display: grid;
fill: var(--bleu-marine);
margin: 0.5rem;
width: 20px;
height: 20px;
}
#carte__bouton__afficher-panneau-indicateurs button {
#carte__bouton-retour-diagnostic .libelle {
width: 30px;
white-space: nowrap;
}
#carte__bouton-afficher-panneau-glissant-choix-indicateur {
margin: 0.2rem;
}
#carte__bouton-afficher-panneau-glissant-choix-indicateur button {
width: 40px;
height: 40px;
border-radius: 3em;
......@@ -369,35 +298,39 @@ main {
border: 0;
}
#carte__bouton__afficher-panneau-indicateurs label {
#carte__bouton-afficher-panneau-glissant-choix-indicateur label {
color: var(--c-carte-bouton-calques);
}
#carte__groupe-boutons__choix-echelle-territoriale {
/*--------------------------------------*/
/* Section carte - boutons choix echelle*/
/*--------------------------------------*/
#carte__boutons-choix-echelle-territoriale {
margin: auto;
margin-top: 0.5rem;
width: min-content;
}
#carte__groupe-boutons__choix-echelle-territoriale ul {
#carte__boutons-choix-echelle-territoriale ul {
white-space: nowrap;
background-color: var(--c-carte-groupe-boutons-echelle-territoriale-fond);
padding: 0.2em;
border-radius: 0.5em;
}
#carte__groupe-boutons__choix-echelle-territoriale input + label {
#carte__boutons-choix-echelle-territoriale input + label {
background-color: transparent;
color: var(--c-carte-fond-bouton-axe-actif);
border-radius: 0.5em;
}
#carte__groupe-boutons__choix-echelle-territoriale input:checked + label {
color: var(--c-carte-texte-bouton-axe-actif);
#carte__boutons-choix-echelle-territoriale input:checked + label {
background-color: var(--c-texte-base3);
box-shadow: 0 2px 6px 0 var(--ombre);
}
#carte__boutons-choix-echelle-territoriale li:hover label {
text-decoration: underline;
}
/*--------------------------------------*/
/* Section carte - LEGENDE */
......@@ -515,7 +448,7 @@ main {
}
.message-cle a {
text-decoration: none;
text-decoration: none !important;
}
.message-cle h2, .message-cle h3, .message-cle p {
......@@ -524,7 +457,6 @@ main {
.message-cle .titre {
font-weight: bold;
color: var(--c-carte-texte-titre-description-axes);
line-height: 1em;
padding-top: 1rem;
padding-bottom: 0.6rem;
......@@ -545,7 +477,6 @@ main {
}
.message-cle .details {
color: var(--c-carte-texte-titre-description-axes);
padding-top: 0.5em;
}
......@@ -570,46 +501,13 @@ main {
/* Media queries affichage mobile */
/* ------------------------------------ */
/* breakpoint desktop-petit vers tablette */
@media screen and (max-width: 1024px) {
:root {
--hauteur-bandeau-choix-axe: 3rem;
}