Skip to content
GitLab
Commit e9a5d32d authored by Ratnadeep Rajendra Kharade's avatar Ratnadeep Rajendra Kharade
Browse files

Changed design of bike list page

parent 1270866c
Hide whitespace changes
Inline Side-by-side
Showing
with 100 additions and 37 deletions
+100 -37
src/app/home/home.page.html
+ 38
- 33
View file @ e9a5d32d
......@@ -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
+ 61
- 4
View file @ e9a5d32d
......@@ -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 0 → 100644
+ 1
- 0
View file @ e9a5d32d
<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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal