fix(mobile): Merge pull request #118 from anluh/MAINTAIN-200

[MAINTAIN-200] Remove extra space in filters & bookmarks; Fix scroll …
ymcatwincities · Dec 8, 2021 · 15d8d13 · 15d8d13
2 parents 0d174b7 + e1c7ef4
commit 15d8d13
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 26 deletions.
diff --git a/openy_af4_vue_app/dist/activity_finder_4.css b/openy_af4_vue_app/dist/activity_finder_4.css
diff --git a/openy_af4_vue_app/dist/activity_finder_4.umd.min.js b/openy_af4_vue_app/dist/activity_finder_4.umd.min.js
diff --git a/openy_af4_vue_app/dist/activity_finder_4.umd.min.js.map b/openy_af4_vue_app/dist/activity_finder_4.umd.min.js.map
diff --git a/openy_af4_vue_app/src/components/filters/Filters.vue b/openy_af4_vue_app/src/components/filters/Filters.vue
@@ -245,9 +245,7 @@ export default {
       return this.bsVersion === 4 ? 'd-none d-lg-flex' : 'hidden-xs hidden-sm'
     },
     footerClasses() {
-      const classes = this.bsVersion === 4 ? ['d-lg-none'] : ['hidden-md', 'hidden-lg']
-      classes.push(this.isIosMobile ? 'ios-mobile-device' : '')
-      return classes
+      return this.bsVersion === 4 ? ['d-lg-none'] : ['hidden-md', 'hidden-lg']
     }
   },
   watch: {
@@ -325,10 +323,6 @@ export default {
   .filters-footer {
     height: 140px;
 
-    &.ios-mobile-device .buttons {
-      border-bottom: 70px solid $white;
-    }
-
     .buttons {
       position: fixed;
       bottom: 0;

diff --git a/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue b/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
@@ -112,7 +112,7 @@
             </div>
 
             <div class="bookmarked-items-footer">
-              <div class="footer-content" :class="{ 'ios-mobile-device': isIosMobile }">
+              <div class="footer-content">
                 <div class="left">
                   {{ 'Bookmarks are automatically cleared after 5 days.' | t }}
                 </div>
@@ -413,10 +413,6 @@ export default {
       font-size: 12px;
       line-height: 18px;
 
-      &.ios-mobile-device {
-        border-bottom: 70px solid $white;
-      }
-
       .left {
         max-width: 220px;
       }

diff --git a/openy_af4_vue_app/src/components/modals/Modal.vue b/openy_af4_vue_app/src/components/modals/Modal.vue
@@ -13,6 +13,7 @@
       'af-narrow': narrow,
       'af-responsive': responsive
     }"
+    modal-outer-class="af-modal-wrapper"
     dialog-class="af-modal-dialog"
     header-class="af-modal-header"
     title-class="af-modal-title"
@@ -79,6 +80,9 @@ export default {
 </script>
 
 <style lang="scss">
+[modal-outer-class='af-modal-wrapper'] {
+  z-index: 2001 !important;
+}
 .af-modal {
   // TODO: Move out to another place - MPR-163.
   // Overriding Open Y Lily customizations and Bootstrap 3/4 compatibilities.

diff --git a/openy_af4_vue_app/src/components/steps/Step.vue b/openy_af4_vue_app/src/components/steps/Step.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="step-component" :class="{ 'ios-mobile-device': isIosMobile }">
+  <div class="step-component">
     <div class="container">
       <div class="row">
         <div class="col-12 col-xs-12">
@@ -222,10 +222,6 @@ export default {
     margin-top: 20px;
   }
 
-  &.ios-mobile-device .buttons.sticky {
-    border-bottom: 70px solid $af-black;
-  }
-
   .buttons {
     width: 100%;
 

diff --git a/openy_af4_vue_app/src/main.js b/openy_af4_vue_app/src/main.js
@@ -4,7 +4,7 @@ import App from '@/App.vue'
 import router from '@/router/index.js'
 
 // Listen to custom event to track events in Google Analytics.
-document.addEventListener('openy_activity_finder_event', (e) => {
+document.addEventListener('openy_activity_finder_event', e => {
   const { action, label, value, category } = e.detail
 
   if (window.gtag) {
@@ -41,6 +41,11 @@ Vue.filter('formatPlural', function(
 })
 
 Vue.mixin({
+  computed: {
+    isIosMobile() {
+      return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
+    }
+  },
   methods: {
     trackEvent(action, label, value = 0, category = 'Activity Finder') {
       // Custom event for external code to listen to and react upon.
@@ -75,11 +80,6 @@ Vue.mixin({
       }
       return ''
     }
-  },
-  computed: {
-    isIosMobile() {
-      return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
-    }
   }
 })