Merge pull request #17 from mudmykola/feature/CRJ_optimization

refactor(Home): changed the structure and adapted the mobile version
mudmykola · Aug 31, 2024 · 69a83d3 · 69a83d3
2 parents 1eb0437 + bf3c64a
commit 69a83d3
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 172 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,5 +1,13 @@
-index.html,1725086648941,f90fee2b73ca0f2054ee47d967dfdcd8e604dd3ce21465ba132c08a334f1ecec
-data/cartoons.json,1725086648638,f9e2b8b20dfdbe644aff3fb12576a11a60c8d965775117503f85d2c4957a2d78
-assets/FavoriteComponent-D-m1Vqz0.js,1725086648942,fb5f47bf40fa9e432fb00293f65f4619341bbd05b7dde6535903da683f9f82c7
-assets/index-BpTPr3PL.css,1725086648942,a2252c6228e0bf8105ee78148276a1b85f32f66cdd5fa9a361d255d9530af555
-assets/index-CjP5kf8-.js,1725086648941,1a822c2d8e9ae90efe28df8a8d0752cd7a306d258e76a618e3f4179647f7975b
+index.html,1725095498631,481aa9bd7965d9fdb36605e7d32d92782281aaa219b2eb4c3d89aa5cf7cbd32f
+assets/fa-v4compatibility-BX8XWJtE.woff2,1725095498631,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
+data/cartoons.json,1725095498252,f9e2b8b20dfdbe644aff3fb12576a11a60c8d965775117503f85d2c4957a2d78
+assets/fa-v4compatibility-B9MWI-E6.ttf,1725095498631,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
+assets/FavoriteComponent-BVsrdbGi.js,1725095498632,dec1dac6ddbe9fbb08d452234ca4b17341403610df764c9ba4716227e184b984
+assets/fa-regular-400-DgEfZSYE.woff2,1725095498632,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
+assets/fa-regular-400-Bf3rG5Nx.ttf,1725095498631,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
+assets/fa-brands-400-O7nZalfM.woff2,1725095498631,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
+assets/fa-solid-900-DOQJEhcS.woff2,1725095498631,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
+assets/fa-brands-400-Dur5g48u.ttf,1725095498631,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
+assets/index-D_hPrJbN.css,1725095498632,4efbe42b9c83b77958b4abad7a0eebb3585b3daf19651e6720c0c208599e02ff
+assets/index-C67CMuiw.js,1725095498631,ef29291cf900364b94bc316461645e9bbde2a28e0733ac2d3992e832dfdcb2e3
+assets/fa-solid-900-BV3CbEM2.ttf,1725095498632,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     ]
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "axios": "^1.7.4",
     "dotenv": "^16.4.5",
     "emoji-mart": "^5.6.0",

