Modal UI bug fix

src/app/malls/malls.page.ts

@@ -26,13 +26,11 @@ export class MallsPage implements OnInit {
 
     ngOnInit() {
         this.getMallsByLocation();
-        this.getMallsByFoodType('pizza');
     }
 
     toggleMallBookmark(index: number) {
         this.tempMalls[index].mall.is_bookmarked = !this.tempMalls[index].mall.is_bookmarked;
-        this.allMalls[index].mall.is_bookmarked = !this.allMalls[index].mall.is_bookmarked;
-        localStorage.allMalls = JSON.stringify(this.allMalls);
+        console.log(this.tempMalls[index].mall);
         this.mallService.updateMallData(this.tempMalls[index]);
     }
 
@@ -86,10 +84,9 @@ export class MallsPage implements OnInit {
             this.toastService.presentToast("Getting malls based on your location...", "dark");
             navigator.geolocation.getCurrentPosition((position) => {
                 this.mallService.mallsByLocation(position.coords.latitude, position.coords.longitude).then((response: any) => {
-                    if (response.length > 0) {
-                        localStorage.allMalls = JSON.stringify(response);
-                        this.allMalls = JSON.parse(localStorage.allMalls);
-                        this.tempMalls = JSON.parse(localStorage.allMalls);
+                    if (response.length > 0) {                        
+                        this.allMalls = response;
+                        this.tempMalls = response;
                     } else {
                         this.toastService.presentToast("No malls near you your location, Getting all the malls...", "warning");
                         this.getAllMalls();
@@ -105,9 +102,8 @@ export class MallsPage implements OnInit {
 
     getAllMalls() {
         this.mallService.allMalls().then((response) => {
-            localStorage.allMalls = JSON.stringify(response);
-            this.allMalls = JSON.parse(localStorage.allMalls);
-            this.tempMalls = JSON.parse(localStorage.allMalls);
+            this.allMalls = response;
+            this.tempMalls = response;
         }, (error) => {
             console.log(error);
         });

src/global.scss

@@ -153,13 +153,18 @@ figure {
 	background-color: white;
 	position: fixed;
 	width: 100%;
-	z-index: 5;
 	bottom: 0;
 	left: 0;
 	box-shadow: 0 0 5px var(--brand-grey);
-	transition: transform 0.5s;
-	transform: translateY(50vh);
+	transition: transform 0.3s, opacity 0.3s;
+    transform: translateY(50vh);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 5;
+    
 	&.active {
+        opacity: 1;
+        pointer-events: all;
 		transform: translateY(0);
 	}
 	header {
@@ -170,7 +175,8 @@ figure {
 		padding: 15px;
 		font-size: 14px;
 		align-items: center;
-		position: sticky;
+        position: sticky;
+        position: -webkit-sticky;
 		top: 0;
 		z-index: 1;