update: shorten quicksearch text

And move description of what can be searched down below.

Author: Roardom

resources/sass/components/_quick_search.scss

@@ -79,7 +79,7 @@
 
 .quick-search__result-link,
 .quick-search__result--empty,
-.quick-search__result--keep-typing {
+.quick-search__result--default {
     display: flex;
     background-color: var(--quick-search-bg);
     text-decoration: none;
@@ -92,7 +92,7 @@
 }
 
 .quick-search__result--empty,
-.quick-search__result--keep-typing {
+.quick-search__result--default {
     padding: 0;
 }
 

resources/views/partials/quick-search-dropdown.blade.php

@@ -3,22 +3,29 @@
         <input
             class="quick-search__input"
             type="text"
-            placeholder="Search Movie, TV Series or People"
+            placeholder="Search"
             x-model="searchText"
             x-on:input.debounce.100ms="performSearch"
             x-ref="quickSearch"
             x-on:keydown.down.prevent="focusFirstResult"
             x-on:keydown.up.prevent="focusLastResult"
             x-on:focus="searchPerformed = true"
         />
-        <template x-if="searchPerformed && searchResults.length === 0">
+        <template x-if="searchResults === null">
+            <div class="quick-search__results">
+                <article class="quick-search__result--default">
+                    <p class="quick-search__result-text">Search movies, tv series, or people</p>
+                </article>
+            </div>
+        </template>
+        <template x-if="Array.isArray(searchResults) && searchResults.length === 0">
             <div class="quick-search__results">
                 <article class="quick-search__result--empty">
                     <p class="quick-search__result-text">No results found</p>
                 </article>
             </div>
         </template>
-        <template x-if="searchResults.length > 0">
+        <template x-if="Array.isArray(searchResults) && searchResults.length > 0">
             <div class="quick-search__results" x-ref="searchResults">
                 <template x-for="result in searchResults" :key="result.id">
                     <article
@@ -55,12 +62,12 @@ class="quick-search__result-type"
         function quickSearch() {
             return {
                 searchText: '',
-                searchResults: [],
+                searchResults: null,
                 searchPerformed: false,
                 performSearch() {
                     this.searchPerformed = true;
                     if (this.searchText.length === 0) {
-                        this.searchResults = [];
+                        this.searchResults = null;
                         return;
                     }