From bbf36515d4e0386524e911f4a5321d470e68c431 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 4 Sep 2019 11:56:33 +0200
Subject: [PATCH] Done #2771 @0.5

---
 resources/js/components/SearchField.vue | 7 ++++++-
 resources/styles/components/search.styl | 2 +-
 resources/views/pages/search.blade.php  | 6 ++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/SearchField.vue b/resources/js/components/SearchField.vue
index 56889a7..0820879 100644
--- 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 dd1a884..8222441 100644
--- 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 b2f063c..9675bab 100644
--- 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">
-- 
2.39.5