feat: touch slider for modals.

src/js/components/UiModal.vue

@@ -3,33 +3,34 @@
         <div class="modal-wrap"
             v-if="isOpen || keepMarkup"
             v-on:click="handleModalClick">
-
-            <div class="modal" tabindex="-1" role="dialog"
-                v-show="isOpen || !keepMarkup"
-                v-bind:class="modalClasses"
-                v-on:keydown="handleModalKeydown"
-                v-bind:style="{ width: `${width}px` }"
-                v-on:click.prevent.stop>
-                <header class="modal__header" v-bind:class="{
-                    'modal__header--has-title': $slots.header !== undefined,
-                }">
-                    <section v-if="$slots.header" class="modal__header__title">
-                        <slot name="header"/>
-                    </section>
-                    <button class="modal__close" type="button"
-                        v-if="!hideCloseButton"
-                        v-on:click="handleModalClick">
-                        <span class="modal__close-icon">
-                            <icon-close/> Close
-                        </span>
-                    </button>
-                </header>
-                <div class="modal__wrap">
-                    <div class="modal__container" ref="modalContainer" v-bind:class="modalContainerClass">
-                        <slot/>
+            <Component :is="ModalWrapCmp" class="modal-wrap__container">
+                <div class="modal" tabindex="-1" role="dialog"
+                    v-show="isOpen || !keepMarkup"
+                    v-bind:class="modalClasses"
+                    v-on:keydown="handleModalKeydown"
+                    v-bind:style="{ width: `${width}px` }"
+                    v-on:click.prevent.stop>
+                    <header class="modal__header" v-bind:class="{
+                        'modal__header--has-title': $slots.header !== undefined,
+                    }">
+                        <section v-if="$slots.header" class="modal__header__title">
+                            <slot name="header"/>
+                        </section>
+                        <button class="modal__close" type="button"
+                            v-if="!hideCloseButton"
+                            v-on:click="handleModalClick">
+                            <span class="modal__close-icon">
+                                <icon-close/> Close
+                            </span>
+                        </button>
+                    </header>
+                    <div class="modal__wrap">
+                        <div class="modal__container" ref="modalContainer" v-bind:class="modalContainerClass">
+                            <slot/>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </Component>
         </div>
     </transition>
 </template>
@@ -81,6 +82,9 @@ export default {
 
             return classnames;
         },
+        ModalWrapCmp() {
+            return this.isMobile ? 'ui-touch-slider' : 'div';
+        },
     },
 
     methods: {
@@ -115,6 +119,7 @@ export default {
 
     components: {
         IconClose,
+        UiTouchSlider: () => import('./UiTouchSlider'),
     },
 };
 </script>
@@ -134,14 +139,16 @@ export default {
     left: 0;
     transform: translate3d(0);
 }
+.modal-wrap__container {
+    margin: auto;
+}
 .modal {
     display: flex;
     flex-direction: column;
     z-index: 15;
     color: var(--body-text-color);
     -webkit-tap-highlight-color: transparent;
     outline: none;
-    margin: auto;
     &--align-top {
         margin-top: 72px;
     }
@@ -208,7 +215,7 @@ export default {
     backdrop-filter: none;
 }
 
-@media all and (max-width: 480px) {
+@media all and (max-width: 599px) {
     .v-transition-modal-enter-to, .v-transition-modal-leave {
         opacity: 1;
         bottom: 0;
@@ -224,7 +231,6 @@ export default {
     display: flex;
     width: 100%;
     overflow: auto;
-    margin: auto;
     justify-content: center;
     border-radius: 12px;
 }
@@ -259,7 +265,7 @@ export default {
     margin-bottom: 10px;
 }
 .modal__text {
-    max-width: 480px;
+    max-width: 599px;
     margin: 0 auto 20px;
     &:last-child {
         margin-bottom: 0;
@@ -304,7 +310,7 @@ export default {
         }
     }
 }
-@media all and (max-width: 480px) {
+@media all and (max-width: 599px) {
     .modal-wrap {
         display: flex;
         align-content: flex-end;
@@ -315,11 +321,16 @@ export default {
         transition: 0.2s background ease, 0.4s bottom cubic-bezier(.08,.82,.17,1);
         opacity: 1;
     }
+
+    .modal-wrap__container {
+        margin: 0;
+    }
+
     .modal {
         width: 100% !important; // override hard-set width
+        height: 100vh;
         margin-top: auto;
         margin-bottom: 0;
-        max-height: 100%;
         background: var(--body-background);
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;

src/js/components/UiTouchSlider.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="ui-touch-slider"
+    :style="{ top: this.top + 'vh' }"
+  >
+    <div
+      :class="[
+        'ui-touch-slider__holder',
+        {
+          'ui-touch-slider__holder_hidden': this.top === this.fullScreenBreakpoint,
+        },
+      ]"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    ></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      lowestBreakpoint: 80,
+      averageBreakpoint: 50,
+      fullScreenBreakpoint: 0,
+      startY: 0,
+      currentY: 0,
+      top: 50,
+      dragDirection: null,
+    };
+  },
+  methods: {
+    onTouchStart(e) {
+      e.stopPropagation();
+      this.startY = e.touches[0].clientY;
+    },
+    onTouchMove(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.currentY = e.touches[0].clientY;
+      const diff = ((this.startY - this.currentY) / window.innerHeight) * 100;
+      this.top = Math.min(Math.max(this.top - diff, this.fullScreenBreakpoint), this.lowestBreakpoint);
+      this.dragDirection = this.currentY - this.startY < 0 ? "top" : "bottom";
+      this.startY = this.currentY;
+    },
+    onTouchEnd(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.dragDirection === "bottom") {
+        if (this.top < this.averageBreakpoint) {
+          this.top = this.averageBreakpoint;
+        } else {
+          this.top = this.lowestBreakpoint;
+        }
+      } else {
+        if (this.top > this.averageBreakpoint) {
+          this.top = this.averageBreakpoint;
+        } else {
+          this.top = this.fullScreenBreakpoint;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.ui-touch-slider {
+  position: fixed;
+  left: 0;
+  right: 0;
+  transition: top 0.3s ease-out;
+}
+
+.ui-touch-slider__holder {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  right: 0;
+  z-index: 20;
+  width: 100px;
+  height: 50px;
+}
+
+.ui-touch-slider__holder::after {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 5px;
+  background-color: #bdbdbd;
+  border-radius: 2.5px;
+  cursor: grab;
+}
+
+.ui-touch-slider__holder:active {
+  cursor: grabbing;
+}
+
+.ui-touch-slider__holder_hidden {
+  opacity: 0;
+}
+</style>