UI/UX improvments (candice) and random filter

Author: quentinchichery

src/App.vue

@@ -28,7 +28,7 @@
         <div class="main-content">
           <router-view style="padding-right: 10px; padding-left: 10px" :restaurants="restaurants"/>
         </div>
-        <Button v-if="isMobile" @click="openFilter" class="filter-button">
+        <Button v-if="isMobile" @click="openFilter" class="filter-button bg-blue-400">
           <Filter class="w-4 h-4 mr-2"/> Filter
         </Button>
       </div>
@@ -65,12 +65,22 @@ const getButtonVariant = (targetPath) => {
   return route.path === targetPath ? 'default' : 'outline';
 };
 
-// Initialize reactive data
-const restaurants = ref(restaurantService.localFetchRestaurants());
+// Fisher-Yates shuffle algorithm
+const shuffleArray = (array) => {
+  const shuffledArray = [...array]; // Create a copy of the array
+  for (let i = shuffledArray.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+  }
+  return shuffledArray;
+};
+
+// Initialize reactive data with shuffling
+const restaurants = ref(shuffleArray(restaurantService.localFetchRestaurants()));
 
 // Update function to handle filtering in FilterComponent
 function updatedRestaurants(newData) {
-  restaurants.value = newData;
+  restaurants.value = shuffleArray(newData); // Shuffle the new data
 }
 
 const isModalOpen = ref(false);
@@ -136,6 +146,7 @@ a {
   left: 50%; /* Position the button's left edge at the horizontal center */
   transform: translateX(-50%); /* Shift the button back by half its width to center it */
   max-width: 400px; /* Optional: Limit the maximum width to keep it visually appealing */
+  width: 50%;
   padding: 10px 20px; /* Adjust for desired button size */
   border: none; /* Remove default border */
   border-radius: 5px; /* Round the corners */

src/components/FilterComponent.vue

@@ -82,7 +82,7 @@
           </Button>
         </div>
           <div v-show='contentVisibleTags'>
-           <ScrollArea class="h-28 rounded-md " type="always">
+           <!-- <ScrollArea class="h-48 rounded-md " type="always"> -->
               <FormField name="tags">
                 <FormItem>
                   <div class="flex flex-wrap justify-center space-x-1 space-y-1">
@@ -111,12 +111,12 @@
                   </div>
                 </FormItem>
               </FormField>
-            </ScrollArea>
+            <!-- </ScrollArea> -->
           </div>
 
         <div class="flex items-center justify-between w-full">
           <Button class="mt-3.5 ml-2" variant="ghost" @click="resetToggles">Effacer</Button>
-          <Button class="mt-3.5 mr-2" type="submit">Chercher</Button>
+          <Button class="mt-3.5 mr-2 bg-blue-500" type="submit">Chercher</Button>
         </div>
 
       </form>
@@ -179,7 +179,7 @@ const applyFilters = (values) => {
       const tagMatches = values.tags.length === 0 || item.tags.some(tag => values.tags.includes(tag));
       return cravingMatches && cityMatches && tagMatches;
     });
-    emit('filteredRestaurants', filteredRestaurants.value);
+  emit('filteredRestaurants', filteredRestaurants.value);
   };
 
 const onSubmit = handleSubmit((values) => {

src/components/Footer.vue

@@ -3,7 +3,7 @@
     <h1>
       Created with 💙 by <a href="https://www.instagram.com/camilledrs" target="_blank">@camilledrs</a> and <a href="https://www.instagram.com/quentinchichery" target="_blank">@quentinchichery</a>
     </h1>
-    <p>All rights reserved @ 2024</p>
+    <p>All rights reserved @ 2024 - 2025</p>
   </div>
 </template>
 

src/components/RestaurantCard.vue

@@ -44,6 +44,7 @@ img {
   text-align: center;
   color: white;
   font-weight: bold;
-  background-color: #454545; 
+  background-color: #454545;
+  padding: 7px;
 }
 </style>