Skip to content
This repository was archived by the owner on Nov 17, 2023. It is now read-only.

Commit ad76fa0

Browse files
author
Ramón Tomás
committed
Fixed broken UI in SPA after migrating to Bootstrap 4
1 parent dc767eb commit ad76fa0

File tree

15 files changed

+783
-91
lines changed

15 files changed

+783
-91
lines changed

‎src/Web/WebSPA/Client/modules/app.component.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
<header class="navbar navbar-light navbar-static-top">
1+
<header class="esh-app-header">
22
<div class="container">
33
<article class="row">
4-
5-
<section class="col-lg-7 col-md-6 col-xs-12">
4+
<section class="col-lg-7 col-md-6 col-12">
65
<a class="navbar-brand" routerLink="catalog">
76
<img src="assets/images/brand.png" />
87
</a>
98
</section>
109

11-
<section class="col-lg-4 col-md-5 col-xs-12">
10+
<section class="col-lg-4 col-md-5 col-12">
1211
<esh-identity></esh-identity>
1312
</section>
1413

15-
<section class="col-lg-1 col-xs-12">
14+
<section class="col-lg-1 col-12">
1615
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
1716
</section>
1817

@@ -32,7 +31,7 @@
3231
</section>
3332

3433
<section class="col-sm-6">
35-
<img class="esh-app-footer-text hidden-xs" src="assets/images/main_footer_text.png" width="335" height="26" alt="footer text image" />
34+
<img class="esh-app-footer-text hidden" src="assets/images/main_footer_text.png" width="335" height="26" alt="footer text image" />
3635
</section>
3736

3837
</article>

‎src/Web/WebSPA/Client/modules/app.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,17 @@
1111
padding-bottom: $padding;
1212
padding-top: $padding;
1313
width: 100%;
14+
bottom: 0;
1415

1516
$height: 50px;
1617

1718
&-brand {
1819
height: $height;
1920
width: 230px;
2021
}
22+
}
2123

24+
&-header {
25+
margin: 15px;
2226
}
2327
}

‎src/Web/WebSPA/Client/modules/basket/basket.component.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
</div>
1010

1111
<article class="esh-basket-titles row">
12-
<section class="esh-basket-title col-xs-3">Product</section>
13-
<section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
14-
<section class="esh-basket-title col-xs-2">Price</section>
15-
<section class="esh-basket-title col-xs-2">Quantity</section>
16-
<section class="esh-basket-title col-xs-2">Cost</section>
12+
<section class="esh-basket-title col-3">Product</section>
13+
<section class="esh-basket-title col-3 hidden-lg-down"></section>
14+
<section class="esh-basket-title col-2">Price</section>
15+
<section class="esh-basket-title col-2">Quantity</section>
16+
<section class="esh-basket-title col-2">Cost</section>
1717
</article>
1818

1919
<div *ngFor="let item of basket?.items" class="esh-basket-items--border">
@@ -22,17 +22,17 @@
2222
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
2323
<img class="esh-basket-image" src="{{item.pictureUrl}}"/>
2424
</section>
25-
<section class="esh-basket-item esh-basket-item--middle col-xs-3">{{item.productName}}</section>
26-
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice | number:'.2-2'}}</section>
27-
<section class="esh-basket-item esh-basket-item--middle col-xs-2">
25+
<section class="esh-basket-item esh-basket-item--middle col-3">{{item.productName}}</section>
26+
<section class="esh-basket-item esh-basket-item--middle col-2">$ {{item.unitPrice | number:'.2-2'}}</section>
27+
<section class="esh-basket-item esh-basket-item--middle col-2">
2828
<input id="quantity"
2929
class="esh-basket-input"
3030
type="number"
3131
min="1"
3232
[(ngModel)]="item.quantity"
3333
(change)="itemQuantityChanged(item)"/>
3434
</section>
35-
<section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
35+
<section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
3636
</article>
3737
<br/>
3838
<div class="esh-basket-items-margin-left1 row">
@@ -43,21 +43,21 @@
4343

4444
<div class="container">
4545
<article class="esh-basket-titles esh-basket-titles--clean row">
46-
<section class="esh-basket-title col-xs-9"></section>
47-
<section class="esh-basket-title col-xs-2">Total</section>
46+
<section class="esh-basket-title col-9"></section>
47+
<section class="esh-basket-title col-2">Total</section>
4848
</article>
4949