diff --git a/src/components/cart/MovieDetails.vue b/src/components/cart/MovieDetails.vue
@@ -54,10 +54,10 @@ const goBack = () => {
 
 <template>
   <DefaultLayout>
-    <div class="p-6 max-w-full mx-auto bg-gray-900 text-white">
+    <div class="p-4 sm:p-6 max-w-full mx-auto bg-gray-900 text-white">
       <button
         @click="goBack"
-        class="mb-4 p-2 bg-red-600 text-white rounded-md flex items-center hover:bg-red-700 transition duration-300"
+        class="mb-4 p-3 bg-red-600 text-white rounded-md flex items-center hover:bg-red-700 transition duration-300"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -80,15 +80,15 @@ const goBack = () => {
           <img
             :src="movieStore.movie.posterUrl"
             alt="Movie Poster"
-            class="w-full h-56 md:h-80 object-cover rounded-md shadow-md"
+            class="w-full h-64 md:h-80 object-cover rounded-md shadow-lg"
           />
         </div>
 
         <div class="flex-1 md:pl-6">
-          <h1 class="text-3xl md:text-4xl font-bold mb-4">
+          <h1 class="text-2xl md:text-3xl font-bold mb-4">
             {{ movieStore.movie.title }}
           </h1>
-          <p class="text-base md:text-lg mb-4">
+          <p class="text-sm md:text-base mb-4">
             {{ movieStore.movie.description }}
           </p>
 
@@ -99,7 +99,7 @@ const goBack = () => {
               class="mb-6"
             >
               <h2
-                class="text-xl md:text-2xl font-semibold mb-2 cursor-pointer flex items-center justify-between p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-300"
+                class="text-lg md:text-xl font-semibold mb-2 cursor-pointer flex items-center justify-between p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-300"
                 @click="movieStore.toggleSeason(season.seasonNumber)"
               >
                 {{ seasonTitle }} {{ season.seasonNumber }}
@@ -133,7 +133,7 @@ const goBack = () => {
                   :class="{
                     'text-red-500': movieStore.currentEpisode === episode,
                   }"
-                  class="mb-2 cursor-pointer hover:underline"
+                  class="mb-2 cursor-pointer hover:underline transition duration-300"
                 >
                   {{ episode.episodeNumber }}. {{ episode.title }}
                 </li>
@@ -144,20 +144,21 @@ const goBack = () => {
       </div>
 
       <div v-if="movieStore.currentEpisode" ref="episodePlayer" class="mt-6">
-        <h3 class="text-xl md:text-2xl font-semibold mb-2">
+        <h3 class="text-lg md:text-xl font-semibold mb-2">
           {{ movieStore.currentEpisode.title }}
         </h3>
         <iframe
           v-if="movieStore.currentEpisode.videoUrl"
           :src="getIframeSrc(movieStore.currentEpisode.videoUrl)"
-          class="w-full h-[50vh] md:h-[80vh]"
+          class="w-full h-[50vh] md:h-[60vh] rounded-md border border-gray-800 shadow-lg"
           frameborder="0"
           allowfullscreen
         ></iframe>
       </div>
+
       <div
         v-if="movieStore.currentEpisode"
-        class="mt-6 flex justify-center space-x-4"
+        class="mt-6 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"
       >
         <button
           @click="
@@ -184,8 +185,9 @@ const goBack = () => {
           {{ buttonNextEpisode }}
         </button>
       </div>
-      <div class="comment">
-        <div v-if="movieStore.currentEpisode" class="mt-8">
+
+      <div class="comment mt-8">
+        <div v-if="movieStore.currentEpisode">
           <MovieComments :movieId="route.params.id" />
         </div>
 

diff --git a/src/components/home/HomeComponent.vue b/src/components/home/HomeComponent.vue
@@ -3,16 +3,12 @@ import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useFavoritesStore } from '@/stores/useFavoritesStore.js';
 
-// Тексти для шаблону
 const welcomeMessage = 'Ласкаво просимо до CartoonJoy';
 const searchPlaceholder = 'Пошук мультфільмів...';
-const sortLabel = 'Сортувати за:';
 const newestOption = 'Найновіші';
 const oldestOption = 'Найстаріші';
 const featuredMoviesTitle = 'Найкращі мультфільми';
 const noResultsMessage = 'По вашому запиту нічого не найшло.';
-const addToFavorites = 'Додати до улюблених';
-const removeFromFavorites = 'Видалити з улюблених';
 
 const featuredMovies = ref([]);
 const searchQuery = ref('');
@@ -80,92 +76,109 @@ const navigateToMovie = (id) => {
 
 <template>
   <div class="home-container p-4">
-    <h1 class="text-3xl font-bold mb-8">{{ welcomeMessage }}</h1>
-    <div class="search-section mb-8">
-      <input
-        type="text"
-        v-model="searchQuery"
-        :placeholder="searchPlaceholder"
-        class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-    </div>
-    <div class="sort-section mb-8 flex justify-between items-center">
-      <span class="text-lg font-medium">{{ sortLabel }}</span>
+    <h1 class="text-3xl font-bold mb-4">{{ welcomeMessage }}</h1>
+
+    <div
+      class="flex flex-col gap-4 mb-4 sm:flex-row sm:justify-between sm:gap-2"
+    >
+      <div class="relative flex-grow max-w-full sm:max-w-xs">
+        <input
+          type="text"
+          v-model="searchQuery"
+          :placeholder="searchPlaceholder"
+          class="w-full p-3 pr-10 border rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <button
+          @click="searchQuery = ''"
+          class="absolute inset-y-0 right-0 px-4 py-2 text-sm bg-gray-800 text-white rounded-r-lg flex items-center justify-center hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            class="w-5 h-5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
       <select
         v-model="sortOption"
-        class="border rounded-lg p-2 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        class="border rounded-lg p-2 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       >
         <option value="newest">{{ newestOption }}</option>
         <option value="oldest">{{ oldestOption }}</option>
       </select>
     </div>
-    <section class="featured-section mb-8">
+
+    <section class="featured-section">
       <h2 class="text-2xl font-semibold mb-4">{{ featuredMoviesTitle }}</h2>
       <div
         v-if="sortedMovies.length > 0"
-        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
+        class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4"
       >
         <div
           v-for="movie in sortedMovies"
           :key="movie.id"
-          class="bg-white p-4 border rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow"
+          class="relative bg-white p-4 border rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow flex flex-col"
           @click="navigateToMovie(movie.id)"
         >
-          <div class="mb-4 h-[500px]">
+          <div class="relative h-48 mb-2 overflow-hidden rounded-lg">
             <img
               :src="movie.posterUrl"
               :alt="`Poster for ${movie.title}`"
-              class="w-full h-full object-cover rounded-lg"
+              class="w-full h-full object-cover"
             />
-          </div>
-          <h3 class="text-xl font-semibold mb-2 truncate">
-            {{ movie.title }}
-          </h3>
-          <p class="text-gray-600 truncate">
-            {{ movie.description }}
-          </p>
-          <button
-            @click="toggleFavorite(movie)"
-            class="mt-2 p-3 border rounded-lg text-sm transition-colors duration-200 ease-in-out hover:scale-105"
-            :class="{
-              'bg-red-600 text-white border-red-600 hover:bg-red-700':
-                isFavorite(movie.id),
-              'bg-gray-300 text-black border-gray-400 hover:bg-gray-400':
-                !isFavorite(movie.id),
-            }"
-          >
-            <svg
-              v-if="isFavorite(movie.id)"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              class="w-5 h-5 inline-block mr-2"
+            <button
+              @click.stop="toggleFavorite(movie)"
+              class="absolute top-2 right-2 bg-red-600 text-white p-2 rounded-full shadow-lg border border-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center justify-center"
             >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5.121 9.879a3 3 0 114.242-4.242L12 6.585l2.637-2.948a3 3 0 114.242 4.242L12 14.415l-6.879-6.536z"
-              />
-            </svg>
-            <svg
-              v-else
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              class="w-5 h-5 inline-block mr-2"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C12.09 3.81 13.76 3 15.5 3 18.58 3 21 5.42 21 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
-              />
-            </svg>
-            {{ isFavorite(movie.id) ? removeFromFavorites : addToFavorites }}
-          </button>
+              <svg
+                v-if="isFavorite(movie.id)"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                class="w-5 h-5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5.121 9.879a3 3 0 114.242-4.242L12 6.585l2.637-2.948a3 3 0 114.242 4.242L12 14.415l-6.879-6.536z"
+                />
+              </svg>
+              <svg
+                v-else
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                class="w-5 h-5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C12.09 3.81 13.76 3 15.5 3 18.58 3 21 5.42 21 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="flex-1 flex flex-col justify-between">
+            <h3 class="text-sm font-semibold mb-1 truncate">
+              {{ movie.title }}
+            </h3>
+            <p class="text-gray-600 text-xs truncate mb-2">
+              {{ movie.description }}
+            </p>
+          </div>
         </div>
       </div>
       <div v-else>