Aller au contenu principal


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". 

Dernière MAJ :
25 juin 2023
Billet créé le :
26 nov 2020

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".

Cliquer pour agrandir l'image

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 :

  1.  {{ page.content.pagetitle }} qui affiche le titre ;
  2.  {{page.content.onglets}} qui affiche les onglets ;
  3.   <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;
}

 

Les blocs "pagetitle", "onglets", "mainpagecontent", sont définis lors de la mise en page des blocs : admin-structure-block comme l'explique le billet "gérer les blocs".

 

Cliquez sur le bouton pour copier le code
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;
}