5050
<article class="esh-basket-items row">
51-
<section class="esh-basket-item col-xs-9"></section>
52-
<section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice | number:'.2-2'}}</section>
51+
<section class="esh-basket-item col-9"></section>
52+
<section class="esh-basket-item esh-basket-item--mark col-2">$ {{totalPrice | number:'.2-2'}}</section>
5353
</article>
5454

5555
<article class="esh-basket-items row">
56-
<section class="esh-basket-item col-xs-7"></section>
57-
<section class="esh-basket-item col-xs-2">
56+
<section class="esh-basket-item col-7"></section>
57+
<section class="esh-basket-item col-2">
5858
<button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
5959
</section>
60-
<section class="esh-basket-item col-xs-3">
60+
<section class="esh-basket-item col-3">
6161
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
6262
</section>
6363
</article>

‎src/Web/WebSPA/Client/modules/campaigns/campaigns-detail/campaigns-detail.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<div class="esh-campaign_detail">
44
<div class="card esh-campaigns-items">
55
<img class="card-img-top" src="{{campaign.pictureUri}}" alt="{{campaign.name}}">
6-
<div class="card-block">
6+
<div class="card-body">
77
<h4 class="card-title">{{campaign.name}}</h4>
8-
<p class="card-text">{{campaign.description}}</p>
9-
<p class="card-text">
10-
<small class="text-muted">
11-
From {{campaign.from | date}} Until {{campaign.to | date}}
12-
</small>
13-
</p>
8+
<p class="card-text">{{campaign.description}}</p>
9+
</div>
10+
<div class="card-footer">
11+
<small class="text-muted">
12+
From {{campaign.from | date}} Until {{campaign.to | date}}
13+
</small>
1414
</div>
1515
</div>
1616
</div>

‎src/Web/WebSPA/Client/modules/campaigns/campaigns.component.html‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
11
<esh-header url="/catalog">Back to catalog</esh-header>
2+
<br />
3+
24
<div class="container">
35
<div class="alert alert-warning esh-campaign-alert" role="alert" [hidden]="!errorReceived">
46
Error requesting campaigns list, please try later on
57
</div>
68
<div *ngIf="campaigns?.data?.length > 0">
7-
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
9+
810
<div class="card-group esh-campaign-items row">
911
<div class="esh-campaign-item col-md-4"
1012
*ngFor="let item of campaigns.data">
1113

12-
<div class="card-block">
13-
<h4 class="card-title esh-campaign-name">{{item.name}}</h4>
14+
<div class="card">
1415
<img class="card-img-top esh-campaign-thumbnail" src="{{item.pictureUri}}" alt="{{item.name}}">
15-
<button *ngIf="isCampaignDetailFunctionEnabled; else showDefaultDetailsLink" [ngClass]="{'esh-campaigns-button': true}" (click)="onNavigateToDetails(item.detailsUri)">More details</button>
16-
<ng-template #showDefaultDetailsLink>
17-
<input [ngClass]="{'esh-campaign-button': true}" type="submit" value="More details" routerLink="/campaigns/{{item.id}}">
18-
</ng-template>
19-
</div>
20-
<div class="card-footer">
21-
<small class="text-muted">
22-
From {{item.from | date }} To {{item.to | date }}
23-
</small>
16+
<div class="card-body">
17+
<h4 class="card-title esh-campaign-name">{{item.name}}</h4>
18+
<button *ngIf="isCampaignDetailFunctionEnabled == true; else showDefaultDetailsLink" [ngClass]="{'esh-campaigns-button': true}" (click)="onNavigateToDetails(item.detailsUri)">More details</button>
19+
<ng-template #showDefaultDetailsLink>
20+
<input [ngClass]="{'esh-campaign-button': true}" type="submit" value="More details" routerLink="/campaigns/{{item.id}}">
21+
</ng-template>
22+
</div>
23+
<div class="card-footer esh-campaigns-card-footer-text">
24+
<small class="text-muted">
25+
From {{item.from | date }} To {{item.to | date }}
26+
</small>
27+
</div>
2428
</div>
29+
2530
</div>
2631
</div>
27-
32+
<br />
2833
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
2934
</div>
35+
<br />
3036
<div *ngIf="campaigns?.data?.length == 0">
3137
<span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span>
3238
</div>
39+
<br />
40+
<br />
3341
</div>
3442

