[samples_index] Fix carousel edge cases and make mobile responsive (f…

…lutter#608) * Fix carousel ui issues * Update carousel to be mobile responsive
mannan541 · Dec 7, 2020 · d1b054c · d1b054c
1 parent 6b56115
commit d1b054c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 33 deletions.
diff --git a/web/samples_index/lib/src/carousel.dart b/web/samples_index/lib/src/carousel.dart
@@ -14,13 +14,30 @@ class Carousel {
 
   Element prevSlide, currentSlide, nextSlide;
 
+  num x0;
+  bool touched = false;
+
   Carousel.init({this.withArrowKeyControl = false}) {
     lastSlideIndex = slides.length - 1;
     currentSlideIndex = -1;
 
+    // Remove container empty space when no images are available
+    if (lastSlideIndex == -1) {
+      container.classes.clear();
+      return;
+    }
+
+    // Skip carousel decoration when only one image is available
+    if (lastSlideIndex == 0) {
+      currentSlide = slides[currentSlideIndex + 1];
+      currentSlide.classes.add('active');
+      return;
+    }
+
     _hideSlides();
     _initBullets();
     _initArrows();
+    _initGestureListener();
 
     if (withArrowKeyControl) {
       _initArrowKeyControl();
@@ -71,6 +88,30 @@ class Carousel {
     container.append(nextArrow);
   }
 
+  void _touchStartListener(TouchEvent e) {
+    x0 = e.changedTouches.first.client.x;
+    touched = true;
+  }
+
+  void _touchEndListener(TouchEvent e) {
+    if (touched) {
+      int dx = e.changedTouches.first.client.x - x0;
+
+      // dx==0 case is ignored
+      if (dx > 0 && currentSlideIndex > 0) {
+        _slideLeft();
+      } else if (dx < 0 && currentSlideIndex < lastSlideIndex) {
+        _slideRight();
+      }
+      touched = false;
+    }
+  }
+
+  void _initGestureListener() {
+    container.onTouchStart.listen(_touchStartListener);
+    container.onTouchEnd.listen(_touchEndListener);
+  }
+
   void _updateBullets() {
     final bullets =
         querySelector('.bullet-container').querySelectorAll('.bullet');

diff --git a/web/samples_index/web/styles.scss b/web/samples_index/web/styles.scss
@@ -68,6 +68,10 @@ $mode: cubic-bezier(0.17, 0.67, 0.55, 1.43);
 html, body {
   height: 100%;
   margin: 0;
+  @media screen and (max-width: $mobile-width) {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
 }
 
 body {
@@ -140,8 +144,6 @@ a {
   color: white;
   padding: 16px 125px 16px 125px;
   margin-bottom: 48px;
-
-
   @media screen and (max-width: $mobile-width) {
     padding: 8px 16px 8px 16px;
     margin-bottom: 16px;
@@ -220,7 +222,6 @@ a {
   justify-content: space-between;
   align-items: start;
   margin-bottom: 12px;
-
   @media screen and (max-width: $mobile-width) {
     flex-direction: column;
   }
@@ -233,32 +234,6 @@ a {
   }
 }
 
-.screenshots {
-  display: flex;
-  flex-direction: row;
-  height: 360px;
-  overflow-x: scroll;
-  margin: 48px 0 48px 0;
-
-  @media screen and (max-width: $mobile-width) {
-    height: 240px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    img {
-      flex: 0 0 auto;
-    }
-  }
-
-  img {
-    border-radius: 8px;
-    margin: 0 8px 0 8px;
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-
 .index-header {
   margin-left: 8px;
   margin-right: 8px;
@@ -428,12 +403,13 @@ a {
 // Carousel Container
 .slider-container {
   position: relative;
-  margin: 0 auto;
+  margin: -80px auto -60px auto;
   width: 800px;
   height: 600px;
-  max-width: 100%;
-  margin-top: -80px;
-  margin-bottom: -60px;
+  max-width: 95%;
+  @media screen and (max-width: $mobile-width) {
+    margin: -80px 4px -60px 4px;
+  }
 
   .bullet-container {
     position: absolute;
@@ -471,6 +447,9 @@ a {
     width: 70%;
     height: 60%;
     transform: translate(-50%, -50%);
+    @media screen and (max-width: $mobile-width) {
+      width: 100%
+    }
 
     .slider-single {
       position: absolute;
@@ -497,6 +476,10 @@ a {
         .slider-single-image {
           transform: translateX(-50%) scale(0);
         }
+
+        @media screen and (max-width: $mobile-width) {
+          display: none;
+        }
       }
 
       &.prev {
@@ -521,6 +504,10 @@ a {
         .slider-single-image {
           transform: translateX(50%) scale(0);
         }
+
+        @media screen and (max-width: $mobile-width) {
+          display: none;
+        }
       }
 
       &.active {
@@ -545,6 +532,9 @@ a {
     padding: 20px 20px;
     margin-right: -2px;
     cursor: pointer;
+    @media screen and (max-width: $mobile-width) {
+      display: none;
+    }
   }
 
   .slider-right {
@@ -558,6 +548,9 @@ a {
     padding: 20px 20px;
     margin-left: -2px;
     cursor: pointer;
+    @media screen and (max-width: $mobile-width) {
+      display: none;
+    }
   }
 
   .hidden {