Merge pull request #38 from Code-the-Dream-School/exploreprojects-responsive

Exploreprojects responsive

Author: ozzydogandev

db.json

@@ -13,6 +13,19 @@
       "liveDemoURL": "livedemolink",
       "comments": "",
       "date": "2025-01-09T05:54:37.266Z"
+    },
+    {
+      "id": "029f",
+      "title": "asdasda",
+      "githubURL": "asdasdasd",
+      "description": "sdasd",
+      "frameworks": [
+        "HTML / CSS",
+        "Node.js"
+      ],
+      "liveDemoURL": "asdsada",
+      "comments": "asddsaads",
+      "date": "2025-01-18T18:58:46.100Z"
     }
   ]
 }

src/styles/ExploreProjects.css

@@ -73,4 +73,25 @@
 .comments-img{
     width: 30px;
     height: auto;
+}
+
+@media (max-width: 768px) {
+    .explore-projects-container{
+        margin-top: 120px;
+        min-width: 370px;
+    }
+    .ep-header{
+        text-align: center;
+        font-size: 32px;
+    }
+    .projects-grid {
+        margin-top: 48px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 30px;
+        width: 100%;
+        margin-left: 0px;
+    }   
 }

src/styles/Homepage.css

@@ -194,7 +194,7 @@ h1{
     }
     .sections-container{
         margin-top: 120px;
-        min-width: 390px;
+        min-width: 370px;
     }
     .content-area-responsive{
         display: flex;

src/styles/ShareAProject.css

@@ -62,7 +62,7 @@
 
 @media (max-width: 768px) {
     .share-project-container{
-        min-width: 380px;
+        min-width: 370px;
         flex-direction: column;
         margin-top: 120px;
     }
@@ -83,7 +83,7 @@
         margin-bottom: 8px;
         z-index: 2;
         position: relative;
-        font-size: 20px;
+        font-size: 18px;
     }
     .thumbs-up {
         z-index: 1; /* Place the image behind the text */
@@ -93,7 +93,7 @@
     .sp-info-text {
         position: relative; /* Ensure text remains above the image */
         z-index: 2;
-        font-size: 10px;
+        font-size: 12px;
         line-height: 20px;
     }
     .sp-form-header{

src/views/ExploreProjects.jsx

@@ -4,7 +4,15 @@ import {
   Badge, 
   Button, 
   IconButton, 
-  Stack } from "@chakra-ui/react";
+  Stack 
+} from "@chakra-ui/react";
+import {
+  MenuContent,
+  MenuItem,
+  MenuRoot,
+  MenuSeparator,
+  MenuTrigger,
+} from "../components/ui/menu";
 import Comments from "../components/Comments";
 
 
@@ -51,7 +59,20 @@ const ExploreProjects = () => {
                     <div className='like-comment-details'>
                     <Stack>
                       <IconButton className='details-button' variant="unstyled">
-                        <img className="details-img" src="./images/details.svg" alt='details'></img>
+                        <MenuRoot>
+                            <MenuTrigger asChild>
+                            <img className="details-img" src="./images/details.svg" alt='details'></img>
+                            </MenuTrigger>
+                            <MenuContent className="menu-content">
+                                <MenuItem>
+                                  Remove
+                                </MenuItem>
+                                <MenuSeparator />
+                                <MenuItem value="new-txt2" as="a">
+                                  Report ⚠️
+                                </MenuItem>
+                            </MenuContent>
+                          </MenuRoot>
                       </IconButton>
                       <IconButton className='like-button' variant="unstyled">
                         <img className="like-img" src="./images/like.svg" alt='like'></img>