Commit e4c54ed8 authored by Lionel DURAND's avatar Lionel DURAND
Browse files

20220304-evols_mineures_recherche_et_carto

parents 40b682f6 ea9791a8
......@@ -11,7 +11,7 @@ context("Test de vérification des couleurs des territoires après un changement
cy.viewport(1500, 1000);
cy.visit('carte.html');
cy.get('#boutons__choix-echelle-territoriale__regions').click({ force: true });
cy.get('#carte__groupe-boutons__choix-echelle-territoriale__regions').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);
......
......@@ -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('#boutons__choix-axe__pratiques-agricoles').click({ force: true });
cy.get('#carte__groupe-boutons__choix-axe__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);
......
......@@ -7,7 +7,7 @@ context("Test l'affichage d'un diagnostic en mode desktop et mobile", () => {
//given
cy.viewport(1500, 1000);
//when
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'aur', 5);
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'aur', 10);
// then
cy.get('#barre-menu-territoires').should('be.visible');
cy.get('[data-cy^=barre-nav-item-C] h1').should('be.visible');
......@@ -26,7 +26,7 @@ context("Test l'affichage d'un diagnostic en mode desktop et mobile", () => {
//given
cy.viewport(320, 568);
//when
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'aur', 5);
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'aur', 10);
// then
cy.get('#barre-menu-territoires').should('be.visible');
cy.get('[data-cy^=barre-nav-item-C] h1').should('be.hidden');
......
......@@ -3,12 +3,8 @@ context('Test recherche territoire et liste de suggestions', () => {
cy.visit('index.html');
});
it('Afficher 5 éléments maxi sur une recherche texte', () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'saint', 5);
});
it('Afficher 10 éléments maxi sur une recherche par code postal', () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', '02000', 10);
it('Afficher 10 éléments maxi sur une recherche', () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'saint', 10);
});
it('Rechercher depuis la barre de navigation en mode desktop', () => {
......@@ -22,7 +18,7 @@ context('Test recherche territoire et liste de suggestions', () => {
cy.get('[data-cy=barre-nav-bouton-loupe]').should('be.hidden');
// recherche
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe__cmp-recherche__input', 'aix', 5);
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe__cmp-recherche__input', 'aix', 10);
// verifier resultat
cy.get('.cmp__champ-recherche__territoire__autocomplete').should('not.exist');
......@@ -47,7 +43,7 @@ context('Test recherche territoire et liste de suggestions', () => {
cy.get('#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant').should('be.visible');
// verifier autocomplete
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant__cmp-recherche__input', 'aix', 5);
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant__cmp-recherche__input', 'aix', 10);
// verifier resultat
cy.get('.cmp__champ-recherche__territoire__autocomplete').should('not.exist');
......
......@@ -33,16 +33,20 @@
<menu id="carte__menu-glissant"></menu>
<main class="zone-scroll-principal">
<section id="section-description-axes">
<div id="boutons__choix-axe"></div>
<div id="contenu__description-axe"></div>
<div id="boutons__choix-indicateur"></div>
<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="boutons__choix-echelle-territoriale"></div>
<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="crater-map"></div>
<div id="carte__carte-coloree"></div>
</section>
</main>
......
This diff is collapsed.
......@@ -37,21 +37,27 @@ main {
background-color: var(--c-nav-territoires-arriereplan);
}
#section-description-axes {
#section-description {
min-height: calc(100vh - var(--hauteur-totale-entete));
padding: 1rem 2rem 1rem 2rem;
background-color: var(--c-carte-arriereplan-section-description-axes);
background-color: var(--c-carte-arriereplan-section-description);
}
#section-carte {
position: relative;
}
#crater-map {
#carte__carte-coloree {
background-color: var(--c-carte-arriereplan-carte);
height: calc(100vh - var(--hauteur-totale-entete));
}
.leaflet-bottom {
display: flex;
flex-wrap: wrap;
justify-content: end;
}
.leaflet-left {
width: 25%;
}
......@@ -60,6 +66,10 @@ main {
width: 65%;
}
.leaflet-control {
background: transparent !important;
}
.leaflet-control-container > * {
z-index: var(--z-index-carte-controles) !important;
}
......@@ -100,36 +110,21 @@ main {
text-decoration: underline;
}
/*--------------------------------------
// Detail Section Axes
--------------------------------------*/
/*--------------------------------------
// Section information axes
--------------------------------------*/
#section-description-axes h1 {
margin-bottom: 1.0rem;
color: var(--c-carte-texte-titre);
text-transform: uppercase;
font-size: var(--title2);
}
/*--------------------------------------
// Groupe de boutons choix de l'axe actif
--------------------------------------*/
#boutons__choix-axe ul.cmp__groupe-boutons {
#carte__groupe-boutons__choix-axe ul {
padding: 0rem 0 1.8rem 0;
white-space: nowrap;
}
#boutons__choix-axe .cmp__groupe-boutons li {
#carte__groupe-boutons__choix-axe li {
padding: 0.5em;
}
#boutons__choix-axe .cmp__groupe-boutons input + label {
#carte__groupe-boutons__choix-axe input + label {
background-color: transparent;
color: var(--c-carte-texte-bouton-axe-inactif);
padding: 0.5em 0.5em;
......@@ -138,72 +133,81 @@ main {
border: solid 1px var(--c-carte-fond-bouton-axe-actif);
}
#boutons__choix-axe .cmp__groupe-boutons input:checked + label {
#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);
}
#boutons__choix-axe .cmp__barre-glissante__fleche-gauche {
#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);
}
#boutons__choix-axe .cmp__barre-glissante__fleche-droite {
#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);
}
/*--------------------------------------*/
/* Section axe - zone texte */
/*--------------------------------------*/
/* ------------------------------------ */
/* Composant Menu indicateurs */
/* ------------------------------------ */
#contenu__description-axe h1,
#contenu__description-axe h2 {
color: var(--c-carte-texte-titre-description-axes);
.cmp__menu-indicateurs *, .cmp__menu-indicateurs *:before, .cmp__menu-indicateurs *:after {
box-sizing: border-box;
}
#contenu__description-axe h1 {
font-size: var(--title3);
.cmp__menu-indicateurs {
margin: 0;
}
#contenu__description-axe h2 {
font-size: var(--title4);
margin-bottom: 1rem;
.cmp__menu-indicateurs input {
display: none;
}
#contenu__description-axe h3 {
margin: 0 0 0.5em;
font-size: var(--normal);
color: var(--c-carte-texte-description-axe);
text-transform: uppercase;
.cmp__menu-indicateurs li {
list-style: none;
cursor: pointer;
display: inline-block;
padding: 0.2em;
}
#contenu__description-axe p {
color: var(--c-carte-texte-paragraphes-description-axe);
margin-bottom: 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);
}
/*--------------------------------------*/
/* Section axe - boutons choix indicateurs*/
/* Menu indicateurs DESKTOP */
/*--------------------------------------*/
#boutons__choix-indicateur {
#carte__menu-indicateurs__choix-indicateur-desktop {
height: 80vh;
overflow: auto;
margin: auto;
}
#boutons__choix-indicateur ul {
#carte__menu-indicateurs__choix-indicateur-desktop ul {
display: flex;
flex-direction: column;
padding: 0;
}
#boutons__choix-indicateur li {
#carte__menu-indicateurs__choix-indicateur-desktop li {
padding: 0.2rem;
}
#boutons__choix-indicateur input + label {
#carte__menu-indicateurs__choix-indicateur-desktop input + label {
background-color: white;
box-shadow: 0 2px 6px 0 var(--ombre);
border: solid 2px transparent;
......@@ -215,32 +219,124 @@ main {
border-radius: 0.2em;
}
#boutons__choix-indicateur input + label:hover {
#carte__menu-indicateurs__choix-indicateur-desktop input + label:hover {
background-color: var(--c-carte-indicateur-hover-fond);
}
#boutons__choix-indicateur .non-cliquable input + label {
#carte__menu-indicateurs__choix-indicateur-desktop .non-cliquable input + label{
background-color: var(--c-carte-indicateur-indisponible-fond);
cursor: not-allowed;
}
#boutons__choix-indicateur input:checked + label {
#carte__menu-indicateurs__choix-indicateur-desktop input:checked + label{
border: solid 2px var(--c-carte-indicateur-selectionne-bordure);
cursor: inherit;
}
#boutons__choix-indicateur h1 {
#carte__menu-indicateurs__choix-indicateur-desktop h1{
font-size: var(--smaller1);
margin: 0;
}
#boutons__choix-indicateur h2 {
#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 {
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 {
grid-column-start: 2;
grid-column-end: 3;
padding-right: 0.8rem;
padding-top: 0.4rem;
}
/*--------------------------------------*/
/* MOBILE : Menu de choix d'indicateur*/
/*--------------------------------------*/
#carte__menu-indicateurs__choix-indicateur-mobile {
margin: auto;
grid-column-start: 1;
grid-column-end: 3;
}
#carte__menu-indicateurs__choix-indicateur-mobile ul {
display: flex;
flex-direction: column;
padding: 0;
}
#carte__menu-indicateurs__choix-indicateur-mobile li {
padding: 0.2rem;
}
#carte__menu-indicateurs__choix-indicateur-mobile input + label {
background-color: white;
box-shadow: 0 2px 6px 0 var(--ombre);
border: solid 2px transparent;
cursor: inherit;
display: flex;
align-items: center;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
border-radius: 0.2em;
padding: 0.2rem;
text-align: center;
font-size: var(--smaller2);
}
#carte__menu-indicateurs__choix-indicateur-mobile input + 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;
}
#carte__menu-indicateurs__choix-indicateur-mobile input:checked + label{
border: solid 2px var(--c-carte-indicateur-selectionne-bordure);
cursor: inherit;
}
#carte__menu-indicateurs__choix-indicateur-mobile label h1{
font-size: var(--title4);
padding-left: 1rem;
}
#carte__menu-indicateurs__choix-indicateur-mobile label h2{
display: none;
}
#carte__menu-indicateurs__choix-indicateur-mobile label h3{
display: none;
}
#carte__menu-indicateurs__choix-indicateur-mobile svg{
width: 40px;
height: 40px;
}
#carte__menu-indicateurs__choix-indicateur-mobile .non-cliquable {
display: none;
}
/*--------------------------------------*/
/* Detail Section carte */
......@@ -252,31 +348,51 @@ main {
#controles-carte {
position: absolute;
top: 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: right;
z-index: var(--z-index-carte-controles);
width: 100%;
background-color: transparent;
}
#boutons__choix-echelle-territoriale {
#carte__bouton__afficher-panneau-indicateurs {
margin: 0.2rem;
}
#carte__bouton__afficher-panneau-indicateurs button {
width: 40px;
height: 40px;
border-radius: 3em;
background-color: var(--c-carte-bouton-calques-fond);
border: 0;
}
#carte__bouton__afficher-panneau-indicateurs label {
color: var(--c-carte-bouton-calques);
}
#carte__groupe-boutons__choix-echelle-territoriale {
margin: auto;
margin-top: 0.5rem;
width: min-content;
}
#boutons__choix-echelle-territoriale ul {
#carte__groupe-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;
}
#boutons__choix-echelle-territoriale input + label {
#carte__groupe-boutons__choix-echelle-territoriale input + label {
background-color: transparent;
color: var(--c-carte-fond-bouton-axe-actif);
border-radius: 0.5em;
}
#boutons__choix-echelle-territoriale input:checked + label {
#carte__groupe-boutons__choix-echelle-territoriale input:checked + label {
color: var(--c-carte-texte-bouton-axe-actif);
background-color: var(--c-texte-base3);
box-shadow: 0 2px 6px 0 var(--ombre);
......@@ -295,7 +411,6 @@ main {
display: flex;
justify-content: left;
align-items: center;
margin-bottom: 2em;
width: 100%;
}
......@@ -364,7 +479,6 @@ main {
.titre-carte {
text-align: center;
float: left !important;
}
.titre-carte h1, h2, h3{
......@@ -466,24 +580,20 @@ main {
display: block;
}
#crater-map {
height: calc(100vh - (var(--hauteur-cmp-entete-titre-nav) + var(--hauteur-bandeau-choix-axe)));
}
#contenu__description-axe, #section-description-axes h2 {
display: none;
#carte__carte-coloree {
height: calc(100vh - (var(--hauteur-cmp-entete-titre-nav)));
}
#section-description-axes {
#section-description {
min-height: min-content;
padding: 0;
}
#boutons__choix-axe .cmp__groupe-boutons {
#carte__groupe-boutons__choix-axe .cmp__menu-indicateurs {
margin: 0;
}
#boutons__choix-axe .cmp__groupe-boutons input + label {
#carte__groupe-boutons__choix-axe .cmp__menu-indicateurs input + label {
background-color: transparent;
font-size: var(--smaller2);
font-weight: bold;
......@@ -492,7 +602,7 @@ main {
box-shadow: none;
}
#boutons__choix-axe .cmp__groupe-boutons input:checked + label {
#carte__groupe-boutons__choix-axe .cmp__menu-indicateurs input:checked + label {
color: var(--c-carte-texte-bouton-axe-inactif);
background-color: transparent;
border-radius: initial;
......@@ -500,34 +610,29 @@ main {
box-shadow: none;
}
#boutons__choix-indicateur {
min-height: 80px;
}
#boutons__choix-indicateur ul {
align-items: center;
.leaflet-popup-content-wrapper {
max-width: 320px;
}
#boutons__choix-axe ul.cmp__groupe-boutons {
padding: 0rem 0 0.3rem 0;
.titre-carte h2 {
display: none !important;
}
}
#boutons__choix-indicateur .non-cliquable {
display: none;
}
@media screen and (max-width: 500px) {
#boutons__choix-indicateur input + label {
padding: 0.2rem;
text-align: center;
font-size: var(--smaller2);
width: 95vw;
#carte__menu-indicateurs__choix-indicateur-mobile input + label {
height: 60px;
}
.leaflet-popup-content-wrapper {
max-width: 320px;
#carte__menu-indicateurs__choix-indicateur-mobile h1{
display: none;
}
.titre-carte h2 {
display: none !important;
#carte__menu-indicateurs__choix-indicateur-mobile label h3{
display: block;
font-size: var(--smaller3);
padding-left: 0.5rem;
}
}
\ No newline at end of file
}
import { Afficheur } from '../../commun/controleurs/Afficheur';
import { ContenuStatique, EnteteTitreEtNavigation, GroupeBoutons, GroupeBoutonsGlissants, MenuGlissant, PiedPage } from '../../commun/vues';
import {
EnteteTitreEtNavigation,
GroupeBoutons,
GroupeBoutonsGlissants,
MenuGlissant,
PiedPage
} from '../../commun/vues';
import { PanneauGlissant } from '../../commun/vues/crater/PanneauGlissant';
import { Bouton } from '../../commun/vues/generiques/Bouton';
import { EchelleTerritoriale, Indicateur, PageCarte } from '../domaines/PageCarte';
import { CarteColoree } from '../vues/CarteColoree';
import { MenuIndicateurs } from '../vues/MenuIndicateurs';
import { ControleurCarte } from './ControleurCarte';
export class AfficheurCarte implements Afficheur<PageCarte> {
......@@ -10,9 +19,11 @@ export class AfficheurCarte implements Afficheur<PageCarte> {
// private enteteRetourDiagnostic: EnteteRetourDiagnostic;
private piedPage: PiedPage;
private groupeBoutonsAxes: GroupeBoutonsGlissants;
private groupeBoutonsIndicateurs: GroupeBoutons;
private menuIndicateursGauche: MenuIndicateurs;
private boutonAfficherPanneauIndicateurs: Bouton;
private panneauIndicateurs: PanneauGlissant;
private menuIndicateursDansPanneau: MenuIndicateurs;
private groupeBoutonsEchelles: GroupeBoutons;
private descriptionAxe: ContenuStatique;
private carteColoree: CarteColoree;
constructor(private readonly controleurCarte: ControleurCarte) {
......@@ -23,11 +34,21 @@ export class AfficheurCarte implements Afficheur<PageCarte> {
});
// this.enteteRetourDiagnostic = new EnteteRetourDiagnostic('carte__entete__retour-diagnostic');
this.piedPage = new PiedPage('cmp__footer');
this.descriptionAxe = new ContenuStatique('contenu__description-axe');
this.groupeBoutonsIndicateurs = new GroupeBoutons('boutons__choix-indicateur');
this.carteColoree = new CarteColoree('crater-map');