Merge pull request #63 from SE10-IJSE/feature/utilities-developer

wall components | models evaluated and bugs fixed
SE10-IJSE · Oct 26, 2024 · 141f110 · 141f110
2 parents f9c469f + 950df6e
commit 141f110
Show file tree

Hide file tree

Showing 30 changed files with 357 additions and 283 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <a id="readme-top"></a>
 
 [![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
+[![Closed Pull Requests][closed-pull-requests-shield]][closed-pull-requests-url]
 [![Stargazers][stars-shield]][stars-url]
 [![Issues][issues-shield]][issues-url]
 [![MIT License][license-shield]][license-url]
@@ -20,7 +20,7 @@
     Welcome to the <strong>SE10 NETWORK</strong> frontend repository! This frontend application serves as the user interface for a social media platform specifically designed for students of <strong>IJSE</strong> (Institute of Software Engineering). It enables students to create and share posts, view updates from others, and receive notifications about important events like birthdays and 
 campus-related activities.
     <br />
-    <a href="https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND"><strong>Explore the docs »</strong></a>
+    <a href="https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND"><strong>Explore the project »</strong></a>
     <br />
     <br />
     <a href="https://www.figma.com/design/5PdKIjEzJCegZ8EMcPSQxw/SE10---Galle-Branch?node-id=1669-162202&node-type=canvas&t=7zzsFOiX0p3oQuxe-0">View Design</a>
@@ -58,6 +58,7 @@ campus-related activities.
     <li>
       <a href="#backend-repository">Backend Repository</a>
     </li>
+    <li><a href="#top-contributors">Top contributors</a></li>
     <li><a href="#license">License</a></li>
   </ol>
 </details>
@@ -141,7 +142,7 @@ Follow these steps to install and set up the project on your local machine:
 
 ## API Documentation
 
-Refer to the [Postman API Documentation](https://documenter.getpostman.com/view/35384124/2sA3s4nAij) for detailed API endpoints and usage instructions.
+Refer to the [Postman API Documentation](https://documenter.getpostman.com/view/39303999/2sAY4sjQPn) for detailed API endpoints and usage instructions.
 
 ## Figma Design
 
@@ -155,7 +156,7 @@ Access the backend repository on GitHub [here](https://github.com/SE10-IJSE/SE10
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 
-### Top contributors:
+## Top contributors:
 
 <a href="https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=SE10-IJSE/SE10-NETWORK-FRONTEND" alt="contrib.rocks image" />
@@ -181,8 +182,8 @@ Distributed under the MIT License. See [LICENSE](LICENSE) for more information.
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 [contributors-shield]: https://img.shields.io/github/contributors/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
 [contributors-url]: https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
-[forks-url]: https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/network/members
+[closed-pull-requests-shield]: https://img.shields.io/github/issues-pr-closed/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
+[closed-pull-requests-url]: https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/pulls?q=is%3Apr+is%3Aclosed
 [stars-shield]: https://img.shields.io/github/stars/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
 [stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
 [issues-shield]: https://img.shields.io/github/issues/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
@@ -200,4 +201,4 @@ Distributed under the MIT License. See [LICENSE](LICENSE) for more information.
 [Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
 [Bootstrap-url]: https://getbootstrap.com
 [JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
-[JQuery-url]: https://jquery.com 
+[JQuery-url]: https://jquery.com 
diff --git a/assets/css/birthdayPageMobile.css b/assets/css/birthdayPageMobile.css
@@ -49,7 +49,7 @@ body {
 
 .profilepic {
   border-radius: 50%;
-  border: 3px solid rgb(16, 240, 16);
+  border: 3px solid #c0c0c0;
   width: 42px;
   height: 42px;
   margin-right: 10px;

diff --git a/assets/css/deleteConfirmationPopup.css b/assets/css/deleteConfirmationPopup.css
@@ -84,7 +84,7 @@ button {
 .delete-btn {
   background-color: #d9534f;
   color: #fff;
-  padding: 10px 20px;
+  padding: 7px 20px;
 }
 
 .delete-btn:hover {
@@ -129,7 +129,7 @@ button {
 @media (max-width: 400px) {
   .modal-content {
     width: 100%;
-    max-width: 250px;
+    max-width: 255px;
     padding: 0px 10px 10px 10px;
   }
 

diff --git a/assets/css/forgotPassword.css b/assets/css/forgotPassword.css
@@ -393,7 +393,7 @@ input[type="checkbox"] {
   }
 }
 
-@media screen and (max-width: 991px) and (min-width: 768px) {
+@media screen and (max-width: 992px) and (min-width: 768px) {
   .btn {
     width: 30vw;
     font-size: 16px;

diff --git a/assets/css/homePage.css b/assets/css/homePage.css
@@ -291,6 +291,16 @@ body {
   display: none;
 }
 
+#notifications {
+  height: 60vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+#notifications::-webkit-scrollbar {
+  width: 0 !important;
+}
+
 /* bottom nav bar mobile css start */
 .img-box {
   border-bottom: 3px solid transparent;

diff --git a/assets/css/postInfoPopup.css b/assets/css/postInfoPopup.css
@@ -128,7 +128,7 @@
     width: 50%;
     max-width: 300px;
     padding: 10px;
-    height: 150px;
+    height: 154px;
   }
 
   .modal-header {

diff --git a/components/css/AdminApprovePostCardComponent.css b/components/css/AdminApprovePostCardComponent.css
@@ -6,7 +6,22 @@
   background-color: #ffffff;
   box-shadow: 0 4px 18.3px 0 rgba(0, 0, 0, 0.05);
   border-radius: 10px;
-  height: 175px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: auto;
+  padding: 20px;
+}
+
+#postCard .content {
+  flex-grow: 1;
+}
+
+#postCard .actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
 }
 
 #postCard .profileImage {
@@ -73,10 +88,6 @@
     height: 25px;
   }
 
-  #postCard {
-    height: 175px;
-  }
-
   #approve {
     right: 5px;
   }
@@ -120,16 +131,14 @@
     height: 35px;
   }
 
-  #postCard {
-    height: 185px;
-  }
-
   #approve {
     right: 80px;
   }
+
   #profile-img {
     width: 15px;
   }
+
   #postCard .profileImage {
     width: 45px;
     height: 45px;
@@ -165,10 +174,6 @@
     height: 35px;
   }
 
-  #postCard {
-    height: 185px;
-  }
-
   #approve {
     right: 80px;
   }
@@ -214,18 +219,13 @@
   #approve {
     width: 90px;
     height: 35px;
-  }
-
-  #postCard {
-    height: 185px;
-  }
-
-  #approve {
     right: 80px;
   }
+
   #profile-img {
     width: 15px;
   }
+
   #postCard .profileImage {
     width: 45px;
     height: 45px;
@@ -260,8 +260,4 @@
     position: absolute;
     right: 58px;
   }
-
-  #postCard {
-    height: 185px;
-  }
 }
diff --git a/components/css/PostCardComponent.css b/components/css/PostCardComponent.css
@@ -154,11 +154,6 @@
 
 @media screen and (max-width: 767px) {
   #createPostWeb {
-    display: none;
-  }
-
-  #createPostMobile {
-    margin-top: 10px;
     display: block;
   }
 

diff --git a/components/css/wall/ProfileWallComponent.css b/components/css/wall/ProfileWallComponent.css
@@ -582,3 +582,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     width: 100%;
   }
 }
+
+@media screen and (max-width: 1495px) {
+  .pre {
+    font-size: 14px;
+  }
+}
diff --git a/components/js/wall/AdminApproveWallComponent.js b/components/js/wall/AdminApproveWallComponent.js
@@ -134,28 +134,27 @@ const PostCard = (post) => {
               </div>
             </div>
           </div>
-          <div class="px-1 mx-lg-5 mt-3">
+          <div class="content px-1 mx-lg-5 mt-3">
             <p>${post.content}</p>
-            <div class="d-flex justify-content-end gap-3">
-              <button id="decline-${
-                post.postId
-              }" class="border-0 p-2 px-2 rounded-4 d-flex align-items-center gap-1 decline-post">
+          </div>
+          <div class="actions d-flex justify-content-end gap-3">
+            <button id="decline-${
+              post.postId
+            }" class="border-0 p-2 px-2 rounded-4 d-flex align-items-center gap-1 decline-post">
                 <img src="../../../assets/icons/decline_dark.png" alt="Decline Icon">
                 <span>Decline</span>
-              </button>
-              <button id="approve-${
-                post.postId
-              }" class="border-0 p-2 px-2 rounded-4 d-flex align-items-center gap-1 approve-post">
+            </button>
+            <button id="approve-${
+              post.postId
+            }" class="border-0 p-2 px-2 rounded-4 d-flex align-items-center gap-1 approve-post">
                 <img src="../../../assets/icons/approve-dark.png" alt="Approve Icon">
                 <span>Approve</span>
-              </button>
-            </div>
+            </button>
           </div>
         </div>
       </div>
     `;
 
-  // Append post to the wall and attach event listeners after rendering
   $("#homeWallComponent").append(postHtml);
 
   // Attach event listeners for approve and decline buttons