Affichage de la recherche en utilisant le DSFR

Author: kolok

templates/components/search/_search_result.html

@@ -6,11 +6,12 @@
     focus:!no-underline
     focus:!bg-none
     focus:!qf-bg-grey-1000-50-hover
+    focus:!qf-z-20 {# Prevent that focus is well displayed #}
     hover:!no-underline
     hover:!bg-none
     hover:!qf-bg-grey-1000-50-hover
     qf-py-1w md:qf-py-3v qf-pl-3w
-    qf-text-xs md:qf-text-base qf-font-bold
+    qf-border-b qf-border-t-0 qf-border-x-0 qf-border-solid qf-border-grey-1000-50-hover qf-bg-white
     "
     tabindex="0"
 >

templates/components/search/view.html

@@ -7,60 +7,36 @@
             keydown.esc->search#clear:prevent
             keydown.up->search#up:prevent
             keydown.down->search#down:prevent"
-        class="
-        {# Z-index here helps prevent autocomplete overlapping on the accordion on the homepage #}
-        qf-relative qf-z-10
-        qf-rounded-3xl qf-overflow-hidden
-        group-data-[home]:qf-rounded-[2rem]
-        max-md:qf-rounded-[2rem]
-        qf-border-solid qf-border-[3px] qf-border-green-menthe-sun-373-moon-652-hover qf-bg-white
-        qf-flex qf-flex-col"
+            {% comment %} Z-index here helps prevent autocomplete overlapping on the accordion on the homepage {% endcomment %}
+        class="qf-relative qf-z-10 qf-overflow-hidden"
     >
         <form
             data-search-target="form"
             data-turbo-frame="{{ id }}:search-results"
             action="{% url 'qfdmd:search' %}"
-            class="qf-pl-4w {# should match the svg icon width #}
-            qf-flex qf-flex-row-reverse qf-relative
-            md:group-data-[home]:qf-h-7w
-            qf-h-5w
-            qf-content-center
-            "
+            class="qf-p-1w {# Padding is required to prevent focus is well displayed #}"
         >
             {% for field in search_form %}
                 {{ field }}
             {% endfor %}
-            <button
-                type="submit"
-                class="qf-absolute qf-top-0 qf-bottom-0 qf-left-0
-                qf-m-auto qf-pl-1v
-                fr-btn fr-icon-search-line fr-btn--tertiary-no-outline
-                focus:qf-bg-green-menthe-sun-373-moon-652-hover
-                focus:qf-ring focus:qf-ring-inset focus:qf-ring-blue-france-sun-113-625-hover
-                qf-rounded-l-full
-                focus:qf-text-white
-                focus:!qf-outline-none
-                qf-h-full
-                !qf-max-h-[none]
-                qf-text-green-menthe-sun-373-moon-652-hover"
-            ><span class="qf-sr-only">Rechercher</span></button>
+            <turbo-frame
+                id="{{ id }}:search-results"
+                data-search-target="results"
+                class=" qf-flex qf-flex-col"
+            >
+                {% if search_form.results %}
+                    <div class="qf-flex qf-flex-col qf-border-x qf-border-y-0 qf-border-solid qf-border-grey-1000-50-hover qf-bg-white">
+                        {% for result in search_form.results %}
+                            {% if beta %}
+                                {% include "./_search_result_beta.html" %}
+                            {% else %}
+                                {% include "./_search_result.html" %}
+                            {% endif %}
+                        {% endfor %}
+                    </div>
+                {% endif %}
+            </turbo-frame>
         </form>
-
-        <turbo-frame
-            id="{{ id }}:search-results"
-            data-search-target="results"
-            class="qf-flex qf-flex-col"
-        >
-            {% if search_form.results %}
-                {% for result in search_form.results %}
-                    {% if beta %}
-                        {% include "./_search_result_beta.html" %}
-                    {% else %}
-                        {% include "./_search_result.html" %}
-                    {% endif %}
-                {% endfor %}
-            {% endif %}
-        </turbo-frame>
     </div>
 </turbo-frame>
 {% endwith %}

templates/components/search/widget.html

@@ -4,30 +4,30 @@
 
 It is used mainly for styles, to add clasnames.
 {% endcomment %}
-<label for="{{ widget.attrs.id }}" class="qf-sr-only">Entrez un déchet :</label>
-<input
-    class="qf-pl-1w qf-pr-2w
-    qf-rounded-r-full
-    qf-ml-1w
-    focus:qf-outline-none
-    focus:qf-ring-inset focus:qf-ring-blue-france-sun-113-625-hover
-    focus:qf-ring
-    qf-w-full
-    qf-text-base
-    md:group-data-[home]:qf-text-2xl
-    qf-text-grey-425 qf-font-bold
-    placeholder:qf-text-grey-425
-    "
-    autocomplete="off"
-    autocorrect="off"
-    autocapitalize="off"
-    spellcheck="false"
-    placeholder="Entrez un objet ou un déchet"
-    type="{{ widget.type }}"
-    name="{{ widget.name }}"{% if widget.value != None %}
-    value="{{ widget.value|stringformat:'s' }}"{% endif %}
-    data-action="search#submitForm keydown.enter->search#submitFirstItem"
-    data-search-target="input"
-    role="search"
-    {% include "django/forms/widgets/attrs.html" %}
->
+
+<div class="fr-search-bar" role="search">
+    <label class="fr-label" for="{{ widget.attrs.id }}">
+        Rechercher, {{ widget.attrs.label }}
+    </label>
+    <input
+        class="fr-input"
+        aria-describedby="search-input-messages"
+        id="search-input"
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+        placeholder="Entrez un objet ou un déchet"
+        type="{{ widget.type }}"
+        name="{{ widget.name }}"{% if widget.value != None %}
+        value="{{ widget.value|stringformat:'s' }}"{% endif %}
+        data-action="search#submitForm keydown.enter->search#submitFirstItem"
+        data-search-target="input"
+        type="search"
+        role="search"
+        {% include "django/forms/widgets/attrs.html" %}
+    >
+    <div class="fr-messages-group" id="search-input-messages" aria-live="polite">
+    </div>
+    <button title="Rechercher" type="button" class="fr-btn">Rechercher</button>
+</div>