Merge pull request #63 from Saksham-Jaiswal-2004/main

Made Tablet gallery page for Mobile screens
Parnab03 · Mar 2, 2025 · 6bd9a8f · 6bd9a8f
2 parents 161bcd1 + 780484e
commit 6bd9a8f
Show file tree

Hide file tree

Showing 12 changed files with 308 additions and 19 deletions.
diff --git a/Frontend/public/LogoSmall.png b/Frontend/public/LogoSmall.png
diff --git a/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx b/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx
@@ -1,11 +1,14 @@
 import React from "react";
+import { NavLink } from "react-router-dom";
 import LogoImage from "/Logo.svg";
 import Style from "./NavBar.module.css";
 
 const Logo = () => {
     return (
         <div className={Style.logoContainer}>
-            <img className={Style.logo} src={LogoImage} alt="Logo" />
+            <NavLink to="/" className={Style.logoLink}>
+                <img className={Style.logo} src={LogoImage} alt="Logo" />
+            </NavLink>
         </div>
     );
 };

diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx
@@ -22,7 +22,7 @@ const NavBar = () => {
                                 <NavLink
                                     to="/"
                                     className={({ isActive }) =>
-                                        isActive ? `${Style.menuLink} ${Style.active}` : Style.menuLink
+                                        isActive ? `${Style.menuLink} ${Style.active} ${Style.hide}` : `${Style.menuLink} ${Style.hide}`
                                     }
                                 >
                                     Home
@@ -62,7 +62,7 @@ const NavBar = () => {
                     </div>
                     <div className={Style.searchContainer}>
                         <input
-                            className={Style.searchInput}
+                            className={`${Style.searchInput} ${Style.hide}`}
                             type="text"
                             placeholder="Search your wallpaper"
                         />

diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css
@@ -187,7 +187,7 @@
 }
 
 
-@media (max-width: 1211px) {
+/* @media (max-width: 1211px) {
     .menu {
         font-size: 0.6em;
         gap: 3em;
@@ -208,14 +208,6 @@
 }
 
 @media (max-width: 992px) {
-    /* .navItems {
-        width: 80%;
-    }
-
-    .menuItem {
-        margin: 0 20px;
-    } */
-
     .searchContainer {
         width: 400px;
     }
@@ -275,6 +267,136 @@
         top: 2.5em;
         left: 1em;
     }
+} */
+
+@media (max-width: 425px) {
+    .MainContainer{
+        padding: 0.2em 0;
+        gap: 0%;
+    }
+
+    .MainContainer::before{
+        border-radius: 4.5px;
+        margin: -1px;
+        padding: 1px;
+    }
+
+    .navbar{
+        height: fit-content;
+        width: 78%;
+        border-radius: 4.5px;
+        margin-top: 0.7%;
+    }
+
+    .navbarWrapper{
+        padding: 0;
+        padding-left: 5.5%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .logo {
+        width: 60%;
+        margin-right: 0%;
+        content: url('/LogoSmall.png');
+    }
+
+    .logoContainer{
+        position: fixed;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .logoLink{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .navItems{
+        display: flex;
+        flex-direction: row;
+        width: 60%;
+        justify-content: left;
+    }
+
+    .menu{
+        display: flex;
+        font-size: 1.6vw;
+        gap: 2em;
+        align-items: center;
+    }
+
+    .menuLink {
+        margin-top: 6px;
+        padding-bottom: 8px;
+    }
+
+    .menuLink::after {
+        bottom: 3.2px;
+        left: 50%;
+        width: 16px;
+        height: 1.25px;
+    }
+
+    .searchContainer {
+        padding: 0;
+        width: 35%;
+        height: fit-content;
+        border-radius: 4.5px;
+        justify-content: right;
+    }
+
+    .searchInput{
+        padding: 0;
+        height: fit-content;
+    }
+
+    .searchButton img{
+        width: 2.8vw;
+        padding: 1px 1px;
+    }
+
+    .searchButton{
+        padding: 0 5px;
+        height: fit-content;
+        display: flex;
+    }
+
+    .profileContainer {
+        padding-left: 0.5px;
+        gap: 0.01rem;
+        justify-content: center;
+        align-content: center;
+    }
+
+    .profileButton{
+        justify-content: center;
+        align-content: center;
+        padding: 0;
+        padding-right: 5px;
+        padding-left: 2px;
+        padding-top: 1vw;
+    }
+
+    .profileButton img{
+        width: 3vw;
+        padding: 0;
+    }
+
+    .logoContainer {
+        margin-right: 0.2em;
+        top: 1em;
+        left: 0.3em;
+        width: 14%; 
+    }
+
+    .hide{
+        display: none;
+    }
 }
 
 /* dark theme */

diff --git a/Frontend/src/Components/GalleryModule/Gallery.jsx b/Frontend/src/Components/GalleryModule/Gallery.jsx
@@ -44,6 +44,7 @@ const Gallery = () => {
                         <Route path="desktop" element={<Desktop />} />
                         <Route path="" element={<Navigate to="mobile" replace />} />
                     </Routes>
+                    <div className={Styles.blendOverlay2} style={{ opacity: showBlend ? 1 : 0 }} />
                 </div>
             </div>
         </div>

diff --git a/Frontend/src/Components/GalleryModule/Gallery.module.css b/Frontend/src/Components/GalleryModule/Gallery.module.css
@@ -49,14 +49,29 @@ body {
     left: 0;
     right: 0;
     height: 50px;
-    width: 99.6%;
+    width: 99.8%;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
     pointer-events: none;
     z-index: 10;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
+.blendOverlay2 {
+    position: sticky;
+    display: none;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    width: 100%;
+    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+    pointer-events: none;
+    z-index: 10;
+    opacity: 1;
+    transition: opacity 0.15s ease-in-out;
+}
+
 @media (max-width: 768px) {
     .imgGrid {
         grid-template-columns: 1fr;
@@ -67,4 +82,28 @@ body {
     .galleryContent{
         margin-left: 23.75%;
     }
+}
+
+@media (max-width: 425px) {
+    .mainContent{
+        width: 100%;
+        justify-content: center;
+        justify-items: center;
+        margin-top: 3.6em;
+        margin-bottom: 3.5em;
+    }
+
+    .galleryContent{
+        margin-left: 3%;
+        padding: 0;
+        width: 90%;
+    }
+
+    .blendOverlay{
+        width: 100%;
+    }
+
+    .blendOverlay2{
+        display: block;
+    }
 }
diff --git a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx
@@ -50,7 +50,7 @@ const SideBar = () => {
                         </li>
                     </ul>
                 </div>
-                <div className={styles.copyright}>
+                <div className={`${styles.copyright} ${styles.hide}`}>
                     <p id="copyright">© WallGodds<small> 2025</small></p>
                 </div>
             </div>

diff --git a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css
@@ -3,7 +3,7 @@
     top: 3.9em;
     height: 100vh; /* Ensure sidebar takes full height */
     width: clamp(12%, 13vw, 20%); /* Adjust width dynamically */
-    min-height: 100vh; /* Ensure it fills the full height */
+    min-height: 100vh;
     padding-left: 3.75%;
     display: flex;
     flex-direction: column;
@@ -169,4 +169,74 @@ small {
     .listItem img {
         width: 1.2em;
     }
+}
+
+@media (max-width: 425px) {
+    .sidebar {
+        z-index: 1001;
+        width: 100vw;
+        min-height: 0;
+        top: 419px;
+        left: 0;
+        padding: 5px 5vw;
+        padding-bottom: 16px;
+        flex-direction: row;
+        background: none;
+    }
+
+
+    .mainContainer {
+        position: fixed;
+        bottom: 7px;
+        border-radius: 3.7px;
+        width: 91%;
+        min-height: 0px;
+        height: 45px;
+        border-radius: 10px;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+
+
+    .listContainer {
+        padding: 2px;
+    }
+
+    .verticalList {
+        flex-direction: row-reverse;
+        gap: 19vw;
+        width: 100%;
+        margin: 0;
+        padding: 2px 0px;
+    }
+
+    .listItem, .listItem.active, .listItem:hover{
+        transform: rotate(90deg);
+    }
+
+    .listItem.active{
+        box-shadow: 1px -1px 2.5px #00000089;
+    }
+
+    .listItem{
+        padding: 20px 10px;
+        border-radius: 7px;
+    }
+
+    .listItem::before{
+        padding: 2.6px;
+        border-radius: 7px;
+    }
+
+    .listItem img{
+        width: 2.5vw;
+    }
+
+    .listItem:nth-child(3) img {
+        width: 3vw !important; 
+    }
+
+    .hide{
+        display: none;
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,7 @@ const SideBar = () => { @@
                             </li>
                         </ul>
                     </div>
-                    <div className={styles.copyright}>
+                    <div className={`${styles.copyright} ${styles.hide}`}>
                         <p id="copyright">© WallGodds<small> 2025</small></p>
                     </div>
                 </div>
@@ Expand Down @@