From c1cf42de92e93bcf69876dac2b678180325349d6 Mon Sep 17 00:00:00 2001
From: Sebastian Lay <mail@sebastian-lay.de>
Date: Wed, 28 Jun 2023 16:36:12 +0200
Subject: [PATCH] Improved feedback when no results were found

---
 css/style.css      |  1 +
 faq.html           |  2 +-
 guide.html         |  4 ++--
 index.html         | 16 +++++++++++++---
 js/script-index.js |  5 +++++
 random.html        |  4 ++--
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5171bba..4ba98e7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -268,6 +268,7 @@ a {
 
 a:hover, h1 a {
   text-decoration: none;
+  cursor: pointer;
 }
 
 a.active {
diff --git a/faq.html b/faq.html
index 8c5a56b..0191f8b 100644
--- a/faq.html
+++ b/faq.html
@@ -111,6 +111,6 @@
     </main>
   </div>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-faq.js?d=20230625"></script>
+  <script src="js/script-faq.js?d=20230628"></script>
 </body>
 </html>
diff --git a/guide.html b/guide.html
index 0244bb7..4b9d5b8 100644
--- a/guide.html
+++ b/guide.html
@@ -72,9 +72,9 @@
       </ul>
     </main>
   </div>
-  <script src="js/current-films.js?d=20230625"></script>
+  <script src="js/current-films.js?d=20230628"></script>
   <script src="js/guide.js"></script>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-guide.js?d=20230625"></script>
+  <script src="js/script-guide.js?d=20230628"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
index 6b59fc4..b04e265 100644
--- a/index.html
+++ b/index.html
@@ -82,12 +82,22 @@
             <div title="price range">{{formatPrice(film.price)}}</div>
           </aside>
         </li>
+        <li v-if="films.length === 0">
+          <img src="images/small/random.png" srcset="images/small/random.png 1x, images/random.png 2x" alt="Nothing found">
+          <h2>Nothing found :(</h2>
+          <p>
+            <span>None of the films match the seleted criteria.</span>
+            <span>Adjust the search term or filters to find any results.</span>
+          </p>
+          <aside>
+            <div><a v-on:click="reset">Clear all filters</a></div>
+          </aside>
+        </li>
       </ul>
-      <h2 v-if="films.length === 0">nothing here :(</h2>
     </main>
   </div>
-  <script src="js/current-films.js?d=20230625"></script>
+  <script src="js/current-films.js?d=20230628"></script>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-index.js?d=20230625"></script>
+  <script src="js/script-index.js?d=20230628"></script>
 </body>
 </html>
diff --git a/js/script-index.js b/js/script-index.js
index af8d8f8..632a837 100644
--- a/js/script-index.js
+++ b/js/script-index.js
@@ -76,6 +76,11 @@ Vue.createApp({
     formatPrice: function(price) {
       return "€".repeat(price);
     },
+    reset: function() {
+      this.search = '';
+      this.type = 'all';
+      this.format = 'all';
+    },
     sort: function(button) {
       if(this.sortBy === button.target.innerText.toLowerCase()) {
         this.sortDir === 'asc' ? this.sortDir = 'desc' : this.sortDir = 'asc';
diff --git a/random.html b/random.html
index a849d50..0090270 100644
--- a/random.html
+++ b/random.html
@@ -71,8 +71,8 @@
       </ul>
     </main>
   </div>
-  <script src="js/current-films.js?d=20230625"></script>
+  <script src="js/current-films.js?d=20230628"></script>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-random.js?d=20230625"></script>
+  <script src="js/script-random.js?d=20230628"></script>
 </body>
 </html>