Ui rework on Malls in Admin Pannel

src/app/admin/_commonCard.scss

@@ -1,115 +0,0 @@
-.common_card{
-    position: relative;
-    width: 25vw;
-    height: 100%;
-    border-radius: 10px;
-    margin: 10px;
-    z-index: 1;
-
-    &:before{
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        box-shadow: 0 0 10px 1px var(--dark-grey);
-        filter: brightness(200%);
-        z-index: -1;
-        border-radius: 10px;
-    }
-}
-
-.card_header{
-    position: relative;
-    width: 100%;
-    height: 50px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    z-index: 1;
-    
-    &:before{
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: var(--grey);
-        filter: brightness(150%);
-        z-index: -1;
-        border-radius: 10px 10px 0 0;
-
-    }
-
-    h4{
-        font-size: 18px;
-        color: var(--dark-grey);
-        margin: 0 20px;
-    }
-    
-    button{
-        width: 30px;
-        height: 30px;
-        padding: 0;
-        border-radius: 30px;
-        font-weight: 800;
-        font-size: 20px;
-        margin: 0 20px;
-    }
-}
-.card_upfold{
-    overflow: auto;
-    list-style: none;
-    height: 300px;
-
-    h5{
-        font-size: 16px;
-        color: var(--dark-grey);
-        padding: 5px 0;
-    }
-    p{
-        font-size: 14px;
-        color: var(--grey);
-        padding: 5px 0;
-    }
-
-    .cardList{
-        position: relative;
-        margin: 20px;
-        cursor: pointer;
-        z-index: 0;
-
-        &:before{
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: var(--grey);
-            filter: brightness(160%);
-            z-index: -1;
-            transform: scale(105%);
-            border-radius: 10px;
-            border: 1px solid var(--grey);
-
-        }
-    }
-}
-
-::-webkit-scrollbar {
-    width: 5px;
-    border-radius: 10px;
-    background: var(--dark-grey);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: white; 
-    border-radius: 10px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: var(--grey); 
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    border-radius: 10px;
-    background: var(--dark-grey); 
-  }

src/app/admin/admin.component.scss

