Fixes in ios-developmet-page

canopas · Dec 4, 2023 · 2c2fb92 · 2c2fb92
1 parent c152ad3
commit 2c2fb92
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 72 deletions.
diff --git a/nuxt-frontend/components/ios-app-development/CaseStudySection.vue b/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
@@ -65,10 +65,7 @@
       id="stickyParent"
       class="sticky-parent h-[300vh] xll:h-[240vh] 3xl:!h-[220vh] hidden lg:block"
     >
-      <div
-        class="sticky sticky top-0 max-h-full main overflow-hidden"
-        :class="{ '!top-[75px] xl:!top-[40px]': isScrollingUp }"
-      >
+      <div class="sticky sticky top-0 max-h-full main overflow-hidden">
         <swiper
           :direction="'vertical'"
           :slidesPerView="1"
@@ -78,15 +75,11 @@
           :mousewheel="{
             enabled: false,
             releaseOnEdges: true,
-            sensitivity: 1,
-            thresholdDelta: 1,
           }"
-          :touchReleaseOnEdges="true"
           :modules="modules"
           :allowTouchMove="false"
           class="swiper-container h-screen"
           @swiper="setSwiperRef"
-          @slideChange="onSlideChange"
         >
           <swiper-slide v-for="(portfolio, index) in portfolios" :key="index">
             <div class="flex flex-row justify-center h-screen">
@@ -106,7 +99,6 @@
                 </div>
                 <div
                   class="w-[19rem] xl:w-[33rem] mx-auto mt-44 xl:mt-72 description"
-                  :class="{ '!mt-12 xl:!mt-72': isScrollingUp }"
                 >
                   <h2 class="header-2 text-[#FFFFFF]">
                     {{ portfolio.desktopDescription }}
@@ -117,16 +109,6 @@
                     }}</span>
                   </div>
                 </div>
-                <div
-                  class="flex justify-end pr-[8%] 2xll:pr-[14%] cursor-pointer"
-                  :class="{ 'mt-[-45%] xl:mt-0': isScrollingUp }"
-                >
-                  <span
-                    @click="scrollToNext()"
-                    class="text-[#FFFFFF]/[0.80] mt-6 sub-h3-semibold"
-                    >SKIP</span
-                  >
-                </div>
               </div>
 
               <div
@@ -190,7 +172,6 @@ export default {
       lastScrollY: 0,
       isScrollingUp: false,
       scrollPosition: 0,
-      lastSlideReached: false,
       portfolios: [
         {
           title: "Justly",
@@ -247,17 +228,9 @@ export default {
   mounted() {
     document.addEventListener("scroll", this.handleScroll);
     document.addEventListener("wheel", this.handleWheel);
-    window.addEventListener("touchstart", this.handleTouchStart);
-    window.addEventListener("touchmove", this.handleTouchMove);
-    window.addEventListener("touchend", this.handleTouchEnd);
-    window.addEventListener("scroll", this.handleScrollTop);
   },
   unmounted() {
     document.removeEventListener("wheel", this.handleWheel);
-    window.removeEventListener("touchstart", this.handleTouchStart);
-    window.removeEventListener("touchmove", this.handleTouchMove);
-    window.removeEventListener("touchend", this.handleTouchEnd);
-    window.removeEventListener("scroll", this.handleScrollTop);
     document.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
@@ -279,33 +252,7 @@ export default {
         this.skipNext = true;
       }
     },
-    //handleTouch event
-    handleTouchStart(event) {
-      this.lastTouchY = event.touches[0].clientY;
-    },
-    handleTouchMove(event) {
-      if (this.lastTouchY !== null) {
-        const currentTouchY = event.touches[0].clientY;
-        if (currentTouchY > this.lastTouchY) {
-          this.skipNext = false;
-        } else if (currentTouchY < this.lastTouchY) {
-          this.skipNext = true;
-        }
-        this.lastTouchY = currentTouchY;
-      }
-    },
-    handleTouchEnd() {
-      this.lastTouchY = null;
-    },
-
-    scrollToNext() {
-      if (this.skipNext) {
-        this.$emit("scroll-to-next");
-      } else {
-        this.$emit("scroll-to-previous");
-      }
-    },
-    handleScrollTop() {
+    handleScroll() {
       const stickyParent = document.getElementById("stickyParent");
       const stickyTop = stickyParent.offsetTop;
       let scrollTop = window.scrollY;
@@ -317,25 +264,13 @@ export default {
           (window.innerHeight || document.documentElement.clientHeight)
       ) {
         this.swiperRef.mousewheel.enable();
-        this.swiperRef.allowTouchMove = true;
+        this.$emit("sectionFullscreen", true);
       } else {
         this.swiperRef.mousewheel.disable();
-        this.swiperRef.allowTouchMove = false;
+        this.$emit("sectionFullscreen", false);
       }
       this.lastScrollY = scrollTop;
     },
-    handleScroll() {
-      const windowHeight = window.innerHeight;
-      const lastSlide = document.querySelector(".main");
-      const lastSlidePosition = lastSlide.getBoundingClientRect().top;
-      if (lastSlidePosition <= windowHeight && lastSlidePosition >= 0) {
-        this.lastSlideReached = true;
-        this.isScrollingUp = window.scrollY < this.scrollPosition;
-      } else {
-        this.lastSlideReached = false;
-      }
-      this.scrollPosition = window.scrollY;
-    },
   },
   components: {
     Swiper,

diff --git a/nuxt-frontend/components/ios-app-development/LandingSection.vue b/nuxt-frontend/components/ios-app-development/LandingSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-ios-landing-background bg-opacity-10 py-10 3xl:outer-container lg:mt-28"
+    class="bg-ios-landing-background bg-opacity-10  3xl:outer-container lg:mt-28"
   >
     <div
       class="container px-4 pb-4 3xl:pb-28 text-left lg:flex mb-4 md:mb-7 lg:mb-14"

diff --git a/nuxt-frontend/pages/ios-app-development.vue b/nuxt-frontend/pages/ios-app-development.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <Header />
+    <Header v-if="isHeaderVisible" />
     <LandingSection />
     <DevelopmentSection />
-    <CaseStudySection />
+    <CaseStudySection  @sectionFullscreen="handleSectionFullscreen" />
     <CtaSection />
     <SuccessStorySection ref="iosSuccessstory" />
     <BlogSection />
@@ -46,6 +46,7 @@ const NewFooter = defineAsyncComponent(
 export default {
   data() {
     return {
+       isHeaderVisible: true,
       event: "",
       events: {
         iosSuccessstory: "view_ios_app_development_success_story",
@@ -78,6 +79,9 @@ export default {
     NewFooter,
   },
   methods: {
+     handleSectionFullscreen(isFullscreen) {
+      this.isHeaderVisible = !isFullscreen;
+    },
     sendEvent() {
       const event = this.events[elementInViewPort(this.$refs)];
       if (event && this.event !== event) {