43+

‎src/Web/WebSPA/Client/modules/campaigns/campaigns.component.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,12 @@
6767
margin-top: 10px;
6868
}
6969
}
70+
71+
.esh-campaigns-card {
72+
73+
&-footer-text {
74+
white-space: nowrap;
75+
overflow: hidden;
76+
text-overflow: ellipsis;
77+
}
78+
}

‎src/Web/WebSPA/Client/modules/catalog/catalog.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
position: relative;
1515
top: $banner-height / 3.5;
1616
}
17-
17+
1818
$filter-height: 65px;
1919

2020
&-filters {

‎src/Web/WebSPA/Client/modules/catalog/catalog.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class CatalogService {
1515
private catalogUrl: string = '';
1616
private brandUrl: string = '';
1717
private typesUrl: string = '';
18-
18+
1919
constructor(private service: DataService, private configurationService: ConfigurationService) {
2020
this.configurationService.settingsLoaded$.subscribe(x => {
2121
this.catalogUrl = this.configurationService.serverSettings.purchaseUrl + '/api/v1/c/catalog/items';

‎src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,74 @@
44
<div class="container">
55
<section class="esh-orders_detail-section">
66
<article class="esh-orders_detail-titles row">
7-
<section class="esh-orders_detail-title col-xs-3">Order number</section>
8-
<section class="esh-orders_detail-title col-xs-3">Date</section>
9-
<section class="esh-orders_detail-title col-xs-3">Total</section>
10-
<section class="esh-orders_detail-title col-xs-3">Status</section>
7+
<section class="esh-orders_detail-title col-3">Order number</section>
8+
<section class="esh-orders_detail-title col-3">Date</section>
9+
<section class="esh-orders_detail-title col-3">Total</section>
10+
<section class="esh-orders_detail-title col-3">Status</section>
1111
</article>
1212

1313
<article class="esh-orders_detail-items row">
14-
<section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
15-
<section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
16-
<section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
17-
<section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
14+
<section class="esh-orders_detail-item col-3">{{order.ordernumber}}</section>
15+
<section class="esh-orders_detail-item col-3">{{order.date | date:'short'}}</section>
16+
<section class="esh-orders_detail-item col-3">$ {{order.total}}</section>
17+
<section class="esh-orders_detail-item col-3">{{order.status}}</section>
1818
</article>
1919
</section>
2020

2121
<section class="esh-orders_detail-section">
2222
<article class="esh-orders_detail-titles row">
23-
<section class="esh-orders_detail-title col-xs-12">Description</section>
23+
<section class="esh-orders_detail-title col-12">Description</section>
2424
</article>
2525

2626
<article class="esh-orders_detail-items row">
27-
<section class="esh-orders_detail-item col-xs-12">{{order.description}}</section>
27+
<section class="esh-orders_detail-item col-12">{{order.description}}</section>
2828
</article>
2929
</section>
3030

3131
<section class="esh-orders_detail-section">
3232
<article class="esh-orders_detail-titles row">
33-
<section class="esh-orders_detail-title col-xs-12">Shiping address</section>
33+
<section class="esh-orders_detail-title col-12">Shiping address</section>
3434
</article>
3535

3636
<article class="esh-orders_detail-items row">
37-
<section class="esh-orders_detail-item col-xs-12">{{order.street}}</section>
37+
<section class="esh-orders_detail-item col-12">{{order.street}}</section>
3838
</article>
3939

4040
<article class="esh-orders_detail-items row">
41-
<section class="esh-orders_detail-item col-xs-12">{{order.city}}</section>
41+
<section class="esh-orders_detail-item col-12">{{order.city}}</section>
4242
</article>
4343

4444
<article class="esh-orders_detail-items row">
45-
<section class="esh-orders_detail-item col-xs-12">{{order.country}}</section>
45+
<section class="esh-orders_detail-item col-12">{{order.country}}</section>
4646
</article>
4747
</section>
4848

4949
<section class="esh-orders_detail-section">
5050
<article class="esh-orders_detail-titles row">
51-
<section class="esh-orders_detail-title col-xs-12">Order details</section>
51+
<section class="esh-orders_detail-title col-12">Order details</section>
5252
</article>
5353

5454
<article class="esh-orders_detail-items esh-orders_detail-items--border row"
5555
*ngFor="let item of order.orderitems">
5656
<section class="esh-orders_detail-item col-md-4 hidden-md-down">
5757
<img class="esh-orders_detail-image" src="{{item.pictureurl}}">
5858
</section>
59-
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-4">{{item.productname}}</section>
60-
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">$ {{item.unitprice | number:'.2-2'}}</section>
61-
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">{{item.units}}</section>
62-
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
59+
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-4">{{item.productname}}</section>
60+
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">$ {{item.unitprice | number:'.2-2'}}</section>
61+
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-1">{{item.units}}</section>
62+
<section class="esh-orders_detail-item esh-orders_detail-item--middle col-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
6363
</article>
6464
</section>
6565

6666
<section class="esh-orders_detail-section esh-orders_detail-section--right">
6767
<article class="esh-orders_detail-titles esh-basket-titles--clean row">
68-
<section class="esh-orders_detail-title col-xs-9"></section>
69-
<section class="esh-orders_detail-title col-xs-2">Total</section>
68+
<section class="esh-orders_detail-title col-9"></section>
69+
<section class="esh-orders_detail-title col-2">Total</section>
7070
</article>
7171

7272
<article class="esh-orders_detail-items row">
73-
<section class="esh-orders_detail-item col-xs-9"></section>
74-
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
73+
<section class="esh-orders_detail-item col-9"></section>
74+
<section class="esh-orders_detail-item esh-orders_detail-item--mark col-2">$ {{order.total | number:'.2-2'}}</section>
7575
</article>
7676
</section>
7777
</div>

‎src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,34 +77,34 @@ <h4 class="esh-orders_new-title">Payment method</h4>
7777
</section>
7878
<section class="esh-orders_new-section">
7979
<article class="esh-orders_new-titles row">
80-
<section class="esh-orders_new-title col-xs-12">Order details</section>
80+
<section class="esh-orders_new-title col-12">Order details</section>
8181
</article>
8282

8383
<article class="esh-orders_new-items esh-orders_new-items--border row"
8484
*ngFor="let item of order.orderItems">
8585
<section class="esh-orders_new-item col-md-4 hidden-md-down">
8686
<img class="esh-orders_new-image" src="{{item.pictureurl}}">
8787
</section>
88-
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">{{item.productname}}</section>
89-
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">$ {{item.unitprice | number:'.2-2'}}</section>
90-
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
91-
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
88+
<section class="esh-orders_new-item esh-orders_new-item--middle col-4">{{item.productname}}</section>
89+
<section class="esh-orders_new-item esh-orders_new-item--middle col-1">$ {{item.unitprice | number:'.2-2'}}</section>
90+
<section class="esh-orders_new-item esh-orders_new-item--middle col-1">{{item.units}}</section>
91+
<section class="esh-orders_new-item esh-orders_new-item--middle col-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
9292
</article>
9393
</section>
9494

9595
<section class="esh-orders_new-section esh-orders_new-section--right">
9696
<article class="esh-orders_new-titles row">
97-
<section class="esh-orders_new-title col-xs-9"></section>
98-
<section class="esh-orders_new-title col-xs-2">Total</section>
97+
<section class="esh-orders_new-title col-9"></section>
98+
<section class="esh-orders_new-title col-2">Total</section>
9999
</article>
100100

101101
<article class="esh-orders_new-items row">
102-
<section class="esh-orders_new-item col-xs-9"></section>
103-
<section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
102+
<section class="esh-orders_new-item col-9"></section>
103+
<section class="esh-orders_new-item esh-orders_new-item--mark col-2">$ {{order.total | number:'.2-2'}}</section>
104104
</article>
105105
</section>
106106
<section class="esh-orders_new-section">
107-
<div class="form-group">
107+
<div class="form-group row">
108108
<div class="col-md-9">
109109
</div>
110110
<div class="col-md-2">

0 commit comments

Comments
 (0)