last few edits

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

Hide file tree

Showing 20 changed files with 94 additions and 147 deletions.
diff --git a/src/mComponents/Approval.vue b/src/mComponents/Approval.vue
@@ -193,7 +193,7 @@
 
 .approve-btn {
   margin-left: 10px; 
-  background-color: #4CAF50; /* Green */
+  background-color: #4CAF50; 
   border: none;
   color: white;
   padding: 10px 20px;
@@ -210,7 +210,7 @@
 
 .reject-btn {
   margin-left: 10px; 
-  background-color: red; /* Green */
+  background-color: red;
   border: none;
   color: white;
   padding: 10px 20px;
@@ -226,11 +226,11 @@
 }
 
 .approve-btn:hover {
-  background-color: #2b7b2d; /* Darker Green */
+  background-color: #2b7b2d; 
 }
 
 .reject-btn:hover {
-  background-color: rgb(159, 7, 7); /* Darker Red */
+  background-color: rgb(159, 7, 7);/
 }
 
 @media (max-width: 768px) {

diff --git a/src/mComponents/ContactPopup.vue b/src/mComponents/ContactPopup.vue
@@ -5,7 +5,6 @@
         <p><strong>User ID:</strong> {{ name }}</p>
         <p><strong>Telegram Handle:</strong> {{ telegram }}</p>
         <p><strong>Location:</strong> {{ address }}</p>
-        <!-- Add other contact information or functionality here -->
         <button @click="$emit('closePopup')">Close</button>
       </div>
     </div>

diff --git a/src/mComponents/CreateListing.vue b/src/mComponents/CreateListing.vue
@@ -166,7 +166,7 @@ export default {
 
 <style scoped>
 .container-inner {
-    height: 100vh; /* Set height to full viewport height */
+    height: 100vh; 
     padding: 2vh;
     padding-left: 0px;
     padding-right: 0px;

diff --git a/src/mComponents/EditListing.vue b/src/mComponents/EditListing.vue
@@ -200,8 +200,8 @@ export default {
 <style scoped>
 .close-button {
     position: absolute;
-    top: 0; /* Position at the top */
-    left: 0; /* Position at the left */
+    top: 0; 
+    left: 0;
     margin-top: 1vh;
     margin-left: 1vh;
     padding: 0.5rem;

diff --git a/src/mComponents/ItemList.vue b/src/mComponents/ItemList.vue
@@ -144,7 +144,7 @@ export default {
 
       // function to compute distance
       calculateDistance(lat1, lon1, lat2, lon2) {
-        const earthRadiusKm = 6371; // Radius of the Earth in kilometers
+        const earthRadiusKm = 6371; 
         const dLat = this.degreesToRadians(lat2 - lat1);
         const dLon = this.degreesToRadians(lon2 - lon1);
 

diff --git a/src/mComponents/ItemListComponent.vue b/src/mComponents/ItemListComponent.vue
@@ -1,25 +1,18 @@
 <template>
   <div class="group-list-item">
-    <!-- Image on the left -->
     <div class="group-image">
       <img :src="fileURL" alt="No Group Logo" />
     </div>
 
-    <!-- Details on the right -->
     <div class="group-details">
-      <!-- Item Name -->
       <h3>{{ item.Name }}</h3>
 
-      <!-- Seller Name -->
       <p>{{ sellerName }}</p>
 
-      <!-- Location -->
       <p>Location: {{ item.Location }}</p>
 
-      <!-- Price (moved to top right) -->
       <p class="price">Price: {{ item.Price }}</p>
 
-      <!-- Button (moved to bottom right) -->
       <div class="button-container">
         <div v-if="isUserItem" class="deal-request-btn">
           <p>My Item</p>
@@ -167,16 +160,15 @@ export default {
 .group-image {
   flex: 1;
   max-width: 30%;
-  width: 100px; /* Fixed width for the image container */
+  width: 100px; 
 }
 
 .group-image img {
   width: 100%;
   height: 120px;
   width: 120px;
-  object-fit: cover; /* Maintain aspect ratio */
+  object-fit: cover; 
   border-radius: 10px;
-  /* border: 1px solid lightgrey; */
 }
 
 .group-details {

diff --git a/src/mComponents/MyListing.vue b/src/mComponents/MyListing.vue
@@ -124,7 +124,7 @@ h1 {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
+  background-color: rgba(0, 0, 0, 0.5); 
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/src/mComponents/MyListingComponent.vue b/src/mComponents/MyListingComponent.vue
@@ -161,14 +161,14 @@
  .group-image {
    flex: 1;
    max-width: 30%;
-   width: 100px; /* Fixed width for the image container */
+   width: 100px; 
  }
  
  .group-image img {
    width: 200px;
    margin-left: -200px;
-   height: 200px; /* Fixed height for the image */
-   object-fit: cover; /* Maintain aspect ratio */
+   height: 200px;
+   object-fit: cover; 
    border-radius: 15px;
    /* border: 1px solid gray; */
  }

diff --git a/src/mComponents/Navbar_market.vue b/src/mComponents/Navbar_market.vue
@@ -53,7 +53,6 @@ export default {
         text-decoration: none;
         margin-bottom: 12px;
         text-align: center;
-        /* margin-top: 10px; */
     }
     
         /* li a.active {

diff --git a/src/mComponents/SentListingComponent.vue b/src/mComponents/SentListingComponent.vue
@@ -1,25 +1,18 @@
 <template>
   <div class="group-list-item">
-    <!-- Image on the left -->
     <div class="group-image">
       <img :src="fileURL" alt="No Group Logo" />
     </div>
 
-    <!-- Details on the right -->
     <div class="group-details">
-      <!-- Item Name -->
       <h3>{{ item.Name }}</h3>
 
-      <!-- Seller Name -->
       <p>{{ this.sellerName }}</p>
 
-      <!-- Location -->
       <p>Location: {{ item.Location }}</p>
 
-      <!-- Price (moved to top right) -->
       <p class="price">Price: {{ item.Price }}</p>
 
-      <!-- Button (moved to bottom right) -->
       <div class="button-container">
         <button class='contact-button' v-if="isSoldtoYou" @click="emitMsg">View Contact Details</button>
         <button class='delete-button' v-else-if="isSold" @click="deleteDealRequest">Delete Request</button>
@@ -158,14 +151,14 @@ export default {
 .group-image {
   flex: 1;
   max-width: 30%;
-  width: 100px; /* Fixed width for the image container */
+  width: 100px; 
 }
 
 .group-image img {
   width: 200px;
   height: 200px; 
-  margin-left: -125px;/* Fixed height for the image */
-  object-fit: cover; /* Maintain aspect ratio */
+  margin-left: -125px;
+  object-fit: cover; 
   border-radius: 10px;
   /* border: 1px solid gray; */
   margin-right: 20px;

diff --git a/src/views/Events.vue b/src/views/Events.vue
@@ -63,10 +63,10 @@ export default {
   }
 
   hr {
-    border: none; /* Remove the default border */
-    height: 1.041px; /* Set the height of the horizontal line */
-    background-color: #ffffff; /* Set the background color to white */
-    margin: 0; /* Optional: Add some margin above and below the horizontal line */
+    border: none; 
+    height: 1.041px; 
+    background-color: #ffffff; 
+    margin: 0;
     padding: none;
   }
 

diff --git a/src/views/MarketApprove.vue b/src/views/MarketApprove.vue
@@ -136,7 +136,6 @@ export default {
   justify-content: space-between;
 }
 
-/* List of items */
 .list {
   width: 85%; 
 }
@@ -146,15 +145,15 @@ img {
   height: 300px;
   margin-top: 20px;
 }
-/* Market Navbar */
+
 .nav {
   width: 15%; 
   position: fixed;
   border-top: 66px;
   overflow-y: auto; 
 }
 
-/* Global Navbar */
+
 .nav-global {
   position: fixed;
   top: 0;
@@ -167,15 +166,15 @@ img {
 }
 
 .info-header h1 {
-  margin-left: 35px; /* Adjust this as needed */
+  margin-left: 35px; 
   font-size: 40px;
-  margin-bottom: 10px; /* Add some space between each element */
+  margin-bottom: 10px;
 }
 
 .info-header h2 {
-  margin-left: 35px; /* Adjust this as needed */
+  margin-left: 35px;
   font-size: 25px;
-  margin-bottom: 10px; /* Add some space between each element */
+  margin-bottom: 10px;
 }
 
 hr {  

diff --git a/src/views/MarketDealReq.vue b/src/views/MarketDealReq.vue
@@ -6,7 +6,6 @@
 
 <template>
   <body>
-    <!-- Global Navbar -->
     <div class="global-nav">
       <Navbar_global />
     </div>
@@ -50,26 +49,24 @@ export default {
   margin-top:67px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between; /* Distribute items evenly */
+  justify-content: space-between; 
 }
 
-/* List of items */
 .list {
-  width: 85%; /* Adjust the width as needed */
+  width: 85%; 
 }
 
 img {
   padding-top: 25px;
   max-width: 100px;
 }
-/* Market Navbar */
+
 .nav {
-  width: 15%; /* Adjust the width as needed */
+  width: 15%;
   position: fixed;
-  overflow-y: auto; /* Allow scrolling if needed */
+  overflow-y: auto;
 }
 
-/* Global Navbar */
 .global-nav {
   position: fixed;
   top: 0;

diff --git a/src/views/MarketMyList.vue b/src/views/MarketMyList.vue
@@ -9,16 +9,13 @@
 
 <template>
   <div>
-    <!-- Global Navbar -->
     <div class="navbar-global">
       <Navbar_global />
     </div>
-    <!-- Market Navbar -->
     <div class="navbar-market">
       <NavBar_market />
     </div>
 
-    <!-- Modal -->
     <div v-if="isOpen" class="modal-overlay">
       <div class="modal">
         <button class="close-btn" @click="isOpen = false">Close</button>
@@ -27,9 +24,7 @@
         <CreateListing @open="toggleSuccess"/>
       </div>
     </div>
-    <!-- Main Content -->
     <body>
-              <!-- Success Message -->
       <div v-if="showSuccess" class="success">
         <MarketSuccess :message="message" @close="toggleSuccessClose"/>
       </div>
@@ -81,16 +76,14 @@ export default {
 }
 </script>
 <style scoped>
-/* Global Navbar */
 .navbar-global {
   position: sticky;
   top: 0;
   left: 0;
-  right: 0; /* Ensure it's above other content */
+  right: 0; 
   z-index:1000;
 }
 
-/* Market Navbar */
 .navbar-market {
   position: fixed;
   top: 65px; 
@@ -119,7 +112,7 @@ export default {
 }
 
 .create-group-btn {
-  background-color: #007bff; /* Bootstrap primary */
+  background-color: #007bff; 
   cursor: pointer;
   padding: 10px 20px;
   border: none;
@@ -156,26 +149,25 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
-  display: flex;
+  background-color: rgba(0, 0, 0, 0.5); 
   justify-content: center;
   align-items: center;
 }
 
 .modal {
   position: relative;
-  max-width: 600px; /* max width for larger screens */
+  max-width: 600px; 
   background-color: white;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow-y: auto; /* makes modal content scrollable */
-  max-height: 90%; /* limits the modal height to encourage scrolling */
+  overflow-y: auto; 
+  max-height: 90%;
 }
 
 .modal-content {
   position: relative;
-  overflow-y: auto; /* ensure scrollability of content within modal if needed */
+  overflow-y: auto;
 }
 
 .success {