Skip to content

Commit 2d92d48

Browse files
gultyayevgultyayev
committed
chore: update layout
1 parent e6007cd commit 2d92d48

File tree

5 files changed

+109
-116
lines changed

5 files changed

+109
-116
lines changed

‎src/app/admin/orders/orders.component.html

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
1-
<div class="container py-3 py-md-5">
2-
<h1>Manage orders</h1>
1+
<h1>Manage orders</h1>
32

4-
<table class="w-100" [dataSource]="orders$" mat-table>
5-
<ng-container matColumnDef="from">
6-
<th mat-header-cell *matHeaderCellDef>From</th>
7-
<td mat-cell *matCellDef="let order">
8-
{{ order.address.firstName }} {{ order.address.firstName }}
9-
</td>
10-
</ng-container>
11-
<ng-container matColumnDef="count">
12-
<th mat-header-cell *matHeaderCellDef>Count</th>
13-
<td mat-cell *matCellDef="let order">{{ order.items.length }}</td>
14-
</ng-container>
15-
<ng-container matColumnDef="address">
16-
<th mat-header-cell *matHeaderCellDef>Address</th>
17-
<td mat-cell *matCellDef="let order">{{ order.address.address }}</td>
18-
</ng-container>
19-
<ng-container matColumnDef="status">
20-
<th mat-header-cell *matHeaderCellDef>Status</th>
21-
<td mat-cell *matCellDef="let order">{{ order.items.length }}</td>
22-
</ng-container>
23-
<ng-container matColumnDef="action">
24-
<th mat-header-cell *matHeaderCellDef>Action</th>
25-
<td mat-cell *matCellDef="let order">{{ order.items.length }}</td>
26-
</ng-container>
3+
<table class="w-100" [dataSource]="orders$" mat-table>
4+
<ng-container matColumnDef="from">
5+
<th mat-header-cell *matHeaderCellDef>From</th>
6+
<td mat-cell *matCellDef="let order">
7+
{{ order.address.firstName }} {{ order.address.firstName }}
8+
</td>
9+
</ng-container>
10+
<ng-container matColumnDef="count">
11+
<th mat-header-cell *matHeaderCellDef>Count</th>
12+
<td mat-cell *matCellDef="let order">{{ order.items.length }}</td>
13+
</ng-container>
14+
<ng-container matColumnDef="address">
15+
<th mat-header-cell *matHeaderCellDef>Address</th>
16+
<td mat-cell *matCellDef="let order">{{ order.address.address }}</td>
17+
</ng-container>
18+
<ng-container matColumnDef="status">
19+
<th mat-header-cell *matHeaderCellDef>Status</th>
20+
<td mat-cell *matCellDef="let order">{{ order.items.length }}</td>
21+
</ng-container>
22+
<ng-container matColumnDef="action">
23+
<th mat-header-cell *matHeaderCellDef>Action</th>
24+
<td mat-cell *matCellDef="let order">{{ order.items.length }}</td>
25+
</ng-container>
2726

28-
<tr mat-header-row *matHeaderRowDef="columns"></tr>
29-
<tr mat-row *matRowDef="let row; columns: columns"></tr>
30-
</table>
31-
</div>
27+
<tr mat-header-row *matHeaderRowDef="columns"></tr>
28+
<tr mat-row *matRowDef="let row; columns: columns"></tr>
29+
</table>

‎src/app/app.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
<app-header></app-header>
22

3-
<router-outlet></router-outlet>
3+
<div class="container py-3 py-md-5">
4+
<router-outlet></router-outlet>
5+
</div>

‎src/app/cart/cart.component.html

Lines changed: 77 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -4,59 +4,33 @@
44
totalPrice: totalPrice$ | async,
55
cartEmpty: cartEmpty$ | async
66
} as state"
7-
class="container"
7+
class="row"
88
>
9-
<div class="row">
10-
<div class="col mx-auto py-3 py-md-5">
11-
<mat-card>
12-
<h1 class="text-center pt-4" mat-card-title>Checkout</h1>
9+
<div class="col mx-auto">
10+
<mat-card>
11+
<h1 class="text-center pt-4" mat-card-title>Checkout</h1>
1312

14-
<mat-card-content>
15-
<mat-vertical-stepper #stepper [linear]="true">
16-
<!-- Review your cart STEP -->
17-
<mat-step label="Review your cart" [completed]="state.cartEmpty">
18-
<ng-container *ngIf="state.cartEmpty; else emptyCartTemplate">
19-
<app-order-summary
20-
*ngIf="state.products; else loaderTemplate"
21-
(add)="add($event)"
22-
(remove)="remove($event)"
23-
[products]="state.products"
24-
[totalPrice]="state.totalPrice!"
25-
[showControls]="true"
26-
></app-order-summary>
27-
28-
<ng-template #loaderTemplate>
29-
<div class="py-5">
30-
<mat-spinner [diameter]="40" class="mx-auto"></mat-spinner>
31-
</div>
32-
</ng-template>
13+
<mat-card-content>
14+
<mat-vertical-stepper #stepper [linear]="true">
15+
<!-- Review your cart STEP -->
16+
<mat-step label="Review your cart" [completed]="state.cartEmpty">
17+
<ng-container *ngIf="state.cartEmpty; else emptyCartTemplate">
18+
<app-order-summary
19+
*ngIf="state.products; else loaderTemplate"
20+
(add)="add($event)"
21+
(remove)="remove($event)"
22+
[products]="state.products"
23+
[totalPrice]="state.totalPrice!"
24+
[showControls]="true"
25+
></app-order-summary>
3326

