Fix/Responsive Home NavBar e Footer

salvatore-impellizzeri · salvatore-impellizzeri · commit 684c11240fe8 · 2024-12-02T23:23:43.000+01:00
diff --git a/src/Footer/Components/BottFooter.vue b/src/Footer/Components/BottFooter.vue
@@ -19,7 +19,7 @@ export default {
   <!-- Divider -->
   <hr class="w-11/12 mx-auto h-1 mb-6 text-gray-200">
   
-  <div class="text-[#BDAFA2] py-16">
+  <div class="text-[#BDAFA2] py-16 sm:scale-90">
     <!-- Links -->
     <div class="flex justify-center space-x-8 mb-6 text-sm font-medium">
       <a
diff --git a/src/Footer/Components/TopFooter.vue b/src/Footer/Components/TopFooter.vue
@@ -14,13 +14,13 @@ export default {
 <template>
   <div class="w-full py-16">
     <!-- Contenitore del top footer -->
-    <div class="flex flex-col md:flex-row items-center justify-between max-w-6xl mx-auto px-6 space-y-6 md:space-y-0">
+    <div class="flex flex-col md:flex-row sm:flex-wrap sm:gap-9 sm:justify-center items-center justify-between max-w-6xl mx-auto px-6 space-y-6 md:space-y-0">
       <!-- Sezione di Testo -->
       <div class="text-center md:text-left">
         <h2 class="font-bold text-2xl drop-shadow-md text-white mb-2">
           Vuoi inserire i tuoi appartamenti?
         </h2>
-        <p class="text-md text-white drop-shadow-md	">
+        <p class="text-md text-white drop-shadow-md	sm:text-center">
           Registrati o fai l'accesso per iniziare subito a condividere i tuoi spazi con gli altri!
         </p>
       </div>
diff --git a/src/Header/AppHeader.vue b/src/Header/AppHeader.vue
@@ -22,7 +22,7 @@ export default {
   <div>
     <NavBar/>
   </div>
-  <div class="absolute top-[68px] left-0 right-0">
+  <div class="absolute top-[50px] left-0 right-0">
     <JumboStatic />
   </div>
 </template>
diff --git a/src/Header/Components/JumboStatic.vue b/src/Header/Components/JumboStatic.vue
@@ -41,7 +41,7 @@ export default {
     ></div>
 
     <!-- SearchBar -->
-    <SearchBar class="absolute top-[25%] z-20" />
+    <SearchBar class="absolute top-[25%] z-20 sm:w-[270px]" />
 
     <!-- Sfumatura graduale in basso -->
     <div
diff --git a/src/Header/Components/NavBar.vue b/src/Header/Components/NavBar.vue
@@ -62,10 +62,10 @@ export default {
 <template>
   <header
     class='w-full z-50 transition-all duration-300 shadow-nav fixed top-0 left-0 right-0 bg-[#B49578] py-4'>
-    <div class="container mx-auto flex items-center justify-between px-4 md:px-8">
+    <div class="container mx-auto flex items-center justify-between px-4 sm:px-3 md:px-8">
 
       <!-- Logo -->
-      <div class="text-[#EDEEF0] text-2xl w-14 h-10 font-bold">
+      <div class="text-[#EDEEF0] text-2xl w-14 h-10 font-bold sm:hidden">
         <router-link to="/" class="transition-all ease-in-out duration-300 hover:opacity-70 flex items-center">
           <span>MilanBnB</span>
         </router-link>
diff --git a/src/components/ApartmentList.vue b/src/components/ApartmentList.vue
@@ -8,10 +8,8 @@ export default {
     return {
       store,
       apartments: [],
-      perPage: 4,
-      currentPage: 0,
-      hasAnimated: false, 
-      transition: false
+      currentIndex: 0,
+      itemsPerPage: 4, // Numero di card visibili per volta
     };
   },
 
@@ -21,6 +19,12 @@ export default {
 
   mounted() {
     this.getApartments();
+    this.updateItemsPerPage();
+    window.addEventListener('resize', this.updateItemsPerPage);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateItemsPerPage);
   },
 
   watch: {
@@ -32,94 +36,104 @@ export default {
   methods: {
     getApartments() {
       axios
-      .get('http://127.0.0.1:8000/api/apartments')
+        .get('http://127.0.0.1:8000/api/apartments')
         .then((res) => {
           this.apartments = res.data.data.filter(
-            apartment => apartment.is_visible && apartment.sponsorships && apartment.sponsorships.length > 0 && !apartment.sponsorships.some(sponsorship => sponsorship.name === 'No sponsorship')
+            (apartment) =>
+              apartment.is_visible &&
+              apartment.sponsorships &&
+              apartment.sponsorships.length > 0 &&
+              !apartment.sponsorships.some((sponsorship) => sponsorship.name === 'No sponsorship')
           );
 
           this.apartments.sort((a, b) => {
             const priority = { Gold: 1, Silver: 2, Bronze: 3 };
-            const aSponsor = a.sponsorships[0]?.name || "Bronze";
-            const bSponsor = b.sponsorships[0]?.name || "Bronze";
+            const aSponsor = a.sponsorships[0]?.name || 'Bronze';
+            const bSponsor = b.sponsorships[0]?.name || 'Bronze';
             return priority[aSponsor] - priority[bSponsor];
           });
 
           store.suggestions = this.apartments.map((apartment) => apartment.address);
-
         })
         .catch((error) => console.error('Errore:', error));
     },
 
-    NextPage() {
-    if (this.currentPage < Math.ceil(this.apartments.length / this.perPage) - 1) {
-      this.currentPage++;
-    }
-    this.hasAnimated = true;
-  },
+    updateItemsPerPage() {
+      if (window.innerWidth >= 1024) {
+        this.itemsPerPage = 4;
+      } else if (window.innerWidth >= 768) {
+        this.itemsPerPage = 3;
+      } else {
+        this.itemsPerPage = 1;
+      }
+    },
+
+    NextCard() {
+      if (this.currentIndex < this.apartments.length - this.itemsPerPage) {
+        this.currentIndex = this.currentIndex + this.itemsPerPage;
+      }
+    },
 
-    PrevPage() {
-      if (this.currentPage > 0) {
-        this.currentPage--;
+    PrevCard() {
+      if (this.currentIndex > 0) {
+        this.currentIndex = this.currentIndex - this.itemsPerPage;
       }
-    }
+    },
   },
 
   computed: {
-    paginatedApartments() {
-      const start = this.currentPage * this.perPage;
-      const end = start + this.perPage;
-      return this.apartments.slice(start, end);
+    visibleApartments() {
+      return this.apartments.slice(this.currentIndex, this.currentIndex + this.itemsPerPage);
     },
   },
 };
 </script>
 
 <template>
-  <div class="max-w-7xl mx-auto h-[432px] relative">
-    <!-- Visualizzazione degli appartamenti -->
-    <transition-group
-      name="fade"
-      tag="div"
-      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
-      :key="currentPage"
-    >
-      <Card
-        v-for="(property, index) in paginatedApartments"
-        :key="property.id"
-        :id="property.id"
-        :user_id="property.user_id"
-        :title="property.title"
-        :rooms="property.rooms"
-        :beds="property.beds"
-        :bathrooms="property.bathrooms"
-        :square_meters="property.square_meters"
-        :address="property.address"
-        :latitude="property.latitude"
-        :longitude="property.longitude"
-        :image="property.cover_image"
-        :services="property.services"
-        :is_visible="Boolean(property.is_visible)"
-        class="transform transition duration-500 ease-in-out hover:scale-105"
-      />
-    </transition-group>
-
-    <!-- Bottone per la pagina precedente -->
+  <div class="max-w-7xl mx-auto relative px-8 sm:px-6 lg:px-8 lg:scale-75 2xl:scale-90 md:w-full md:scale-75 xl:scale-90">
+    <!-- Bottone per la slide precedente -->
     <button 
-      @click="PrevPage" 
-      class="absolute top-1/2 -left-20 transform -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#B49578] text-white rounded-full shadow-md hover:bg-[#EDEEF0] hover:text-[#B49578] hover:shadow-lg transition-all hover:-translate-x-1 duration-300 ease-in-out"
+      @click="PrevCard" 
+      class="absolute top-1/2 -left-12 transform -translate-y-1/2 w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center bg-[#B49578] text-white rounded-full shadow-md hover:bg-[#EDEEF0] hover:text-[#B49578] hover:shadow-lg transition-all hover:-translate-x-1 duration-300 ease-in-out z-10"
     >
-      <span class="text-xl font-bold">
+      <span class="text-sm sm:text-xl font-bold">
         <i class="fa-solid fa-arrow-left"></i>
       </span>
     </button>
 
-    <!-- Bottone per la pagina successiva -->
+    <!-- Visualizzazione degli appartamenti in modalità carosello -->
+    <div class="overflow-visible">
+      <div
+        class="flex gap-6 transition-all ease-in-out duration-500"
+        :style="{ transform: `-translateX(${currentIndex * (100 / itemsPerPage)}%)` }"
+      >
+        <Card
+          v-for="(property, index) in visibleApartments"
+          :key="property.id"
+          :id="property.id"
+          :user_id="property.user_id"
+          :title="property.title"
+          :rooms="property.rooms"
+          :beds="property.beds"
+          :bathrooms="property.bathrooms"
+          :square_meters="property.square_meters"
+          :address="property.address"
+          :latitude="property.latitude"
+          :longitude="property.longitude"
+          :image="property.cover_image"
+          :services="property.services"
+          :is_visible="Boolean(property.is_visible)"
+          class="w-full md:w-full lg:w-1/3 sm:w-full transform transition duration-500 ease-in-out hover:scale-105"
+        />
+      </div>
+    </div>
+
+    <!-- Bottone per la slide successiva -->
     <button 
-      @click="NextPage" 
-      class="absolute top-1/2 -right-20 transform -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#B49578] text-white rounded-full shadow-md hover:bg-[#EDEEF0] hover:text-[#B49578] hover:shadow-lg transition-all hover:translate-x-1 duration-300 ease-in-out"
+      @click="NextCard" 
+      class="absolute top-1/2 -right-12 transform -translate-y-1/2 w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center bg-[#B49578] text-white rounded-full shadow-md hover:bg-[#EDEEF0] hover:text-[#B49578] hover:shadow-lg transition-all hover:translate-x-1 duration-300 ease-in-out z-10"
     >
-      <span class="text-xl font-bold">
+      <span class="text-sm sm:text-xl font-bold">
         <i class="fa-solid fa-arrow-right"></i>
       </span>
     </button>
@@ -133,6 +147,7 @@ export default {
   </div>
 </template>
 
+
 <style scoped>
 @keyframes fadeIn {
   from {
@@ -157,4 +172,8 @@ export default {
   opacity: 0;
   transform: translateX(20px);
 }
+
+.scale-25{
+  scale: 0.25;
+}
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,6 +2,13 @@
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
+    screens: {
+      '2xl': {'max': '1535px'}, // => @media (max-width: 1535px) { ... }
+      'xl': {'max': '1279px'}, // => @media (max-width: 1279px) { ... }
+      'lg': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
+      'md': {'max': '767px'}, // => @media (max-width: 767px) { ... }
+      'sm': {'max': '639px'}, // => @media (max-width: 639px) { ... }
+    },
     extend: {},
   },
   plugins: [],
