Merge pull request #7 from aswanthabam/dev

Responsive Design
aswanthabam · Jun 20, 2024 · ccea02b · ccea02b
2 parents 3f63705 + fca2f1d
commit ccea02b
Show file tree

Hide file tree

Showing 10 changed files with 207 additions and 11 deletions.
diff --git a/app/main.module.css b/app/main.module.css
@@ -12,7 +12,7 @@
     padding: 1rem;
     bottom: 0;
     margin: 1rem;
-    left: 50%;
+    left: calc(50% - 1rem);
     transform: translateX(-50%);
     backdrop-filter: blur(14px) saturate(180%);
     -webkit-backdrop-filter: blur(14px) saturate(180%);
@@ -179,13 +179,17 @@
     left: 0;
     z-index: 0;
     overflow: hidden;
+    background: url('/bg-illustration.svg');
+    background-repeat: repeat-y;
+    background-size: 100%;
     &.active {
       border: 10px solid #476cee;
     }
     .bgIllustration {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      background-repeat: repeat;
+      display: none;
     }
     &::before {
       --size: 100vw;
@@ -215,3 +219,15 @@
   transform: translate(-50%, -50%);
   transition: width 0.2s ease, height 0.2s ease;
 }
+
+
+@media only screen and (max-width: 728px) {
+  .main {
+    .popup {
+      max-width: calc(100% - 3rem);
+    }
+    .bg {
+      background-size: 190%;
+    }
+  }
+}
diff --git a/app/main.tsx b/app/main.tsx
@@ -29,6 +29,7 @@ export default function MainContainer({
     icon: "bi bi-info",
   });
   const [statusLoaded, setStatusLoaded] = useState(false);
+
   useEffect(() => {
     console.log("Page loaded (MAIN)", process.env.NODE_ENV);
     document.body.style.setProperty("--x", "0px");

diff --git a/app/offline/page.module.css b/app/offline/page.module.css
@@ -6,4 +6,11 @@
     align-items: center;
     flex-direction: column;
     gap: 20px;
-}
+    text-align: center;
+}
+
+@media only screen and (max-width: 728px) {
+    .offline {
+        padding: 20px;
+    }
+  }
diff --git a/app/page.module.css b/app/page.module.css
@@ -53,3 +53,16 @@
     }
   }
 }
+
+@media only screen and (max-width: 728px) {
+  .titleSection {
+    padding: 10px 20px;
+    .description {
+      width: 100%;
+    }
+    .buttonContainer {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+}
diff --git a/app/receive/page.module.css b/app/receive/page.module.css
@@ -1,4 +1,4 @@
-.share {
+.receive {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -166,6 +166,7 @@
         }
         .type {
           text-align: center;
+          word-break: break-all;
         }
         .size {
           font-size: 1rem;
@@ -260,3 +261,33 @@
     }
   }
 }
+
+@media only screen and (max-width: 728px) {
+  .receive {
+    justify-content: start;
+    .content {
+      height: fit-content;
+      .grid {
+        grid-template-columns: 1fr;
+        height: fit-content;
+        .codeContainer {
+          height: fit-content;
+          width: 100%;
+          .info {
+            width: 100%;
+
+          }
+          .code {
+            .codeChar {
+              padding: 3px;
+            }
+          }
+        }
+        .file {
+          margin: 0;
+          height: fit-content;
+        }
+      }
+    }
+  }
+}
diff --git a/app/receive/page.tsx b/app/receive/page.tsx
@@ -237,7 +237,7 @@ export default function Share() {
       });
   };
   return (
-    <div className={styles.share}>
+    <div className={styles.receive}>
       <div className={styles.content}>
         <div className={styles.grid}>
           <div className={styles.codeContainer}>

diff --git a/app/share/page.module.css b/app/share/page.module.css
@@ -195,3 +195,41 @@
     }
   }
 }