34-
<div class="text-right">
35-
<button
36-
color="primary"
37-
class="text-uppercase"
38-
mat-flat-button
39-
matStepperNext
40-
>
41-
next
42-
</button>
27+
<ng-template #loaderTemplate>
28+
<div class="py-5">
29+
<mat-spinner [diameter]="40" class="mx-auto"></mat-spinner>
4330
</div>
44-
</ng-container>
45-
</mat-step>
46-
47-
<!-- Shipping address STEP -->
48-
<mat-step label="Shipping address" [stepControl]="shippingInfo">
49-
<h2>Shipping address</h2>
50-
51-
<app-cart-shipping-form
52-
(nextStep)="stepper.next()"
53-
[shippingInfo]="shippingInfo"
54-
></app-cart-shipping-form>
31+
</ng-template>
5532

5633
<div class="text-right">
57-
<button class="text-uppercase" mat-button matStepperPrevious>
58-
back
59-
</button>
6034
<button
6135
color="primary"
6236
class="text-uppercase"
@@ -66,42 +40,66 @@ <h2>Shipping address</h2>
6640
next
6741
</button>
6842
</div>
69-
</mat-step>
43+
</ng-container>
44+
</mat-step>
7045

71-
<!-- Review your order STEP -->
72-
<mat-step label="Review your order">
73-
<app-order-summary
74-
*ngIf="state.products"
75-
[products]="state.products"
76-
[totalPrice]="state.totalPrice!"
77-
[showControls]="false"
78-
></app-order-summary>
46+
<!-- Shipping address STEP -->
47+
<mat-step label="Shipping address" [stepControl]="shippingInfo">
48+
<h2>Shipping address</h2>
7949

80-
<div class="row">
81-
<div class="col col-md-6">
82-
<h2>Shipping</h2>
83-
<p>{{ fullName }}</p>
84-
<p>{{ address }}</p>
85-
</div>
86-
<div class="col col-md-6">
87-
<h2>Comment</h2>
88-
<p>{{ comment }}</p>
89-
</div>
90-
</div>
50+
<app-cart-shipping-form
51+
(nextStep)="stepper.next()"
52+
[shippingInfo]="shippingInfo"
53+
></app-cart-shipping-form>
9154

92-
<div class="text-right">
93-
<button class="text-uppercase" mat-button matStepperPrevious>
94-
back
95-
</button>
96-
<button color="primary" class="text-uppercase" mat-flat-button>
97-
place order
98-
</button>
55+
<div class="text-right">
56+
<button class="text-uppercase" mat-button matStepperPrevious>
57+
back
58+
</button>
59+
<button
60+
color="primary"
61+
class="text-uppercase"
62+
mat-flat-button
63+
matStepperNext
64+
>
65+
next
66+
</button>
67+
</div>
68+
</mat-step>
69+
70+
<!-- Review your order STEP -->
71+
<mat-step label="Review your order">
72+
<app-order-summary
73+
*ngIf="state.products"
74+
[products]="state.products"
75+
[totalPrice]="state.totalPrice!"
76+
[showControls]="false"
77+
></app-order-summary>
78+
79+
<div class="row">
80+
<div class="col col-md-6">
81+
<h2>Shipping</h2>
82+
<p>{{ fullName }}</p>
83+
<p>{{ address }}</p>
9984
</div>
100-
</mat-step>
101-
</mat-vertical-stepper>
102-
</mat-card-content>
103-
</mat-card>
104-
</div>
85+
<div class="col col-md-6">
86+
<h2>Comment</h2>
87+
<p>{{ comment }}</p>
88+
</div>
89+
</div>
90+
91+
<div class="text-right">
92+
<button class="text-uppercase" mat-button matStepperPrevious>
93+
back
94+
</button>
95+
<button color="primary" class="text-uppercase" mat-flat-button>
96+
place order
97+
</button>
98+
</div>
99+
</mat-step>
100+
</mat-vertical-stepper>
101+
</mat-card-content>
102+
</mat-card>
105103
</div>
106104
</div>
107105

‎src/app/products/product-item/product-item.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.img-container {
2-
padding-top: 50%;
2+
padding-top: 90%;
33
position: relative;
44

55
&__inner {

‎src/app/products/products.component.scss

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,16 @@
33
@import "~bootstrap/scss/mixins/breakpoints";
44

55
.container {
6-
--gap: 10px;
7-
86
display: grid;
97
grid-template-columns: 1fr;
108

11-
grid-gap: var(--gap);
12-
padding: var(--gap);
9+
grid-gap: 30px;
1310

1411
@include media-breakpoint-up(md) {
1512
grid-template-columns: 1fr 1fr;
16-
--gap: 20px;
1713
}
1814

1915
@include media-breakpoint-up(lg) {
2016
grid-template-columns: 1fr 1fr 1fr;
21-
--gap: 30px;
2217
}
2318
}

0 commit comments

Comments
 (0)