diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 5ca1ddd45a32556136deeeb423e7e8aacae1bec7..53cd5d8a9b1d9acf94919348f062b3c2bfd54475 100644
--- a/src/app/home/home.page.html
+++ b/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
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index 3762aeac0023826c387752b91cd3198788750df1..1761a14ba1dc20ca08026ca46a9aaf7c28e49a99 100644
--- a/src/app/home/home.page.scss
+++ b/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;
diff --git a/src/assets/images/bike_icon.svg b/src/assets/images/bike_icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..21187807ec53df74aad8e29ed409c25bcceee148
--- /dev/null
+++ b/src/assets/images/bike_icon.svg
@@ -0,0 +1 @@
+<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