Changed design of bike list page

src/app/home/home.page.html

@@ -22,42 +22,51 @@
 </ion-content>
 
 <ion-footer>
-
-  <div class="bike-list-container" *ngIf="!isDetailsVisible">
-
-    <div class="bike-container" *ngFor="let bike of bikes">
-      <div class="inner" (click)="showBikeDetails(bike)">
-        <div class="bike-name">
-          {{bike.name}}
-        </div>
-        <div class="battery-info">
-          <div>
-            <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
+  <div class="bike-list-wrapper" *ngIf="!isDetailsVisible">
+    <div class="nearby-bikes">Nearby Bikes</div>
+    <div class="bike-list-container">
+      <div class="bike-container" *ngFor="let bike of bikes">
+        <div class="inner" (click)="showBikeDetails(bike)">
+          <div class="bike-icon">
+            <ion-icon name="bicycle"></ion-icon>
+          </div>
+          <ion-grid class="distance-data">
+            <ion-row>
+              <ion-col size="1"><ion-icon name="walk"></ion-icon></ion-col>
+              <ion-col>{{bike.distance + " km"}}</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col size="1"><ion-icon name="pin"></ion-icon></ion-col>
+              <ion-col>{{bike.address + " " + (bike.HouseNumber || "")}}</ion-col>
+            </ion-row>
+          </ion-grid>
+          <div class="battery-info1">
+              <div><ion-icon name="battery-full"></ion-icon></div>
+              <div class="battery-level">{{bike.batteryPercentage}}%</div>
           </div>
-          <div>{{bike.batteryPercentage + " %"}}</div>
-        </div>
-        <div class="address-info">
-          <div class="disance">{{bike.distance + " km"}}</div>
-          <div class="address">{{bike.address+" "+bike.HouseNumber+ ", " +bike.PostalCode}}</div>
-
         </div>
       </div>
+      <!-- <div class="bike-container" *ngFor="let bike of bikes">
+        <div class="inner" (click)="showBikeDetails(bike)">
+          <div class="bike-name">
+            {{bike.name}}
+          </div>
+          <div class="battery-info">
+            <div>
+              <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
+            </div>
+            <div>{{bike.batteryPercentage + " %"}}</div>
+          </div>
+          <div class="address-info">
+            <div class="disance">{{bike.distance + " km"}}</div>
+            <div class="address">{{bike.address+" "+bike.HouseNumber+ ", " +bike.PostalCode}}</div>
+          </div>
+        </div>
+      </div> -->
     </div>
   </div>
-
   <div class="bike-details-container" *ngIf="isDetailsVisible">
     <div class="inner">
-
-      <!--  <div class="battery-info">
-        <div>
-          <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
-        </div>
-        <div>{{selectedBike.batteryPercentage + " %"}}</div>
-      </div>
-      <div class="address-info">
-        <div class="disance">{{selectedBike.distance + "m"}}</div>
-        <div class="address">{{selectedBike.address}}</div>
-      </div> -->
       <div class="button-container">
         <ion-grid>
           <ion-row>
@@ -73,7 +82,6 @@
               Battery Level
             </ion-col>
             <ion-col>
-
               <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
               {{selectedBike.batteryPercentage + " %"}}
             </ion-col>
@@ -102,11 +110,8 @@
               <ion-button size="medium" expand="block" (click)="navigatetoBike()">Navigate</ion-button>
             </ion-col>
           </ion-row>
-         
         </ion-grid>
-
       </div>
     </div>
-
   </div>
 </ion-footer>
\ No newline at end of file

src/app/home/home.page.scss

@@ -4,8 +4,66 @@
 }
 
 ion-footer{
-  overflow-y: auto;
-  padding-top: 30px;
+  max-height: 50%;
+  .bike-list-container{
+    overflow-y: auto;
+  }
+  
+  .nearby-bikes{
+    padding: 8px;
+    font-weight: 500;
+    border-bottom: 1px solid #ddd;
+    background-color: #34a080;
+    text-align: center;
+    color: #fff;
+  }
+
+  .bike-list-container{
+    padding: 8px;
+
+    .bike-container{
+      margin-bottom: 10px;
+      box-shadow: 0px 0px 3px 0px rgba(15, 22, 33, 0.3);
+      background-color: #f5f5f5;
+
+      .inner {
+        width: inherit;
+        position: relative;
+
+        .distance-data{
+          padding-right: 70px;
+          padding-left: 60px;
+          font-size: 14px;
+
+          ion-icon{
+            font-size: 18px;
+          }
+        }
+
+        .bike-icon{
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: 60px;
+          line-height: 78px;
+          font-size: 48px;
+          text-align: center;
+        }
+
+        .battery-info1{
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          line-height: 70px;
+          text-align: center;
+          width: 70px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
 }
 
 .bike-list-container{
@@ -22,9 +80,8 @@ ion-footer{
 }
 
 .bike-container{
-  height: 60px;
+  height: 70px;
   width: 100%;
-  border: 1px solid #aaaaaa;
   border-radius: 5px;
   box-sizing: border-box;
   float: left;

src/assets/images/bike_icon.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M330.666 131.202c18.668 0 33.598-14.935 33.598-33.601S349.334 64 330.666 64C312 64 297.07 78.935 297.07 97.601s14.93 33.601 33.596 33.601zm56 130.132c-51.332 0-93.332 42-93.332 93.333s42 93.333 93.332 93.333C438 448 480 406 480 354.667s-42-93.333-93.334-93.333zm0 158.666c-36.402 0-65.332-28.93-65.332-65.333s28.93-65.333 65.332-65.333c36.404 0 65.334 28.93 65.334 65.333S423.07 420 386.666 420zm-81.069-196H384v-32h-58.845l-34.62-60.134c-5.605-9.333-15.869-15.864-27.07-15.864-8.399 0-16.798 3.732-22.399 9.333L169.334 194.4c-5.601 5.601-9.333 14-9.333 22.399 0 12.131 9.202 21.465 18.535 27.065L240 282.134V368h32V256l-39.333-32 42.929-44.533L305.597 224zm-180.264 37.334C74 261.334 32 303.334 32 354.667S74 448 125.333 448s93.333-42 93.333-93.333-41.999-93.333-93.333-93.333zm0 158.666C88.934 420 60 391.07 60 354.667s28.934-65.333 65.333-65.333 65.333 28.93 65.333 65.333S161.732 420 125.333 420z"/></svg>
\ No newline at end of file