Fix iOS donate block

intk · Oct 6, 2024 · 150f6ae · 150f6ae
1 parent 44a8b8a
commit 150f6ae
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/server/modules/asset/ui/src/index.js b/server/modules/asset/ui/src/index.js
@@ -2,6 +2,12 @@ import { DotLottie } from '@lottiefiles/dotlottie-web'
 
 export default () => {
   apos.util.onReady(async () => {
+    const ua = window.navigator.userAgent
+    const iosDevice = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i) || (!!ua.match(/Macintosh/i) && !ua.match(/Chrome/i))
+    if (iosDevice) {
+      document.body.classList.add('pdl-ios-device')
+    }
+
     /********************************/
     /* start header logo animation */
     /*******************************/

diff --git a/server/modules/donate/ui/src/index.scss b/server/modules/donate/ui/src/index.scss
@@ -37,6 +37,7 @@
 
     @media (min-width: map-get($breakpoints, 'sm')) {
       width: fit-content;
+      max-width: 50vw;
     }
   }
 
@@ -111,6 +112,8 @@
     border: 1px solid black;
     background-color: transparent;
     font-weight: 500;
+    color: black;
+    padding: 5px;
 
     @media (min-width: map-get($breakpoints, 'xs')) {
       width: 71px;
@@ -157,6 +160,10 @@
     @media (min-width: map-get($breakpoints, 'xs')) {
       font-size: 18px;
       width: 66px;
+      height: 41px;
+    }
+
+    @media (min-width: map-get($breakpoints, 'sm')) {
       height: 46px;
     }
 
@@ -276,3 +283,11 @@
     }
   }
 }
+
+.pdl-ios-device {
+  @media (min-width: map-get($breakpoints, 'sm')) and (max-width: map-get($breakpoints, 'md')) {
+    .pdl-donate__amount-input {
+      height: 39px;
+    }
+  }
+}
diff --git a/server/modules/highlight-items-widget/ui/src/index.scss b/server/modules/highlight-items-widget/ui/src/index.scss
@@ -29,9 +29,10 @@ body { overflow: hidden; }
   margin-bottom: 18px;
 
   @media (min-width: map-get($breakpoints, 'sm')) {
-    height: 380px;
+    max-height: 500px;
   }
   @media (min-width: map-get($breakpoints, 'md')) {
+    max-height: none;
     height: 767px;
     margin-bottom: 40px;
   }
@@ -236,12 +237,13 @@ body { overflow: hidden; }
 
   .pdl-highlight-widget__slider {
     cursor: pointer;
-    position: absolute;
-    bottom: 20px;
+    position: relative;
+    margin-top: 20px;
     display: flex;
     gap: 8px;
 
     @media (min-width: map-get($breakpoints, 'md')) {
+      position: absolute;
       bottom: 40px;
     }