Done #2771 @0.5

diff --git a/resources/js/components/SearchField.vue b/resources/js/components/SearchField.vue
index 56889a71efbe176998f09e2e92f6353de85d1546..0820879191ce83ee3fbe0a6f9a988ef01a2a4a75 100644 (file)
--- a/resources/js/components/SearchField.vue
+++ b/resources/js/components/SearchField.vue
@@ -9,6 +9,7 @@
         :placeholder="placeholder"
         :aria-placeholder="placeholder"
         @submit="handleSubmit"
+        :autofocus="autofocus"
     >
     </autocomplete>
 </template>
@@ -35,8 +36,12 @@
             placeholder: {
                 type: String,
             },
-            value:{
+            value: {
                 type: String,
+            },
+            autofocus: {
+                type: Boolean,
+                default: false
             }
         },
 

diff --git a/resources/styles/components/search.styl b/resources/styles/components/search.styl
index dd1a8845c34822249c2727432124dcb5086ddd2e..8222441e7c3a474c3f4654aef003046c85865b55 100644 (file)
--- a/resources/styles/components/search.styl
+++ b/resources/styles/components/search.styl
@@ -6,10 +6,10 @@ $breakpoint-search-results = 980px
     constrain(grid-gap, 2.5vw)
     grid-template: "results sidebar" auto / 3fr 1fr
     grid-template-rows: max-content
-    grid-template-columns: auto
 
     +below($breakpoint-search-results)
       grid-template-areas: "results" "sidebar"
+      grid-template-columns: auto
 
   &-main
     grid-area: results

diff --git a/resources/views/pages/search.blade.php b/resources/views/pages/search.blade.php
index b2f063ce7072be2ce85daf76b70b92aa6120a4fc..9675bab542c41293f5fcec237549d069e44fb328 100644 (file)
--- a/resources/views/pages/search.blade.php
+++ b/resources/views/pages/search.blade.php
@@ -4,7 +4,7 @@
 
     <content class="pb-3v">
         <meta data-ga="event" data-ga-action="view_search_results" data-ga-category="engagment"
-              data-ga-options='{"search_term":"{{request()->get('q')}}"}'>
+              data-ga-options='{"search_term":"{{ request()->get('q') }}"}'>
         <text-block :title="$page->page_heading"/>
 
         <div class="search-results-layout">
@@ -16,7 +16,9 @@
                           class="flex justify-between items-center sm:block">
 
                         <search-field placeholder="{{ __('Saisissez votre recherche') }}"
-                                      value="{{request()->get('q')}}"></search-field>
+                                      value="{{ request()->get('q') }}"
+                                      :autofocus="{{ empty(request()->get('q')) ? 'true' : 'false' }}">
+                        </search-field>
 
                         <button
                             class="btn flex items-center py-3 px-8 font-display text-lg rounded ml-4 sm:mt-4 sm:mx-auto">