+
+@media only screen and (max-width: 728px) {
+  .share {
+    justify-content: start;
+    height: fit-content;
+    .content {
+      height: auto;
+      margin-top: 100px;
+      margin-bottom: 20px;
+      .codeContainer {
+        .info {
+          width: 100%;
+        }
+
+        .code {
+          cursor: auto;
+        }
+      }
+
+      .grid {
+        height: auto;
+        margin-top: 10px;
+        grid-template-columns: 1fr;
+        .file {
+          margin: 0;
+          height: fit-content;
+        }
+        .form {
+          height: fit-content;
+        }
+      }
+    }
+    .buttonContainer {
+      width: 100%;
+      margin-top: 20px;
+    }
+  }
+}
diff --git a/app/share/page.tsx b/app/share/page.tsx
@@ -178,6 +178,7 @@ export default function Share() {
               onClick={() => {
                 navigator.clipboard.writeText(code);
                 setCopied(true);
+                showPopup(setPopup!, "Copied", "bi bi-check-circle", 2000);
                 setTimeout(() => {
                   setCopied(false);
                 }, 2000);

diff --git a/components/Topbar.module.css b/components/Topbar.module.css
@@ -38,7 +38,9 @@
         color: #222;
       }
     }
-
+    .menuIcon {
+      display: none;
+    }
     .menu {
       display: flex;
       gap: 1rem;
@@ -58,3 +60,41 @@
     }
   }
 }
+
+@media only screen and (max-width: 728px) {
+  .topbar {
+    padding: 10px 20px;
+    .container {
+      .menuIcon {
+        display: block;
+        .icon {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .menu {
+        position: fixed;
+        top: 70px;
+        overflow: hidden;
+        left: 0;
+        display: flex;
+        z-index: 9;
+        background: #6edbae;
+        flex-direction: column;
+        width: 100%;
+        height: 0;
+        padding: 0;
+        align-items: center;
+
+        .link {
+          border-right: none;
+          padding: 10px 0;
+        }
+        &.open {
+          height: auto;
+          padding: 30px 20px;
+        }
+      }
+    }
+  }
+}
diff --git a/components/Topbar.tsx b/components/Topbar.tsx
@@ -3,9 +3,25 @@ import Link from "next/link";
 import styles from "./Topbar.module.css";
 import icon from "../public/icon.svg";
 import Image from "next/image";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
 export function Topbar() {
   const router = useRouter();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const pathname = usePathname();
+  const [locChange, setLocChange] = useState(false);
+  useEffect(() => {
+    if (menuOpen) {
+      menuRef.current?.classList.remove(styles.open);
+      setMenuOpen(false);
+    }
+  }, [pathname, locChange]);
+
+  const openMenu = () => {
+    menuRef.current?.classList.toggle(styles.open);
+    setMenuOpen(!menuOpen);
+  };
   return (
     <div className={styles.topbar}>
       <div className={styles.container}>
@@ -18,14 +34,47 @@ export function Topbar() {
           <Image className={styles.image} src={icon} alt="Easy Share Logo" />
           <span className={styles.title}>DropIT</span>
         </div>
-        <div className={styles.menu}>
-          <Link className={styles.link} href="product">
+        <div className={styles.menuIcon} onClick={openMenu}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={styles.icon}
+          >
+            {menuOpen ? (
+              <path d="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"></path>
+            ) : (
+              <path d="M4 6h16v2H4zm4 5h12v2H8zm5 5h7v2h-7z"></path>
+            )}
+          </svg>
+        </div>
+        <div ref={menuRef} className={styles.menu}>
+          <Link
+            onClick={() => {
+              setLocChange(!locChange);
+            }}
+            className={styles.link}
+            href="/#how-it-works"
+          >
             How It Works
           </Link>
-          <Link className={styles.link} href="product">
+          <Link
+            onClick={() => {
+              setLocChange(!locChange);
+            }}
+            className={styles.link}
+            href="/#contact"
+          >
             Contact
           </Link>
-          <Link className={styles.link} href="product">
+          <Link
+            onClick={() => {
+              setLocChange(!locChange);
+            }}
+            className={styles.link}
+            href="/#faq"
+          >
             FAQ
           </Link>
         </div>