@@ -86,7 +86,7 @@
 
 .malls{
 	display: grid;
-	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: repeat(2, 1fr);
 
 	:nth-child(n){
 		margin: 30px;

src/app/admin/malls/malls.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Malls</h4>
         <div>
@@ -7,20 +7,22 @@
             <button class="rect-button" (click)='showModal = true'>+</button>
         </div>
     </div>
+
     <div class="card_upfold">
         <li *ngFor='let malls of allMalls' class="mallList">
-            <img src="{{malls.image_url}}">
+            <img src="{{malls.image_url}}" class="mall-img">
             <div class="upfold-content">
                 <h5> {{malls.mall_name}}</h5>
                 <p>{{malls.description}}</p>
-                <div>
-                    <span *ngIf='malls.outlet.length > 0'>Outlets: {{malls.outlet.length}}</span>
-                    <span *ngIf='malls.outlet.length === 0'>Outlets: 0</span>
-                    <span> Rating: {{malls.rating}} </span>
-                    <span> Location: {{malls.mall_address}}</span>
-                </div>
-
             </div>
+            <div>
+                <span>Id: {{malls.mall_id}}</span>
+                <span *ngIf='malls.outlet.length > 0'>Outlets: {{malls.outlet.length}} <img src="../../../assets/outlet.svg"></span>
+                <span *ngIf='malls.outlet.length === 0'>Outlets: 0 <img src="../../../assets/outlet.svg"></span>
+                <span> Rating: {{malls.rating}} <img src="../../../assets/star.svg"> </span>
+                <span>{{malls.mall_address}} <img src="../../../assets/location.svg"></span>
+            </div>
+            <img src="../../../assets/edit.svg" class="editsvg">
         </li>
     </div>
 

src/app/admin/malls/malls.component.scss

@@ -1,16 +1,10 @@
-@import '../commonCard';
-
-.common_card {
-    width: 100%;
-}
-
 .card_header {
     div {
         display: flex;
         align-items: center;
 
         input {
-            width: 150px;
+            width: 200px;
             height: 32px;
             border: none;
             border-radius: 10px;
@@ -22,66 +16,96 @@
 
 }
 
-.mallList {
-    display: flex;
-    align-items: center;
-    position: relative;
-    margin: 20px;
-
-    &:before {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: var(--grey);
-        filter: brightness(160%);
-        z-index: -1;
-        border-radius: 10px;
-        border: 1px solid var(--grey);
-    }
-
-    img {
-        width: 100px;
-        height: 100px;
-        border-radius: 10px;
-    }
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
 
-    .upfold-content {
-        padding: 0 10px;
+    .mallList {
+        display: flex;
+        align-items: center;
         position: relative;
+        margin: 20px;
 
-        p {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            width: 300px;
+        &:before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            border-radius: 10px;
+            border: 1px solid var(--grey);
         }
 
-        .rating {
-            i {
+        .mall-img {
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+        }
 
-                color: var(--grey);
+        .editsvg{
+            border: 2px solid var(--brand-blue);
+            border-radius: 50px;
+            padding: 4px;
+            margin: 20px;
+            width: 30px;
+            transform: scale(100%);
+            transition: 0.2s transform ease-in;
+            cursor: pointer;
+            margin-right: 30px;
+
+            &:hover{
+                transform: scale(110%);
+                transition: 0.2s all ease-in;
             }
         }
 
-        div {
-            display: flex;
-            align-items: center;
+        .upfold-content {
+            padding: 0 10px;
+            position: relative;
+            width: 100%;
+            width: 90%;
 
+            h5{
+                font-size: 16px;
+                color: var(--dark-grey);
+                padding: 5px 0;
+            }
+            
+            p {
+                font-size: 14px;
+                color: var(--grey);
+                overflow: hidden;
+                width: 300px;
+                height: 55px;
+                width: 400px;
+                font-weight: 500;
+            }
+        }
+
+        div{
             span {
-                margin: 10px 0;
+                width: 100%;
                 margin-right: 10px;
                 color: var(--grey);
+                font-size: 15px;
+                font-weight: 500;
+                display: inline-flex;
 
-                img {
-                    width: 10px;
-                    height: 10px;
+                img{
+                    display: block;
+                    width: 15px;
+                    margin-left: 5px;
                 }
             }
+
         }
     }
 }
 
+
 .popUp {
     position: fixed;
     width: 100%;

src/app/admin/malls/malls.component.ts

@@ -106,6 +106,7 @@ export class MallsComponent implements OnInit {
         arrayofMalls.push(data.mall)
       })
       this.allMalls = arrayofMalls;
+      console.log(arrayofMalls)
       this.tempMalls = arrayofMalls;
       localStorage.allMalls = JSON.stringify(arrayofMalls)
 

src/app/admin/notificaiton/notificaiton.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Notification</h4>
         <button class="rect-button">+</button>

src/app/admin/notificaiton/notificaiton.component.scss

@@ -1 +1,37 @@
-@import '../commonCard'
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    h5{
+        font-size: 16px;
+        color: var(--dark-grey);
+        padding: 5px 0;
+    }
+    p{
+        font-size: 14px;
+        color: var(--grey);
+        padding: 5px 0;
+    }
+
+    .cardList{
+        position: relative;
+        margin: 20px;
+        cursor: pointer;
+        z-index: 0;
+
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            transform: scale(105%);
+            border-radius: 10px;
+            border: 1px solid var(--grey);
+
+        }
+    }
+}

src/app/admin/queries/queries.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Queries</h4>
         <button class="rect-button">+</button>

src/app/admin/queries/queries.component.scss

@@ -1 +1,37 @@
-@import "../commonCard";
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    h5{
+        font-size: 16px;
+        color: var(--dark-grey);
+        padding: 5px 0;
+    }
+    p{
+        font-size: 14px;
+        color: var(--grey);
+        padding: 5px 0;
+    }
+
+    .cardList{
+        position: relative;
+        margin: 20px;
+        cursor: pointer;
+        z-index: 0;
+
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            transform: scale(105%);
+            border-radius: 10px;
+            border: 1px solid var(--grey);
+
+        }
+    }
+}

src/app/admin/support-tickets/support-tickets.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Support Ticket</h4>
         <button class="rect-button">+</button>

src/app/admin/support-tickets/support-tickets.component.scss

@@ -1 +1,37 @@
-@import '../commonCard'
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    h5{
+        font-size: 16px;
+        color: var(--dark-grey);
+        padding: 5px 0;
+    }
+    p{
+        font-size: 14px;
+        color: var(--grey);
+        padding: 5px 0;
+    }
+
+    .cardList{
+        position: relative;
+        margin: 20px;
+        cursor: pointer;
+        z-index: 0;
+
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            transform: scale(105%);
+            border-radius: 10px;
+            border: 1px solid var(--grey);
+
+        }
+    }
+}

src/app/admin/vendors/vendors.component.html

@@ -1,24 +1,18 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Vendors</h4>
         <div>
-            <input type="text" placeholder="Search Malls" [(ngModel)]="searchTerm" (input)="searchAllMalls()"
+            <input type="text" placeholder="Search Vendors" [(ngModel)]="searchTerm" (input)="searchAllMalls()"
                 autocomplete="off" #searchbar>
             <button class="rect-button" (click)='showModal = true'>+</button>
         </div>
     </div>
     <div class="card_upfold">
-        <li *ngFor='let vendor of vendors' class="mallList">
-            <img src="{{malls.image_url}}">
+        <li *ngFor='let vendor of vendors' class="vendorList">
+            <img src="{{vendor.vendorImageLink}}">
             <div class="upfold-content">
-                <h5> {{vendor.vendorName}}</h5>
-                <div>
-                    <span *ngIf='vendor.outlets.length > 0'>Outlets: {{vendor.outlets.length}}</span>
-                    <span *ngIf='vendor.outlets.length === 0'>Outlets: 0</span>
-                    <span> Rating: {{vendor.ratings}} </span>
-                    <span> Location: {{vendor.vendorAddress}}</span>
-                </div>
-
+                <h5>Id:{{vendor.vendor_Id}}   {{vendor.vendorName}}</h5>
+                <span>Ph: {{vendor.vendorOfficeNo}}</span>
             </div>
         </li>
     </div>

src/app/admin/vendors/vendors.component.scss

@@ -1,7 +1,21 @@
-@import '../commonCard';
-
-.common_card {
+.card {
+    position: relative;
     width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    margin: 10px;
+    z-index: 0;
+
+    &:before{
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        box-shadow: 0 0 10px 1px var(--dark-grey);
+        filter: brightness(200%);
+        z-index: -1;
+        border-radius: 10px;
+    }
 }
 
 .card_header {
@@ -10,7 +24,7 @@
         align-items: center;
 
         input {
-            width: 150px;
+            width: 200px;
             height: 32px;
             border: none;
             border-radius: 10px;
@@ -22,7 +36,7 @@
 
 }
 
-.mallList {
+.vendorList {
     display: flex;
     align-items: center;
     position: relative;

src/app/admin/vendors/vendors.component.ts

@@ -11,14 +11,15 @@ export class VendorsComponent implements OnInit {
   constructor(private vendorService: VendorService) { }
 
   vendors: any
+
   ngOnInit() {
-    this.getVendorInfo()
+    this.getVendorInfo();
   }
 
   getVendorInfo() {
     this.vendorService.getAllVendors().then(vendors => {
       this.vendors = vendors
-      console.log(vendors)
+      console.log(this.vendors)
     }, () => {
       console.log("Error Getting Vendors")
     })

src/assets/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#007bcc"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>

src/assets/location.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#9a9a9a"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>

src/assets/outlet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#9a9a9a"><path d="M0 0h24v24H0z" fill="none"/><path d="M8.1 13.34l2.83-2.83L3.91 3.5c-1.56 1.56-1.56 4.09 0 5.66l4.19 4.18zm6.78-1.81c1.53.71 3.68.21 5.27-1.38 1.91-1.91 2.28-4.65.81-6.12-1.46-1.46-4.2-1.1-6.12.81-1.59 1.59-2.09 3.74-1.38 5.27L3.7 19.87l1.41 1.41L12 14.41l6.88 6.88 1.41-1.41L13.41 13l1.47-1.47z"/></svg>

src/assets/star.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#808080"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 7.13l.97 2.29.47 1.11 1.2.1 2.47.21-1.88 1.63-.91.79.27 1.18.56 2.41-2.12-1.28-1.03-.64-1.03.62-2.12 1.28.56-2.41.27-1.18-.91-.79-1.88-1.63 2.47-.21 1.2-.1.47-1.11.97-2.27M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#9a9a9a"><path d="M0 0h24v24H0z" fill="none"/><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>

src/styles.scss

@@ -249,3 +249,90 @@ button {
 		}
 	}
 }
+
+.card{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    margin: 10px;
+    z-index: 1;
+
+    &:before{
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        box-shadow: 0 0 10px 1px var(--dark-grey);
+        filter: brightness(200%);
+        z-index: -1;
+        border-radius: 10px;
+    }
+    
+    .card_header{
+        position: relative;
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 1;
+        
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(150%);
+            z-index: -1;
+            border-radius: 10px 10px 0 0;
+    
+        }
+    
+        h4{
+            font-size: 18px;
+            color: var(--dark-grey);
+            margin: 0 20px;
+        }
+        
+        button{
+            width: 30px;
+            height: 30px;
+            padding: 0;
+            border-radius: 30px;
+            font-weight: 800;
+            font-size: 20px;
+            margin: 0 20px;
+			transform: scale(100%);
+			transition: 0.2s all ease-in;
+
+			&:hover{
+                transform: scale(110%);
+                transition: 0.2s all ease-in;
+            }
+
+        }
+    }
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    border-radius: 10px;
+    background: var(--dark-grey);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: white; 
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: var(--grey); 
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    border-radius: 10px;
+    background: var(--dark-grey); 
+  }