From 0e4b0f3bc5969445b3f45aa231bfff797b49aec4 Mon Sep 17 00:00:00 2001 From: chankalan Date: Fri, 23 Oct 2020 16:35:03 +0200 Subject: [PATCH] recherche dans le menu + corrections css diverses --- lang/baz_april_fr.php | 1 + squelettes/header/dist.html | 10 +---- squelettes/inclure/nav-secteurs.html | 5 ++- squelettes/javascript/script.js | 7 ++++ squelettes/scss/base/_typo.scss | 7 ++-- squelettes/scss/styles/_layout.scss | 2 +- squelettes/scss/styles/_nav.scss | 61 ++++++++++++++++++++++++---- squelettes/scss/styles/_styles.scss | 2 +- squelettes/scss/utils/_mixins.scss | 2 +- 9 files changed, 74 insertions(+), 23 deletions(-) diff --git a/lang/baz_april_fr.php b/lang/baz_april_fr.php index 77624cd..b0e44b3 100644 --- a/lang/baz_april_fr.php +++ b/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
APRIL - base', diff --git a/squelettes/header/dist.html b/squelettes/header/dist.html index 854f5f0..12cf0ba 100644 --- a/squelettes/header/dist.html +++ b/squelettes/header/dist.html @@ -6,12 +6,4 @@ [(#SI_PAGE{sommaire}|non)] - - - + diff --git a/squelettes/inclure/nav-secteurs.html b/squelettes/inclure/nav-secteurs.html index 0a6bf06..7c4f2c4 100644 --- a/squelettes/inclure/nav-secteurs.html +++ b/squelettes/inclure/nav-secteurs.html @@ -2,8 +2,11 @@ diff --git a/squelettes/javascript/script.js b/squelettes/javascript/script.js index 8395fc8..bbc0634 100644 --- a/squelettes/javascript/script.js +++ b/squelettes/javascript/script.js @@ -68,5 +68,12 @@ $(function() { }); } }); + + // champ de recherche dans le menu + $('.loupe a').on('click', function(){ + $(this).siblings('.formulaire_recherche').toggleClass('vu'); + $('#recherche').focus(); + return false; + }); }); diff --git a/squelettes/scss/base/_typo.scss b/squelettes/scss/base/_typo.scss index 599ab4b..5cbc0ca 100644 --- a/squelettes/scss/base/_typo.scss +++ b/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; diff --git a/squelettes/scss/styles/_layout.scss b/squelettes/scss/styles/_layout.scss index 758dcc0..9cd23e6 100644 --- a/squelettes/scss/styles/_layout.scss +++ b/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; } diff --git a/squelettes/scss/styles/_nav.scss b/squelettes/scss/styles/_nav.scss index e3c3202..c89aebe 100644 --- a/squelettes/scss/styles/_nav.scss +++ b/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,7 +104,54 @@ 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 { font-weight:700; @@ -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; } diff --git a/squelettes/scss/styles/_styles.scss b/squelettes/scss/styles/_styles.scss index 945c180..d6deafe 100644 --- a/squelettes/scss/styles/_styles.scss +++ b/squelettes/scss/styles/_styles.scss @@ -21,7 +21,7 @@ font-size:1rem; } .taille3 { - font-size:1.5rem; + font-size:1.2rem; } diff --git a/squelettes/scss/utils/_mixins.scss b/squelettes/scss/utils/_mixins.scss index eb25958..f801df7 100644 --- a/squelettes/scss/utils/_mixins.scss +++ b/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; }