recherche dans le menu + corrections css diverses

This commit is contained in:
chankalan 2020-10-23 16:35:03 +02:00
parent 8acc61db3f
commit 0e4b0f3bc5
9 changed files with 74 additions and 23 deletions

View File

@ -18,6 +18,7 @@ $GLOBALS[ $GLOBALS['idx_lang'] ] = array(
// T // T
'titre_page_configurer_baz_april' => 'Configuration', 'titre_page_configurer_baz_april' => 'Configuration',
'themes_recents' => 'Thèmes récents',
'cfg_baz_april' => 'Configuration du jeu de squelettes<br /> 'cfg_baz_april' => 'Configuration du jeu de squelettes<br />
APRIL - base', APRIL - base',

View File

@ -6,12 +6,4 @@
[(#SI_PAGE{sommaire}|non)</a>]</h1> [(#SI_PAGE{sommaire}|non)</a>]</h1>
</div> </div>
<B_nav> <INCLURE{fond=inclure/nav-secteurs, env} />
<nav class="nav principale" aria-label="Menu principal">
<ul class="nav-list">
<BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre}>
<li class="nav-item[ (#EXPOSE)][ (#COMPTEUR_BOUCLE|=={1}|oui)first][ (#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)last]"><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a></li>
</BOUCLE_nav>
</ul>
</nav>
</B_nav>

View File

@ -2,8 +2,11 @@
<nav class="nav principale" aria-label="Menu principal"> <nav class="nav principale" aria-label="Menu principal">
<ul class="nav-list"> <ul class="nav-list">
<BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre}> <BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre}>
<li class="nav-item[ (#EXPOSE)][ (#COMPTEUR_BOUCLE|=={1}|oui)first][ (#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)last]"><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a></li> <li class="nav-item[ (#EXPOSE)][ (#COMPTEUR_BOUCLE|=={1}|oui)first]"><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a></li>
</BOUCLE_nav> </BOUCLE_nav>
<li class="nav-item loupe last"><a href="#URL_PAGE{recherche}"><span>rechercher</span><i class="fas fa-search"></i></a>
#FORMULAIRE_RECHERCHE
</li>
</ul> </ul>
</nav> </nav>
</B_nav> </B_nav>

View File

@ -69,4 +69,11 @@ $(function() {
} }
}); });
// champ de recherche dans le menu
$('.loupe a').on('click', function(){
$(this).siblings('.formulaire_recherche').toggleClass('vu');
$('#recherche').focus();
return false;
});
}); });

View File

@ -64,13 +64,13 @@ html.rtl * {
a { a {
text-decoration: none; text-decoration: none;
color: $couleur-lien; color: $couleur-lien;
&:hover { &:hover, &:focus {
text-decoration: underline; text-decoration: underline;
color: $couleur-lien-hover; color: $couleur-lien-hover;
border-color: $couleur-lien-hover; border-color: $couleur-lien-hover;
outline: 0; outline: 0;
} }
&:focus { /* &:focus {
background-color: $couleur-lien !important; background-color: $couleur-lien !important;
border-color: $couleur-lien !important; border-color: $couleur-lien !important;
color: white !important; color: white !important;
@ -79,7 +79,7 @@ a {
svg * { svg * {
//fill: white !important; //fill: white !important;
} }
} }*/
} }
.nav.principale { .nav.principale {
@ -93,6 +93,7 @@ h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
font-family: $typo-titres; font-family: $typo-titres;
font-weight: 200;
line-height: 1.1; line-height: 1.1;
font-style: normal; font-style: normal;
color: $couleur-titres; color: $couleur-titres;

View File

@ -21,7 +21,7 @@ html, body {
justify-content: space-between; justify-content: space-between;
min-height: 100vh; min-height: 100vh;
// hauteur invariable de la initiatives // hauteur invariable de la initiatives
border-top:44px solid $couleurPrincipale; border-top:31px solid $couleurPrincipale;
} }

View File

@ -36,7 +36,7 @@
border-bottom:3px solid white; border-bottom:3px solid white;
.header_initiatives & { .header_initiatives & {
font-weight:400; font-weight:400;
padding:1em; padding:0.5em;
margin:0; margin:0;
color:white; color:white;
border:0; border:0;
@ -62,7 +62,7 @@
z-index:2; z-index:2;
right:$spacer; right:$spacer;
top:0; top:0;
padding:($spacer/1.2) $spacer; padding:0.4rem;
border:none; border:none;
background:$couleurPrincipale; background:$couleurPrincipale;
color:white; color:white;
@ -80,7 +80,7 @@
/* header = nav-principale */ /* header = nav-principale */
.page_header > .page_container { .page_header > .page_container {
.nav { .nav {
padding-top:$spacer; padding-top:($spacer/2);
font-size:0.95rem; font-size:0.95rem;
z-index:9; z-index:9;
> ul { > ul {
@ -90,7 +90,7 @@
position:absolute; position:absolute;
background:$couleurPrincipale; background:$couleurPrincipale;
width:100%; width:100%;
top:44px; top:31px;
left:-100%; left:-100%;
padding:$spacer/2 $spacer; padding:$spacer/2 $spacer;
text-align:center; text-align:center;
@ -104,6 +104,53 @@
li { li {
display:block; display:block;
} }
.loupe {
.fas {
color:white;
}
.formulaire_recherche.vu {
right:50%;
margin-right:-160px;
max-width:320px;
form {
padding:0.5rem;
&:before {
display:none;
}
}
}
}
}
.loupe {
position:relative;
display:inline-block !important;
/* width: em(26px); */
/* height: em(26px); */
span {
@include visuallyhidden;
}
i.fas {
font-size:1.3rem;
}
.formulaire_recherche {
position:absolute;
height:auto;
width:em(350px);
max-width:em(350px);
top:-1000px;
left:auto;
right:0;
box-shadow: 0 0 20px $grayLight;
border-radius: $spacer/2;
@include vendor-prefix(transition,all 0.3s ease-in-out);
#recherche {
width:100%;
}
&.vu {
top:2rem;
}
}
} }
} }
a { a {
@ -159,7 +206,7 @@
.btn-initiatives { .btn-initiatives {
font-size:0.8rem; font-size:0.8rem;
display:none; display:none;
padding:$spacer; padding:0.5rem;
margin-left:-$spacer; margin-left:-$spacer;
background:$couleurPrincipale; background:$couleurPrincipale;
color:white; color:white;
@ -173,7 +220,7 @@
@media ($bp-medium) { @media ($bp-medium) {
position:absolute; position:absolute;
width:100%; width:100%;
top:43px; top:31px;
left:-100%; left:-100%;
@include vendor-prefix(transition,all 0.3s ease-in-out); @include vendor-prefix(transition,all 0.3s ease-in-out);
&.ouvert { &.ouvert {
@ -186,7 +233,7 @@
} }
.titre_initiatives { .titre_initiatives {
float:right; float:right;
padding:1em; padding:0.5em;
@media ($bp-medium) { @media ($bp-medium) {
display:none; display:none;
} }

View File

@ -21,7 +21,7 @@
font-size:1rem; font-size:1rem;
} }
.taille3 { .taille3 {
font-size:1.5rem; font-size:1.2rem;
} }

View File

@ -186,7 +186,7 @@ $couleurSaturateLight : lighten($couleurSaturate, 10%);
@mixin text-block() { @mixin text-block() {
margin-top: 0; margin-top: 0;
margin-bottom: 1.5em; margin-bottom: 1em;
@include zero-bottom-margin; @include zero-bottom-margin;
} }