respoinsive gallery

Prototypr · Feb 10, 2024 · 0cfe34e · 0cfe34e
1 parent 5555ec2
commit 0cfe34e
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 32 deletions.
diff --git a/components/Primitives/Dialog.js b/components/Primitives/Dialog.js
@@ -16,6 +16,7 @@ const overlayShow = keyframes({
     backgroundColor: `rgba(0,0,0,0.75)`,
     zIndex: 99,
     position: "fixed",
+    pointerEvents:'all',
     inset: 0,
     "@media (prefers-reduced-motion: no-preference)": {
       animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
@@ -88,11 +89,9 @@ const overlayShow = keyframes({
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
-    width: "auto",
-    maxWidth: "90vw",
-    minWidth:"300px",
-    minHeight:"200px",
-    height: "auto",
+    width: "100vw",
+    height: "100vh",
+    pointerEvents:'none',
     // minHeight: "60vh",
     // padding: 25,
     "@media (prefers-reduced-motion: no-preference)": {

diff --git a/components/carousel/EmblaCarousel.jsx b/components/carousel/EmblaCarousel.jsx
@@ -59,11 +59,15 @@ const EmblaCarousel = (props) => {
   const [dialogOpenImage, setDialogOpenImage] = useState(false)
 
   const toggleDialogOpen = () =>{
-    setDialogOpenImage(!dialogOpenImage)
+    if(dialogOpenImage){
+      setDialogOpenImage(false)
+    }else{
+      setDialogOpenImage(true)
+    }
   }
 
   return (
-    <div className="embla px-14 py-6 -ml-[1.6rem] -mt-[1.6rem] relative">
+    <div className="embla lg:px-14 py-6 lg:-ml-[1.6rem] -mt-[1.6rem] relative">
       <div className="embla__buttons absolute top-0 w-full flex justify-between -mt-[2.45rem]">
         <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
         <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
@@ -80,7 +84,7 @@ const EmblaCarousel = (props) => {
                 src={item.original}
                 alt="Your alt text"
               /> */}
-               <div className="relative shadow-md w-full rounded-xl h-[100px] sm:h-[264px] w-full lg:max-h-full relative overflow-hidden flex justify-center">
+               <div className="relative shadow-md w-full rounded-xl h-[240px] sm:h-[264px] w-full lg:max-h-full relative overflow-hidden flex justify-center">
                 <Image
                   onClick={()=>{
                     setCurrentImage(item.original)

diff --git a/components/carousel/EmblaCarouselArrowButtons.jsx b/components/carousel/EmblaCarouselArrowButtons.jsx
@@ -40,7 +40,7 @@ export const PrevButton = (props) => {
 
   return (
     <button
-      className="embla__button w-8 h-8 embla__button--prev rounded-full bg-white shadow border border-1 border-gray-300"
+      className="embla__button pointer-events-auto w-8 h-8 embla__button--prev rounded-full bg-white shadow border border-1 border-gray-300"
       type="button"
       {...restProps}
     >
@@ -68,7 +68,7 @@ export const NextButton = (props) => {
 
   return (
     <button
-    className="embla__button w-8 h-8 embla__button--next rounded-full bg-white shadow border border-1 border-gray-300"
+    className="embla__button pointer-events-auto w-8 h-8 embla__button--next rounded-full bg-white shadow border border-1 border-gray-300"
     type="button"
       {...restProps}
     >

diff --git a/components/carousel/ImageDialog.js/ImageDialog.js b/components/carousel/ImageDialog.js/ImageDialog.js
@@ -26,22 +26,21 @@ export const ImageDialog = ({open, toggleOpen, image, onPrevButtonClick, onNextB
     },[open])
 
     const navigate = (direction) =>{
-        // setLoading(true)
+        setLoading(true)
         if(direction=='prev'){
             onPrevButtonClick()
         }else{
             onNextButtonClick()
         }
     }
+    console.log(open)
 
     return(
         <Dialog  open={open} onOpenChange={toggleOpen}>
-        <DialogContentImage className="w-[70vw]" variant="">
-          <div>
+        <DialogContentImage className="w-full h-full pointer-events-none" variant="">
           {/* <DialogTitle>Submit for Review</DialogTitle> */}
-          <DialogDescription>
-            <div className="w-full h-full relative">
-                <div className="absolute w-full h-full">
+            <div className="w-full h-full relative flex flex-col justify-center">
+                <div className="absolute top-[50vh] w-full h-full">
                     <div className={`${loading?'h-[100px]':'opacity-0'}  flex justify-center`}>
                         <div className="my-auto">
                             <div className="text-white -mt-[80px] flex flex-col">
@@ -59,23 +58,21 @@ export const ImageDialog = ({open, toggleOpen, image, onPrevButtonClick, onNextB
                 onLoadingComplete={()=>setLoading(false)}
                 height={0}
                 sizes="100vw"
-                className={`w-auto h-auto max-w-full mx-auto`}
+                className={`w-auto lg:rounded-2xl lg:max-w-[80vw] pointer-events-auto h-auto max-w-full mx-auto my-auto`}
                 // width={'100%'}
                 // height={'100%'}
                 src={image}/>
-                <div className="embla__buttons absolute top-0 w-[110%] -ml-[5%] flex justify-between -mt-[2.45rem]">
+                <div className="embla__buttons imagemodal absolute top-[50vh] w-full px-10 flex justify-between -mt-[2.45rem]">
                     <PrevButton onClick={()=>navigate('prev')} disabled={prevBtnDisabled} />
                     <NextButton onClick={()=>navigate('next')} disabled={nextBtnDisabled} />
                 </div>
-            </div>
-          </DialogDescription>
           </div>
 
-         {!loading &&  <DialogClose className="-mr-12" asChild>
+          <DialogClose className="mt-6 mr-10 pointer-events-auto" asChild>
             <IconButton className="bg-gray-200 shadow border border-gray-800 cursor-pointer" aria-label="Close">
               <Cross2Icon />
             </IconButton>
-          </DialogClose>}
+          </DialogClose>
         </DialogContentImage>
       </Dialog>
     )

diff --git a/components/container.js b/components/container.js
@@ -1,7 +1,7 @@
 export default function Container({ children,padding, maxWidth='max-w-[1440px]' }) {
   return (
     <div
-      className={`${maxWidth} ${padding==false?'':'mx-auto px-3'}`}
+      className={`${maxWidth} ${padding==false?'':'mx-auto md:px-3'}`}
       //   style={{ maxWidth: "1200px" }}
     >
       {children}

diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js
@@ -67,7 +67,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
       <Container padding={false} maxWidth="w-full relative z-0" >
         <img src='/static/images/toolbox/squares.svg' className="border-b border-gray-200/90 opacity absolute w-full h-full object-cover top-0 left-0"/>
 
-          <div className="pt-[132px] shadow-md -mt-[96px] md:pt-[112px] pb-[182px] relative overflow-hidden p-6 border-gray-200">
+          <div className="pt-[90px] md:pt-[132px] shadow-md -mt-[96px] md:pt-[112px] pb-[182px] relative overflow-hidden p-6 border-gray-200">
           <div
           style={{
             // backgroundColor:`${stc(post?.attributes?.title)}`,
@@ -163,9 +163,9 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
           </div>
         </Container>
         <Container maxWidth="w-full bg-white relative z-10 pt-8">
-          <div className="max-w-[1320px] mx-auto grid grid-cols-12 gap-6 xl:gap-0 px-3 md:px-0 h-full">
+          <div className="max-w-[1320px] mx-auto grid grid-cols-12 gap-6 xl:gap-0 md:px-0 h-full">
           <div className="col-span-12 lg:col-span-12">
-            <div className="-mt-[190px] mt-8 mb-6 rounded-xl">
+            <div className="-mt-[190px] mt-8 mb-6 pl-3 rounded-xl">
               {/* <h3 class="text-lg font-bold">Gallery</h3> */}
               {/* {post?.attributes && (
                   <PopupGallery
@@ -177,7 +177,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
                 )} */}
                   <Carousel gallery={gallery}/>
               </div>
-              <div className="max-w-[1100px] mx-auto w-full">
+              <div className="max-w-[1100px] mx-auto px-6 w-full">
                 <div className="max-w-[900px] mx-auto">
                   <h3 class="text-2xl font-semibold mb-8">Overview</h3>
                     <div

diff --git a/styles/index.scss b/styles/index.scss
@@ -590,6 +590,25 @@ box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   --slide-height: 19rem;
   // padding: 1.6rem;
 }
+@media (max-width: 600px) {
+  .embla {
+    --slide-spacing: 0.6rem;
+    --slide-size: 90%;
+    --slide-height: 20rem;
+    // padding: 1.6rem;
+  }
+  .embla__buttons{
+    display: none!important;
+  }
+  .embla__buttons.imagemodal{
+    top:inherit!important;
+    display:flex!important;
+    bottom:60px!important
+  }
+  .embla-thumbs__slide {
+    display: none;;
+  }
+}
 .embla__viewport {
   overflow: hidden;
 }
@@ -664,11 +683,7 @@ box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   padding-left: var(--thumbs-slide-spacing);
   position: relative;
 }
-@media (min-width: 576px) {
-  .embla-thumbs__slide {
-    // flex: 0 0 18%;
-  }
-}
+
 .embla-thumbs__slide__button {
   -webkit-appearance: none;
   // background-color: transparent;
@@ -744,6 +759,9 @@ box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   transform: translateY(-50%);
   left: 0;
 }
+.embla__buttons.imagemodal{
+  top:50vh;
+}
 .embla__button {
   z-index: 1;
   color: var(--background-site);
@@ -763,4 +781,9 @@ box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
 .embla__button .embla__button__svg {
   width: 65%;
   height: 65%;
+}
+
+
+.w-full.h-full.pointer-events-none{
+  pointer-events: none!important;
 }