Merge pull request #314 from vevcom/chore/mobile-popup

Chore/mobile popup
vevcom · Sep 18, 2024 · 90244a3 · 90244a3
2 parents 6bed43c + e6c267c
commit 90244a3
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 28 deletions.
diff --git a/src/app/_components/Cms/CmsImage/CmsImageEditor.module.scss b/src/app/_components/Cms/CmsImage/CmsImageEditor.module.scss
@@ -3,21 +3,38 @@
 $collectionSize: calc(14vmin + 70px);
 
 .CmsImageEditor {
-    width: calc(97vw - 140px);
-    height: calc(97vh - 140px);
     display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: 1fr auto;
-    gap: 1em;
-    padding: -1em;
+    @include ohma.screenLg {
+        width: calc(97vw - 140px);
+        height: calc(97vh - 140px);
+        grid-template-columns: auto 1fr;
+        grid-template-rows: 1fr auto;
+        gap: 1em;
+        padding: -1em;
+    }
+    @include ohma.screenMobile {
+        width: 100%;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr auto;
+        height: 80svh
+    }
     .linkToImages {
         position: absolute;
-        top: -2%;
-        right: -2%;
         @include ohma.btn(ohma.$colors-primary);
         width: 10em;
+        @include ohma.screenLg {
+            top: -2%;
+            right: -2%;
+        }
+        @include ohma.screenMobile {
+            top: 2%;
+            left: 2%;
+        }
     }
     > .currentCmsImage {
+        @include ohma.screenMobile {
+            display: none;
+        }
         grid-column: 1 / 2;
         grid-row: 1 / 2;
         > .info {
@@ -27,10 +44,16 @@ $collectionSize: calc(14vmin + 70px);
     }
     > .selectImage {
         grid-column: 2 / 3;
+        @include ohma.screenMobile {
+            grid-column: 1 / 2;
+            margin: 1em 0;
+        }
         grid-row: 1 / 2;
         background-color: lighten(ohma.$colors-secondary, 40%);
         @include ohma.round;
         overflow: scroll;
+        max-width: 100%;
+        width: 100%;
         > * {
             isolation: isolate;
         }

diff --git a/src/app/_components/PopUp/PopUp.module.scss b/src/app/_components/PopUp/PopUp.module.scss
@@ -2,32 +2,29 @@
 
 .PopUp {
     backdrop-filter: blur(5px);
-    width: 100vw;
-    height: 100vh;
+    z-index: 8;
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 8;
     > .main {
         box-shadow: rgba(0, 0, 0, 0.35) 0px 25px 25px;
         @include ohma.card;
-        position: absolute;
         z-index: 9;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        max-height: 95svh;
         background-color: ohma.$colors-white;
-        .closeBtn {
-            position: absolute;
-            top: -10px;
-            left: -10px;
-            @include ohma.roundBtn(ohma.$colors-red);
-            width: 40px;
-            height: 40px;
+        > .overflow {
+            overflow-y: auto;
+            margin: 0;
+            padding: 0;
+            max-height: calc(95svh - ohma.$cardPadding * 2);
         }
     }
 }
 
+.closeBtn {
+    @include ohma.roundBtn(ohma.$colors-red);
+}
+
 .openBtn {
     &:hover {
         cursor: pointer;
@@ -36,4 +33,44 @@
         width: 100%;
         height: 100%;
     }
-}
+}
+
+@include ohma.screenLg {
+    .PopUp {
+        backdrop-filter: blur(5px);
+        width: 100vw;
+        height: 100vh;
+        > .main {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .closeBtn {
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            width: 40px;
+            height: 40px;
+        }
+    }
+}
+
+@include ohma.screenMobile {
+    .PopUp {
+        position: fixed;
+        bottom: 0;
+        top: 0;
+        > .main {
+            width: 100svw;
+            translate: 0 calc(100svh - 100%);
+        }
+        .closeBtn {
+            position: absolute;
+            top: .3em;
+            right: .3em;
+            width: 3em;
+            height: 3em;
+        }
+    }
+}
diff --git a/src/app/_components/PopUp/PopUp.tsx b/src/app/_components/PopUp/PopUp.tsx
@@ -53,11 +53,13 @@ export default function PopUp({
         contentRef.current = (
             <div className={styles.PopUp}>
                 <div className={styles.main} ref={ref}>
-                    <Button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
-                        <FontAwesomeIcon icon={faX} />
-                    </Button>
-                    <div className={styles.content}>
-                        { children }
+                    <div className={styles.overflow}>
+                        <Button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
+                            <FontAwesomeIcon icon={faX} />
+                        </Button>
+                        <div className={styles.content}>
+                            { children }
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/src/app/ombul/CreateOmbul.module.scss b/src/app/ombul/CreateOmbul.module.scss
@@ -3,6 +3,9 @@
 .CreateOmbul {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    @include ohma.screenMobile {
+        grid-template-columns: 1fr;
+    }
     grid-template-rows: auto auto;
     gap: ohma.$gap;
     h1 {