Malls page completed

src/app/malls/malls.page.html

@@ -2,12 +2,12 @@
 
     <div class="overlay" [ngClass]="{ 'active' : show_menu }"></div>
 
-    <div class="top-bar-holder">
-        <section class="header-bar">
-            <h2> Find malls near you </h2>
-            <button> <ion-icon src="assets/custom/search.svg"></ion-icon> </button>
-        </section>
+    <section class="header-bar">
+        <h2> Find malls near you </h2>
+        <button> <ion-icon src="assets/custom/search.svg"></ion-icon> </button>
+    </section>
 
+    <div class="top-bar-holder">
         <div class="tabs-holder">
             <button (click)="selected_tab = 'you'" class="tab" [ngClass]="{'active' : selected_tab === 'you'}"> For you </button>
             <button (click)="selected_tab = 'recomended'" class="tab" [ngClass]="{'active' : selected_tab === 'recomended'}"> Recommended </button>
@@ -20,6 +20,7 @@
         <h5> 15 MALLS </h5>
         <ion-button color="default" fill="clear"> SORT / FILTER </ion-button>
     </div>
+
     <ion-list lines="none" class="malls-list">
         <ion-item *ngFor="let mall of malls">
             <img src="{{ mall.image_url }}" slot="start">
@@ -55,6 +56,8 @@
         </ion-item>
     </ion-list>
 
+    <!-- Ad in between results -->
+
     <section class="advertisement">
         <div class="heading-holder">
             <img src="assets/custom/logo.svg">
@@ -68,6 +71,90 @@
         <a> Know More </a>
     </section>
 
+    <ion-list lines="none" class="malls-list">
+        <ion-item *ngFor="let mall of malls">
+            <img src="{{ mall.image_url }}" slot="start">
+            <ion-label>
+                <h3> {{ mall.name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
+                <p class="description"> {{ mall.description }} </p>
+                <div class="offers-holder">
+                    <div class="offer" *ngFor="let offer of mall.offers_collection">
+                        {{ offer.name }}: <strong> {{ offer.offer.length }}  </strong>
+                    </div>
+                </div>
+                <div class="utilities-holder">
+                    <div class="container">
+                        <div class="utility">
+                            <ion-icon name="star"></ion-icon> {{ mall.rating }}
+                        </div>
+                        <div class="utility">
+                            <ion-icon name="pin"></ion-icon> {{ mall.distance }} km
+                        </div>
+                    </div>
+
+                    <div class="container">
+                        <button class="utility-button">
+                            <ion-icon name="share"></ion-icon>
+                        </button>
+                        <a class="utility-button" target="_blank"
+                        href="https://maps.google.com/?q={{ mall.location.latitude }},{{ mall.location.longitude }}">
+                            <ion-icon name="navigate"></ion-icon>
+                        </a>
+                    </div>
+                </div>
+            </ion-label>
+        </ion-item>
+    </ion-list>
+
+    <div class="results-utilities-holder no-padding">
+        <h5> Food Types </h5>
+        <ion-button color="default" fill="clear"> SEE ALL </ion-button>
+    </div>
+
+    <div class="food-types-holder">
+        <button> <ion-icon src="assets/custom/food-3.svg"></ion-icon> <span> Breakfast </span> </button>
+        <button> <ion-icon src="assets/custom/food-1.svg"></ion-icon> <span> Pizza </span> </button>
+        <button> <ion-icon src="assets/custom/food-2.svg"></ion-icon> <span> Doughnuts </span> </button>
+        <button> <ion-icon src="assets/custom/food-4.svg"></ion-icon> <span> Cake </span> </button>
+    </div>
+
+    <ion-list lines="none" class="malls-list">
+        <ion-item *ngFor="let mall of malls">
+            <img src="{{ mall.image_url }}" slot="start">
+            <ion-label>
+                <h3> {{ mall.name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
+                <p class="description"> {{ mall.description }} </p>
+                <div class="offers-holder">
+                    <div class="offer" *ngFor="let offer of mall.offers_collection">
+                        {{ offer.name }}: <strong> {{ offer.offer.length }}  </strong>
+                    </div>
+                </div>
+                <div class="utilities-holder">
+                    <div class="container">
+                        <div class="utility">
+                            <ion-icon name="star"></ion-icon> {{ mall.rating }}
+                        </div>
+                        <div class="utility">
+                            <ion-icon name="pin"></ion-icon> {{ mall.distance }} km
+                        </div>
+                    </div>
+
+                    <div class="container">
+                        <button class="utility-button">
+                            <ion-icon name="share"></ion-icon>
+                        </button>
+                        <a class="utility-button" target="_blank"
+                        href="https://maps.google.com/?q={{ mall.location.latitude }},{{ mall.location.longitude }}">
+                            <ion-icon name="navigate"></ion-icon>
+                        </a>
+                    </div>
+                </div>
+            </ion-label>
+        </ion-item>
+    </ion-list>
+
+    <!-- Humburger Menu Starts from here -->
+
     <div class="menu-icon-holder" (click)="show_menu = true" [ngClass]="{'inactive' : show_menu }">
         <ion-icon name="menu"></ion-icon>
     </div>

src/app/malls/malls.page.scss

@@ -3,6 +3,7 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left top;
+    padding-top: 80px;
 }
 
 .header-bar {
@@ -11,6 +12,15 @@
     justify-content: space-between;
     padding: 20px;
     align-items: center;
+    background-image: url('../../assets/custom/background-2.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    width: 100%;
 
     h2 {
         font-size: 20px;
@@ -60,6 +70,10 @@
     align-items: center;
     font-weight: bold;
 
+    &.no-padding {
+        margin: 0 auto;
+    }
+
     h5 {
         margin: 0 0 0 10px;
         color: var(--brand-grey);
@@ -163,6 +177,7 @@
     color: white;
     padding: 15px;
     width: 100%;
+    margin-bottom: 20px;
 
     .heading-holder {
         display: flex;
@@ -220,6 +235,7 @@
     z-index: 1;
     transition: transform 0.5s;
     transform: translateY(0);
+    opacity: 0.8;
 
     &.inactive {
         transform: translateY(100px);
@@ -242,9 +258,9 @@
     z-index: 2;
     bottom: -60px;
     padding-top: 10px;
-    transition: transform 0.5s;
+    transition: transform 0.3s;
     transform: scale(0);
-    transition-delay: 1s;
+    transition-delay: 0.7s;
 
     &.active {
         transform: scale(1);
@@ -326,3 +342,32 @@
         opacity: 0.5;
     }
 }
+
+
+.food-types-holder{
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 10px;
+
+    button {
+        background-color: transparent;
+        border: 0;
+
+        ion-icon {
+            background-color: white;
+            border-radius: 50%;
+            box-shadow: 0px 0px 5px var(--brand-grey);
+            padding: 10px;
+            font-size: 35px;
+        }
+
+        span {
+            display: block;
+            font-size: 10px;
+            color: var(--brand-grey);
+            margin-top: 10px;
+            letter-spacing: 0.5px;
+        }
+    }
+}