Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
lga
crater-ui
Commits
8952e278
Commit
8952e278
authored
Mar 25, 2022
by
Lionel DURAND
Browse files
20220325_amelioration_calcul_besoins_et_navigation_carto
parents
e4c54ed8
34b96724
Changes
56
Expand all
Hide whitespace changes
Inline
Side-by-side
cypress/integration/carte/carte_verifier_couleurs_territoires_selon_echelle.js
View file @
8952e278
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
'
);
});
});
cypress/integration/carte/carte_verifier_couleurs_territoires_selon_maillon.js
View file @
8952e278
...
...
@@ -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
);
...
...
src/carte.html
View file @
8952e278
...
...
@@ -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>
...
...
src/carte/carte-config.ts
deleted
100644 → 0
View file @
e4c54ed8
This diff is collapsed.
Click to expand it.
src/carte/carte.css
View file @
8952e278
...
...
@@ -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
:
1
fr
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
:
in
h
er
it
;
display
:
flex
;
align-items
:
center
;
cursor
:
po
in
t
er
;
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
{
b
ackground-color
:
var
(
--c-carte-indicateur-
indisponible-fond
);
cursor
:
not-allowed
;
.cmp
__menu-choix-indicateur
input
:checked
+
label
{
b
order
:
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
h
3
{
display
:
none
;
.cmp
__menu-choix-indicateur
label
h
1
,
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-indicateur
s
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
;
}