From c2ee185b2b421286371b7d0f3476f7af7c95f84b Mon Sep 17 00:00:00 2001 From: alpermulayim Date: Sun, 10 Sep 2023 01:34:25 +0300 Subject: [PATCH] UI building card section implemented --- leasesoft-ui/src/app/app.component.html | 2 + leasesoft-ui/src/app/app.component.scss | 4 +- .../building-card.component.html | 14 +++--- .../building-card.component.scss | 3 +- .../building-card/building-card.component.ts | 5 +- .../buildings-section.component.html | 9 ++-- .../buildings-section.component.scss | 13 +++++ .../buildings-section.component.ts | 48 +++++++++++++++++++ .../src/app/footer/footer.component.scss | 5 +- leasesoft-ui/src/app/modals/building.ts | 11 +++++ 10 files changed, 97 insertions(+), 17 deletions(-) create mode 100644 leasesoft-ui/src/app/modals/building.ts diff --git a/leasesoft-ui/src/app/app.component.html b/leasesoft-ui/src/app/app.component.html index 98c52bb..c37179e 100644 --- a/leasesoft-ui/src/app/app.component.html +++ b/leasesoft-ui/src/app/app.component.html @@ -1,7 +1,9 @@
+
+
diff --git a/leasesoft-ui/src/app/app.component.scss b/leasesoft-ui/src/app/app.component.scss index 5fd1d0c..0c98860 100644 --- a/leasesoft-ui/src/app/app.component.scss +++ b/leasesoft-ui/src/app/app.component.scss @@ -1,4 +1,6 @@ .app-root{ margin: 15px; - + .app-page-section{ + min-height: 70vh; + } } \ No newline at end of file diff --git a/leasesoft-ui/src/app/building-card/building-card.component.html b/leasesoft-ui/src/app/building-card/building-card.component.html index 85b214d..f33e7e7 100644 --- a/leasesoft-ui/src/app/building-card/building-card.component.html +++ b/leasesoft-ui/src/app/building-card/building-card.component.html @@ -3,18 +3,18 @@
- 2500 $ / Mo + {{building.priceUnit}}{{building.price}} / {{building.listingType}}
- Comfort Apart + {{building.name}}
-
West Street 1/1
+
{{building.address}}
-
3 Beds
-
2 Baths
-
1 Park
+
{{building.beds}} Beds
+
{{building.baths}} Baths
+
{{building.carSpaces}} Park
- 120 sq + {{building.size}} sq
diff --git a/leasesoft-ui/src/app/building-card/building-card.component.scss b/leasesoft-ui/src/app/building-card/building-card.component.scss index ca7ea48..4ef202d 100644 --- a/leasesoft-ui/src/app/building-card/building-card.component.scss +++ b/leasesoft-ui/src/app/building-card/building-card.component.scss @@ -7,7 +7,6 @@ flex-direction: column; justify-content: center; align-items: center; - padding: 20px; .building-card-container { display: flex; @@ -17,7 +16,7 @@ background-color: #F5F1EF; border-radius: 5px; flex-direction: column; - padding: 10px; + padding: 20px; .img-container { flex: 4; diff --git a/leasesoft-ui/src/app/building-card/building-card.component.ts b/leasesoft-ui/src/app/building-card/building-card.component.ts index 2a0c558..affee5b 100644 --- a/leasesoft-ui/src/app/building-card/building-card.component.ts +++ b/leasesoft-ui/src/app/building-card/building-card.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import { Building } from '../modals/building'; @Component({ selector: 'app-building-card', @@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core'; }) export class BuildingCardComponent implements OnInit { + @Input() + public building: Building; constructor() { } ngOnInit() { diff --git a/leasesoft-ui/src/app/buildings-section/buildings-section.component.html b/leasesoft-ui/src/app/buildings-section/buildings-section.component.html index 633b467..dfaca04 100644 --- a/leasesoft-ui/src/app/buildings-section/buildings-section.component.html +++ b/leasesoft-ui/src/app/buildings-section/buildings-section.component.html @@ -1,4 +1,5 @@ -

- buildings-section works! -

- \ No newline at end of file +
+
+ +
- +
\ No newline at end of file diff --git a/leasesoft-ui/src/app/buildings-section/buildings-section.component.scss b/leasesoft-ui/src/app/buildings-section/buildings-section.component.scss index e69de29..709156a 100644 --- a/leasesoft-ui/src/app/buildings-section/buildings-section.component.scss +++ b/leasesoft-ui/src/app/buildings-section/buildings-section.component.scss @@ -0,0 +1,13 @@ +.building-section{ + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + width: 100vw; + height: 100%; + .building-card{ + flex: 1; + display: flex; + margin: 10px; + } +} \ No newline at end of file diff --git a/leasesoft-ui/src/app/buildings-section/buildings-section.component.ts b/leasesoft-ui/src/app/buildings-section/buildings-section.component.ts index 6a42e14..be8dc33 100644 --- a/leasesoft-ui/src/app/buildings-section/buildings-section.component.ts +++ b/leasesoft-ui/src/app/buildings-section/buildings-section.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Building } from '../modals/building'; @Component({ selector: 'app-buildings-section', @@ -7,6 +8,53 @@ import { Component, OnInit } from '@angular/core'; }) export class BuildingsSectionComponent implements OnInit { + + public buildingList: Building[]= [ + { + name: "Comfort Apt", + price: 2500, + address: "West Street", + beds:3, + baths:2, + carSpaces:1, + size:125, + listingType: 'Mo', + priceUnit: '$' + }, + { + name: "Comfort Apt", + price: 2500, + address: "West Street", + beds:3, + baths:2, + carSpaces:1, + size:125, + listingType: 'Mo', + priceUnit: '$' + }, + { + name: "Comfort Apt", + price: 2500, + address: "West Street", + beds:3, + baths:2, + carSpaces:1, + size:125, + listingType: 'Mo', + priceUnit: '$' + }, + { + name: "Comfort Apt", + price: 2500, + address: "West Street", + beds:3, + baths:2, + carSpaces:1, + size:125, + listingType: 'Mo', + priceUnit: '$' + } + ] constructor() { } ngOnInit() { diff --git a/leasesoft-ui/src/app/footer/footer.component.scss b/leasesoft-ui/src/app/footer/footer.component.scss index be59d46..abffffc 100644 --- a/leasesoft-ui/src/app/footer/footer.component.scss +++ b/leasesoft-ui/src/app/footer/footer.component.scss @@ -7,8 +7,9 @@ border-radius: 5px; margin-top: 40px; border-top: 2px solid #E4E4E4; + flex-wrap: wrap; .footer-logo{ - padding: 40px; + padding-top: 20px; justify-content: center; align-items: center; flex:2; @@ -19,7 +20,7 @@ } } .footer-message{ - padding: 40px; + padding: 20px; flex:3; display: flex; flex-direction: column; diff --git a/leasesoft-ui/src/app/modals/building.ts b/leasesoft-ui/src/app/modals/building.ts new file mode 100644 index 0000000..ae24273 --- /dev/null +++ b/leasesoft-ui/src/app/modals/building.ts @@ -0,0 +1,11 @@ +export interface Building { + name: string; + price: number; + address: string; + beds: number; + baths: number; + carSpaces: number; + size: number; + listingType: string; + priceUnit:string; +}