css adjustments

BT3103AppDev1 · Apr 26, 2024 · ef6ed5e · ef6ed5e
1 parent c1129c4
commit ef6ed5e
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 62 deletions.
diff --git a/src/components/MyGroupListComponent.vue b/src/components/MyGroupListComponent.vue
@@ -97,11 +97,6 @@ export default {
       });
     },
 
-    // toggleSuccess() {
-    //       this.showSuccess = false
-    //       this.$router.push("/all_groups")
-    // },
-
     async deleteGroupFromUser(userID, groupID) {
       // search user via userID, delete GroupID from array
       const db = getFirestore(firebaseApp);
@@ -234,8 +229,8 @@ export default {
 
 .group-image {
   align-content: center;
-  width: 350px; /* Adjust as needed */
-  height: 200px; /* Adjust as needed */
+  width: 350px; 
+  height: 200px; 
   text-align: center;
   overflow: hidden;
   border-radius: 10px;
@@ -245,7 +240,7 @@ export default {
 .group-image img {
   width: 100%;
   height: 100%;
-  object-fit: cover; /* Ensures the image covers the entire space */
+  object-fit: cover;
   border: 1px solid lightgrey;
 }
 
@@ -259,7 +254,7 @@ export default {
   color: grey;
   overflow: hidden;
   text-overflow: ellipsis;
-  -webkit-line-clamp: 1; /* Limit to 3 lines in WebKit browsers */
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
@@ -277,7 +272,7 @@ export default {
 .delete-group-btn {
   margin-right: 10px;
   padding: 8px 10px;
-  background-color: #ff0000; /* Example background color */
+  background-color: #ff0000;
   color: #fff;
   border: none;
   cursor: pointer;

diff --git a/src/components/Navbar_global.vue b/src/components/Navbar_global.vue
@@ -157,15 +157,15 @@ body {
   height: 65px;
   color: white;
   cursor: pointer;
-  transition: background-color 0.3s ease, color 0.3s ease; /* Adding transition effect */
-  display: flex; /* Use flexbox */
+  transition: background-color 0.3s ease, color 0.3s ease;
+  display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .topnav ul li:hover {
-  color: white; /* Change text color on hover */
-  background-color: #0066ff; /* Change background color on hover */
+  color: white; 
+  background-color: #0066ff;
 }
 
 .dropdown:hover .dropdown-content {
@@ -177,10 +177,10 @@ body {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
-  min-width: 100px; /* Adjust width to match "Groups" menu item */
+  min-width: 100px; 
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
-  margin-top: 195px; /* Adjust vertical position */
+  margin-top: 195px;
 }
 
 .dropdown-content ul {
@@ -210,9 +210,9 @@ body {
 }
 
 .profile-container {
-  display: flex; /* Make elements behave as flex items */
+  display: flex;
   justify-content: center;
-  align-items: center; /* Align items vertically */
+  align-items: center; 
 }
 
 .modal {
@@ -226,7 +226,6 @@ body {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-/* Modal box styles */
 .modal-content {
   background-color: #fff;
   margin: 10% auto;
@@ -239,7 +238,6 @@ body {
   max-width: 500px;
 }
 
-/* Close button styles */
 .close {
   float: right;
   font-size: 2rem;
@@ -248,7 +246,6 @@ body {
   font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 }
 
-/* Header styles */
 .modal-header {
   display: flex;
   align-items: center;
@@ -279,10 +276,10 @@ body {
   font-weight: bold;
   background-color: #007bff;
   float: right;
-  transition: background-color 0.3s ease, color 0.3s ease; /* Adding transition effect */
+  transition: background-color 0.3s ease, color 0.3s ease; 
 }
 
 .sign-out-button:hover {
-  background-color: #0056b3; /* Change color on hover */
+  background-color: #0056b3;
 }
 </style>
diff --git a/src/components/Navbar_groups.vue b/src/components/Navbar_groups.vue
@@ -118,6 +118,6 @@ export default {
         width: 50px;
         margin: 0px;
         padding: 0px;
-        border: 1px solid #555; /* Add border */
+        border: 1px solid #555;
     }
 </style>
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
@@ -3,7 +3,6 @@
         <h1>Profile</h1><hr>
 
         <div id = "profile_pic">
-            <!-- insert image here -->
         </div>
 
         <div id = "profile_overview">

diff --git a/src/components/ProfileForm.vue b/src/components/ProfileForm.vue
@@ -149,17 +149,6 @@ export default {
       }
     },
 
-    // async getUserImage() {
-    //   let userRef = doc(db, "users", this.user);
-    //   try {
-    //     let userData = await getDoc(userRef);
-    //     console.log(userData.data().selectedIcon);
-    //     this.imgURL = userData.data().selectedIcon;
-    //   } catch (error) {
-    //     console.error("Potentially, attribute does not exist for this user account");
-    //   }
-    // },
-
     getPic(url) {
       console.log("@/assets/" + url)
       return "@/assets/" + url
@@ -224,7 +213,7 @@ h1 {
   color: black;
   border: 0.5px solid gray;
   font-weight: bold;
-  background-color: lightgray; /* Bootstrap primary */
+  background-color: lightgray; 
   margin-left: auto;
   margin-top: -5px;
   font-family: "Roboto", sans-serif;
@@ -242,7 +231,6 @@ img {
 
 .displayProfile {
   margin-top: 8px;
-  /* border: grey 2px solid; */
   border-radius: 15px;
   padding: 10px;
   text-align: center;
@@ -256,7 +244,7 @@ img {
 }
 
 .username {
-  font-size: 30px; /* Adjust as needed */
+  font-size: 30px; 
   margin-top: 0px;
   margin-bottom: 0px;
 }
@@ -295,10 +283,10 @@ img {
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
-  display: flex; /* Make modal a flex container */
-  justify-content: center; /* Center content horizontally */
-  align-items: center; /* Center content vertically */
+  background-color: rgba(0, 0, 0, 0.4); 
+  display: flex;
+  justify-content: center; 
+  align-items: center;
 }
 
 .registerbox {
@@ -307,7 +295,7 @@ img {
   border: 1px solid;
   border-radius: 12px;
   background-color: white;
-  width: 50%; /* Set width to 100% of modal */
+  width: 50%; 
   align-items: center;
   padding-left: 20px;
 }
@@ -355,7 +343,7 @@ img {
   border-radius: 5px;
   color: white;
   font-weight: bold;
-  background-color: rgb(38, 171, 38); /* Bootstrap primary */
+  background-color: rgb(38, 171, 38); 
   margin-bottom: 10px;
   margin-left: 9% ;
   width: 82%;
@@ -366,7 +354,7 @@ img {
 }
 
 .close-btn {
-  background-color: #dc3545; /* Bootstrap danger */
+  background-color: #dc3545;
   margin-top: 5px;
   margin-right: 900px;
   margin-bottom: 0px;

diff --git a/src/components/Recent_discussion.vue b/src/components/Recent_discussion.vue
@@ -120,13 +120,13 @@ hr {
 }
 
 .discussion-item {
-  background-color: #f8f8f8; /* Light grey background */
-  border-radius: 8px; /* Rounded corners */
+  background-color: #f8f8f8;
+  border-radius: 8px; 
   display: flex;
   align-items: center;
   padding: 10px;
-  margin-bottom: 10px; /* Space between panels */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+  margin-bottom: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -138,7 +138,7 @@ hr {
 .discussion-item img {
   width: 60px; 
   height: 60px;
-  border-radius: 50%; /* Circular avatar */
+  border-radius: 50%; 
   margin-right: 10px;
 }
 
@@ -163,7 +163,7 @@ hr {
 button {
   font-family: "Roboto", sans-serif;
   font-weight: 400;
-  margin-left: 20px; /* Adjust as needed */
+  margin-left: 20px; 
   background-color: #d7d2d2;
   color: black;
   border: 0.5px gray solid;
@@ -175,6 +175,6 @@ button {
 }
 
 button:hover {
-  background-color: darkgrey; /* Background color on hover */
+  background-color: darkgrey;
 }
 </style>
diff --git a/src/components/Recent_events.vue b/src/components/Recent_events.vue
@@ -122,33 +122,33 @@ hr {
 
 .event-card {
   display: flex;
-  align-items: center; /* Align items vertically in the center */
-  margin-bottom: 20px; /* Space between cards */
+  align-items: center; 
+  margin-bottom: 20px; 
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  overflow: hidden; /* Ensures the image and details are contained within the card's border-radius */
+  overflow: hidden; 
 }
 
 .event-image-container {
-  flex: 0 0 150px; /* Fixed width for the image container */
-  height: 100px; /* Fixed height for the image container */
-  overflow: hidden; /* Hide overflow to maintain aspect ratio */
+  flex: 0 0 150px; 
+  height: 100px; 
+  overflow: hidden;
 }
 
 .event-image {
   width: 100%;
   height: 100%;
-  object-fit: cover; /* Ensures the image fully covers the designated area */
-  border-radius: 10px; /* Rounds the corners of the image */
+  object-fit: cover;
+  border-radius: 10px;
   margin-left: 10px;
   margin-right: 10px;
 }
 
 
 .event-details {
   padding: 10px;
-  flex: 1; /* Takes the remaining space in the flex container */
+  flex: 1; 
 }
 
 .event-date, .event-location {