finalize responsiveness

app.vue

@@ -10,13 +10,13 @@ const router = useRouter()
     <div class="flex flex-row m-4 items-center justify-start gap-2">
       <button 
       v-if="route.fullPath != '/'"
-      class="flex flex-row border-2 border-black rounded-full items-center justify-center px-2 w-20 h-11  hover:border-white hover:bg-black hover:text-white" 
+      class="flex flex-row border-2 border-black  bg-black  text-white rounded-full items-center justify-center px-2 w-20 h-11  hover:border-white hover:bg-white hover:text-black" 
       @click="router.back()">
       <ArrowLeftSVG />
       Back
       </button>
 
-      <NuxtLink v-else to="/" class="flex flex-row border-2 border-black rounded-full items-center justify-center px-2 min-w-20 h-11 text-2xl font-semibold hover:border-white hover:bg-black hover:text-white">
+      <NuxtLink v-else to="/" class="flex flex-row border-2 border-none bg-black text-white rounded-full items-center justify-center px-2 min-w-20 h-11 text-2xl font-semibold  hover:bg-white hover:text-black">
         J
         <SearchSVG class="mt-1" />
       </NuxtLink> 

assets/css/main.css

@@ -13,4 +13,4 @@ body {
     margin: 0 auto;
 }
 
- /* *{outline:1px solid red;}   */
+  *{outline:1px solid red;}   

components/Card.vue

@@ -6,7 +6,7 @@ defineProps(['smalltext', 'title', 'subtitle', 'image'])
 
 <template>
     <div
-        class="flex flex-row items-center justify-start gap-4 border-2 border-black mx-2 my-4 p-2 rounded-2xl backdrop-blur-3xl max-w-96">
+        class="flex flex-row items-center justify-start gap-4 border-2 border-black min-h-24 m-2 p-2 rounded-2xl backdrop-blur-3xl grow md:max-w-96">
         <div class="shrink-0">
             <img class="h-11" :src="image" alt="">
         </div>
@@ -16,7 +16,7 @@ defineProps(['smalltext', 'title', 'subtitle', 'image'])
                 {{ smalltext }}
             </h3>
             <div class="text-lg">
-                {{ title }} <br> ({{ subtitle }})
+                {{ title }} <br class="md:hidden"> ({{ subtitle }})
             </div>
         </div>
 

components/ErrorMessage.vue

@@ -1,5 +1,10 @@
+<script setup>
+defineProps(['type'])
+
+</script>
 <template>
-        <span class="flex w-full items-center justify-center"><slot></slot>
+    <span class="flex w-full items-center justify-center">
+        {{ type }}
     </span>
 
 </template>

components/MovieInteract.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex flex-col md:flex-row gap-2 items-center justify-center mb-4 md:flex-wrap">
+        <slot></slot>
+    </div>
+</template>

components/MovieResults.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="md:grid md:grid-cols-4 md:gap-4">
+        <slot></slot>
+    </div>
+</template>

components/NavLink.vue

@@ -0,0 +1,8 @@
+<script setup>
+defineProps(['to'])
+</script>
+<template>
+    <NuxtLink class="border-2 px-4 py-2 rounded-full text-xl border-none bg-black text-white hover:bg-white hover:text-black" :to="to">
+        <slot></slot>
+    </NuxtLink>
+</template>

components/SearchButton.vue

@@ -1,3 +1,3 @@
 <template>
-    <button class="flex flex-row  border-2 border-black rounded-full px-4 py-2 items-center justify-center h-11 w-[90%] md:w-fit" @click="$emit('click')"><SearchSVG />Search</button>
+    <button class="flex flex-row gap-2  bg-black text-white rounded-full px-4 py-2 items-center justify-center h-11 w-[90%] md:w-fit hover:bg-white hover:text-black" @click="$emit('click')"><SearchSVG />Search</button>
 </template>

components/SearchInput.vue

@@ -8,5 +8,5 @@ function handleInput(e) {
 <template>
 
     <input
-            class="outline-none border-none bg-black rounded-full px-4 py-2 text-white w-[90%] items-center justify-center h-11 md:w-[50%]" placeholder="Search movies" :value="searchTerm" @input="handleInput" />
+            class="outline-none border-2 border-black rounded-full px-4 py-2 w-[90%] items-center justify-center h-11 md:w-[50%]" placeholder="Search movies" :value="searchTerm" @input="handleInput" />
 </template>

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-col w-screen items-center  mx-4 gap-6">
-        <NuxtLink class="border-2 px-4 py-2 rounded-full border-black text-xl hover:border-white hover:bg-black hover:text-white" to="/google">Search Google</NuxtLink>
-        <NuxtLink class="border-2 px-4 py-2 rounded-full border-black text-xl  hover:border-white hover:bg-black hover:text-white" to="/movies">Search Movies</NuxtLink>
+        <NavLink to="/google">Search Google</NavLink>
+        <NavLink to="/movies">Search Movies</NavLink>
     </div>
 
 </template>

pages/movies.vue

@@ -1,50 +1,41 @@
 <script setup>
 import axios from 'axios'
 const searchTerm = ref("");
-const keyExists = ref(true);
+const apiError = ref(false);
 const movies = ref([])
-const ErrorMessage = ref("")
+const movieError = ref(false)
 const runtimeConfig = useRuntimeConfig()
 function handleSearch(n) {
     searchTerm.value = n
 }
 
 async function searchMovies() {
     try {
-
         const response = await axios.get('https://www.omdbapi.com/?apikey=' + runtimeConfig.public.API_KEY + '&s=' + searchTerm.value);
-        console.log("Success")
-        console.log(response.data);
         movies.value = response.data.Search
         keyExists.value = true
         if (response.data.Error != null) {
-            ErrorMessage.value = response.data.Error
+            movieError.value = response.data.Error
         } else {
-            ErrorMessage.value = null
+            movieError.value = false
         }
     } catch (error) {
-        console.log("I have errored")
-        ErrorMessage.value = response.data.Error
+        movieError.value = response.data.Error
     }
 }
 </script>
 
 <template>
-    <div class="flex flex-col md:flex-row gap-2 items-center justify-center mb-4">
-
-
+    <MovieInteract>
         <SearchInput @input="handleSearch" />
         <SearchButton @click="searchMovies" />
+    </MovieInteract>
 
-        <span v-if="keyExists == false">API Key incorrect</span>
-
-    </div>
-
-    <!-- <ErrorMessage v-if="ErrorMessage != null">
-        {{ ErrorMessage }}
-    </ErrorMessage> -->
-
-    <Card v-for="movie in movies" :smalltext="movie.Type" :title="movie.Title" :subtitle="movie.Year"
-        :image="movie.Poster" />
+    <ErrorMessage v-if="movieError" :type="movieError" />
+    <ErrorMessage v-if="apiError" :type="apiError" />
 
+    <MovieResults>
+        <Card v-for="movie in movies" :smalltext="movie.Type" :title="movie.Title" :subtitle="movie.Year"
+            :image="movie.Poster" />
+    </MovieResults>
 </template>