recherche dans le menu + corrections css diverses

lang/baz_april_fr.php

@@ -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',

squelettes/header/dist.html

@@ -6,12 +6,4 @@
 	[(#SI_PAGE{sommaire}|non)</a>]</h1>
 </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>

squelettes/inclure/nav-secteurs.html

@@ -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>

squelettes/javascript/script.js

@@ -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;
+	});
+
 });

squelettes/scss/base/_typo.scss

@@ -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;

squelettes/scss/styles/_layout.scss

@@ -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;
 	
 }
 

squelettes/scss/styles/_nav.scss

@@ -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;
 		}

squelettes/scss/styles/_styles.scss

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

squelettes/scss/utils/_mixins.scss

@@ -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;
 }