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
'titre_page_configurer_baz_april' => 'Configuration',
'themes_recents' => 'Thèmes récents',
'cfg_baz_april' => 'Configuration du jeu de squelettes<br />
APRIL - base',

View File

@ -6,12 +6,4 @@
[(#SI_PAGE{sommaire}|non)</a>]</h1>
</div>
<B_nav>
<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>
<INCLURE{fond=inclure/nav-secteurs, env} />

View File

@ -2,8 +2,11 @@
<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>
<li class="nav-item[ (#EXPOSE)][ (#COMPTEUR_BOUCLE|=={1}|oui)first]"><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a></li>
</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>
</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 {
text-decoration: none;
color: $couleur-lien;
&:hover {
&:hover, &:focus {
text-decoration: underline;
color: $couleur-lien-hover;
border-color: $couleur-lien-hover;
outline: 0;
}
&:focus {
/* &:focus {
background-color: $couleur-lien !important;
border-color: $couleur-lien !important;
color: white !important;
@ -79,7 +79,7 @@ a {
svg * {
//fill: white !important;
}
}
}*/
}
.nav.principale {
@ -93,6 +93,7 @@ h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $typo-titres;
font-weight: 200;
line-height: 1.1;
font-style: normal;
color: $couleur-titres;

View File

@ -21,7 +21,7 @@ html, body {
justify-content: space-between;
min-height: 100vh;
// 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;
.header_initiatives & {
font-weight:400;
padding:1em;
padding:0.5em;
margin:0;
color:white;
border:0;
@ -62,7 +62,7 @@
z-index:2;
right:$spacer;
top:0;
padding:($spacer/1.2) $spacer;
padding:0.4rem;
border:none;
background:$couleurPrincipale;
color:white;
@ -80,7 +80,7 @@
/* header = nav-principale */
.page_header > .page_container {
.nav {
padding-top:$spacer;
padding-top:($spacer/2);
font-size:0.95rem;
z-index:9;
> ul {
@ -90,7 +90,7 @@
position:absolute;
background:$couleurPrincipale;
width:100%;
top:44px;
top:31px;
left:-100%;
padding:$spacer/2 $spacer;
text-align:center;
@ -104,6 +104,53 @@
li {
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 {
@ -159,7 +206,7 @@
.btn-initiatives {
font-size:0.8rem;
display:none;
padding:$spacer;
padding:0.5rem;
margin-left:-$spacer;
background:$couleurPrincipale;
color:white;
@ -173,7 +220,7 @@
@media ($bp-medium) {
position:absolute;
width:100%;
top:43px;
top:31px;
left:-100%;
@include vendor-prefix(transition,all 0.3s ease-in-out);
&.ouvert {
@ -186,7 +233,7 @@
}
.titre_initiatives {
float:right;
padding:1em;
padding:0.5em;
@media ($bp-medium) {
display:none;
}

View File

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

View File

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