Formulaires et Page de recherche
Ce billet décrit les différentes étapes suivies pour créer, sur ce site, les différents boutons de recherche (comme celui présent dans l'entête des pages) et en afficher leurs résultats dans la page "/search/node".
1. Le bouton de recherche de l'entête
L'image ci-dessous affiche le bouton de recherche tel qu'il apparait lors de la saisie d'un terme à rechercher. Sa largeur s'agrandit lors du survol de la souris. Pour le réaliser, j'ai utilisé le bloc "formulaire de recherche" disponible dans une installation standard de Drupal. Je l'ai placé dans la zone "en-tête" de ma "mise en page des blocs" (/admin/structure/block) directement sous le bloc "site branding".
Pour sa forme (layout), j'ai copié le gabarit (template) "form--search-block-form.html.twig" disponible dans "/core/themes/bartik/templates" d'une installation standard de Drupal dans le dossier "templates/form" de mon thème.
Je l'ai, ensuite, modifié comme l'indique les parties surlignées du code ci-dessous qui ajoutent la classe CSS "dh_form-search" présentée dans l'onglet en bas de page, pour modifier l'esthétique de sa mise en forme.
{% set classes = [ 'dh_form-search' ] %}
<form {{ attributes.addClass('dh_form-search') }}>
{{ children }}
</form>
J' ai ensuite ajouté cette classe CSS dans mon fichier de style, qui est également disponible dans un des onglets en fin de page. Ce fichier est structuré en 3 parties :
la 1ère partie regroupe les styles des identifiants, classes ou balises des éléments qui mettent en forme le formulaire placé dans l'entête. Tous ces styles commencent évidemment par header[role="banner"] (voir le billet sur la CSS : la hiérarchie) ;
la 2nde partie regroupe les styles des éléments qui mettent en forme un formulaire situé ailleurs sur la page ;
la 3ème partie traite les styles pour mettre en forme les résultats de la recherche.
Cette partie du code permet d'élargir le champ de saisie du formulaire (d'entête) lors du survol de la souris :
header[role="banner"] #search-block-form input[type=search]:focus,
header[role="banner"] #search-block-form input[type=search]:hover
{
width: 22em;
}
header[role="banner"] #search-block-form input[type=search]{
height: 29px;
border-radius: 12px 0px 0px 12px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
2. L'affichage des résultats
Drupal permet l'utilisation du gabarit "page--search.html.twig" pour afficher la page "/search/node" responsable de l'affichage des résultats de la recherche.
Ce gabarit est très voisin de "page.html.twig" utilisé pour afficher toutes les autres pages du site et qui est décrit dans le billet : 'les gabarits".
Seule la partie intitulée "le contenu de la page" en est différent. En effet que l'instruction {{ page.content }} a été remplacée par 3 instructions :
- {{ page.content.pagetitle }} qui affiche le titre ;
- {{page.content.onglets}} qui affiche les onglets ;
- <section role="dh-searchPage">
{{page.content.mainpagecontent}}
</section>
Cette dernière affiche le bloc "contenu principal" de la page en y ajoutant la balise <section role="dh-searchPage"> qui permet la définition du style CSS de cette partie lorsqu'il n'y a pas de résultat pour la recherche effectuée.
NB : Ce code ne figure pas dans le fichier "search.css" fourni mais dans le fichier global "style.css" ( ... pour mon confort personnel.)
section[role="dh-searchPage"] section[role="le-bloc"] div div h2 {
border-right: solid thick #c06;;
border-left: solid thick #c06;;
margin: 0em 0em 0em 0em;
padding: 1em 2em 0em 6em;
}
dans le presse papier
/* *
* le formulaire de recherche dans l'entête
*
*/
header[role="banner"] .dh_form-search{
display: flex;
justify-content: flex-end;
}
header[role="banner"] #search-block-form {
display: flex;
}
header[role="banner"] #search-block-form input[type=submit] {
overflow: hidden;
width: 50px;
height: 30px;
margin-top: 1px;
cursor: pointer;
text-indent: -9999px;
direction: ltr;
background: #f0f0f0 url(../images/loupe.svg) no-repeat center;
border-radius: 0px 5px 5px 0px;
}
header[role="banner"] #search-block-form input[type=search]:focus,
header[role="banner"] #search-block-form input[type=search]:hover
{
width: 22em;
}
header[role="banner"] #search-block-form input[type=search]{
height: 29px;
border-radius: 12px 0px 0px 12px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* le formulaire de recherche ailleurs !!*/
.search-form {
font-size: 0.875rem;
border-right: thick solid #C06;
border-left: thick solid #C06;
display: flex;
flex-direction: column;
padding: 1em 0em 1em 9em;
}
.search-form .form-submit{
width: 40px;
cursor: pointer;
text-indent: -9999px;
direction: ltr;
border: 2px solid #ccc;
border-radius: 0px 12px 12px 0px;
background: #f0f0f0 url(../images/loupe.svg) no-repeat center;
}
.search-form .form-search {
float: left;
margin-right: 0px 4px;
padding: 4px;
width: 12em;
}
.search-form .dh_search {
display: flex;
}
.search-form .dh_search .form-item-keys {
display: flex;
justify-content: space-evenly;
}
.search-form .dh_search .form-item-keys label {
padding: 0.4em 1em 0em 0em;
}
/* *
* mise en forme des résultats
*
*/
[dir="rtl"] .search-form .form-search {
float: right;
margin-right: 0;
margin-left: 5px;
}
.block-statistics .item-list{
border-right: none;
border-left: none;
}
.item-list,
.feed-icon {
display:flex;
border-right: thick solid #C06;
border-left: thick solid #C06;
margin: 0em 0em 0em 0em;
padding: 1em 0em 1em 0em;
}
.item-list ul {
list-style:none;
}
.item-list > h3 {
margin: 0em 0em 0em 3em;
padding: 1em 0em 1em 0em;
}