Skip to content

Commit bb0db6b

Browse files
J12934J12934
committed
Simplify deluxe user component and it's layouting
1 parent 595ef78 commit bb0db6b

3 files changed

Lines changed: 89 additions & 188 deletions

File tree

‎frontend/src/app/deluxe-user/deluxe-user.component.html‎

Lines changed: 28 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -4,94 +4,40 @@
44
-->
55

66
<div *ngIf="error" class="heading mat-elevation-z6">
7-
<div style="margin-top:5px;">
8-
<p class="error">{{error}}</p>
9-
</div>
7+
<span class="error">{{error}}</span>
108
</div>
119

1210
<mat-card appearance="outlined" class="mat-elevation-z6 deluxe-membership">
13-
<div class="card-content">
14-
<div class="img-container">
15-
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 720 720" xmlns="http://www.w3.org/2000/svg">
16-
<image href="assets/public/images/deluxe/blankBoxes.png" x="0" y="0" height="720" width="720" />
17-
<image [attr.href]="logoSrc" x="260" y="130" height="50" />
18-
<image [attr.href]="logoSrc" x="230" y="330" height="70" />
19-
<image [attr.href]="logoSrc" x="70" y="355" height="40" />
20-
<image [attr.href]="logoSrc" x="120" y="450" height="55" />
21-
<image [attr.href]="logoSrc" x="500" y="410" height="45" />
22-
</svg>
23-
</div>
24-
<div class="card-text">
25-
<div class="item-name">
26-
<b translate>LABEL_DELUXE_MEMBERSHIP</b>
27-
</div>
28-
<div class="item-description">
29-
<span translate [translateParams]="{appname: applicationName}">DESCRIPTION_DELUXE_MEMBERSHIP</span>
30-
</div>
31-
<div *ngIf="!error">
32-
<div class="item-description">
33-
{{ membershipCost }}&curren;
34-
</div>
35-
<div class="item-description">
36-
<button (click)="upgradeToDeluxe()" aria-label="Add to Basket" class="btn-member" color="primary" mat-button
37-
mat-raised-button>
38-
<span translate>LABEL_BECOME_MEMBER</span>
39-
</button>
40-
</div>
41-
</div>
42-
</div>
11+
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 720 720" xmlns="http://www.w3.org/2000/svg">
12+
<image href="assets/public/images/deluxe/blankBoxes.png" x="0" y="0" height="720" width="720" />
13+
<image [attr.href]="logoSrc" x="260" y="130" height="50" />
14+
<image [attr.href]="logoSrc" x="230" y="330" height="70" />
15+
<image [attr.href]="logoSrc" x="70" y="355" height="40" />
16+
<image [attr.href]="logoSrc" x="120" y="450" height="55" />
17+
<image [attr.href]="logoSrc" x="500" y="410" height="45" />
18+
</svg>
19+
<div class="card-text">
20+
<strong class="item-name" translate="">LABEL_DELUXE_MEMBERSHIP</strong>
21+
<span translate [translateParams]="{appname: applicationName}">DESCRIPTION_DELUXE_MEMBERSHIP</span>
22+
@if (!error) {
23+
<span>
24+
{{ membershipCost }}&curren;
25+
</span>
26+
<button (click)="upgradeToDeluxe()" aria-label="Become deluxe member" class="btn-become-member" color="primary"
27+
mat-button mat-raised-button>
28+
<span translate>LABEL_BECOME_MEMBER</span>
29+
</button>
30+
}
4331
</div>
4432
</mat-card>
4533
<div class="feature-cards-container">
46-
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
47-
<div class="card-content">
48-
<div class="img-container">
49-
<mat-icon style="transform: scale(3)" class="img-responsive img-thumbnail">
50-
slideshow
51-
</mat-icon>
52-
</div>
53-
<div class="card-text">
54-
<div class="item-name">
55-
<b translate>LABEL_DEALS_OFFERS</b>
56-
</div>
57-
<div class="item-description" translate>
58-
DESCRIPTION_DEALS_OFFERS
59-
</div>
60-
</div>
61-
</div>
62-
</mat-card>
63-
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
64-
<div class="card-content">
65-
<div class="img-container">
66-
<mat-icon style="transform: scale(3)" class="img-responsive img-thumbnail">
67-
directions_car
68-
</mat-icon>
69-
</div>
70-
<div class="card-text">
71-
<div class="item-name">
72-
<b translate>LABEL_FREE_FAST_DELIVERY</b>
73-
</div>
74-
<div class="item-description" translate>
75-
DESCRIPTION_FREE_FAST_DELIVERY
76-
</div>
77-
</div>
78-
</div>
79-
</mat-card>
80-
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
81-
<div class="card-content">
82-
<div class="img-container">
83-
<mat-icon style="transform: scale(3)" class="img-responsive img-thumbnail">
84-
add
85-
</mat-icon>
86-
</div>
34+
@for (item of SHOWCASES; track item.name) {
35+
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
36+
<mat-icon [fontIcon]="item.icon"></mat-icon>
8737
<div class="card-text">
88-
<div class="item-name">
89-
<b translate>LABEL_UNLIMITED_PURCHASE</b>
90-
</div>
91-
<div class="item-description" translate>
92-
DESCRIPTION_UNLIMITED_PURCHASE
93-
</div>
38+
<strong class="item-name">{{ item.name | translate }}</strong>
39+
<span>{{ item.description | translate }}</span>
9440
</div>
95-
</div>
96-
</mat-card>
41+
</mat-card>
42+
}
9743
</div>

‎frontend/src/app/deluxe-user/deluxe-user.component.scss‎

Lines changed: 43 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
* SPDX-License-Identifier: MIT
44
*/
55

6-
$bg-heading: rgba(0, 0, 0, 0.2);
7-
86
:host {
97
display: flex;
108
flex-direction: column;
@@ -14,128 +12,67 @@ $bg-heading: rgba(0, 0, 0, 0.2);
1412
}
1513

1614
.heading {
17-
background: $bg-heading;
15+
background: rgba(0, 0, 0, 0.2);
1816
font-size: x-large;
19-
justify-content: center;
20-
padding: 12px 20px;
17+
padding: 16px 24px;
2118
}
2219

23-
.feature-cards-container {
20+
.deluxe-membership {
21+
align-items: center;
2422
display: grid;
25-
gap: 10px;
26-
grid-template-columns: repeat(3, 1fr);
27-
}
23+
gap: 16px;
24+
grid-template-columns: minmax(min-content, 600px) auto;
2825

29-
.img-thumbnail {
30-
background: none;
31-
border: 0;
32-
margin-left: 20px;
33-
}
34-
35-
.btn-member {
36-
bottom: 10%;
37-
}
38-
39-
.item-description {
40-
font-size: initial;
41-
margin-top: 12px;
42-
text-align: center;
43-
}
44-
45-
.item-name {
46-
font-size: large;
47-
text-align: center;
48-
}
26+
strong {
27+
font-size: 1.5em;
28+
}
4929

50-
.img-container {
51-
height: 360px;
52-
padding-bottom: 30px;
53-
width: 360px;
54-
}
30+
.card-text {
31+
align-items: center;
32+
display: flex;
33+
flex-direction: column;
34+
gap: 10px;
35+
padding: 16px;
36+
text-align: center;
37+
}
5538

56-
.card-content {
57-
align-items: center;
58-
display: flex;
59-
flex-direction: row;
60-
}
39+
.btn-become-member {
40+
width: min-content;
41+
}
6142

62-
.deluxe-membership .card-content {
63-
flex-direction: row;
43+
@media screen and (max-width: 768px) {
44+
grid-template-columns: 1fr;
45+
}
6446
}
6547

66-
.deluxe-membership .img-container {
67-
flex: 0 0 30%;
68-
}
48+
.feature-cards-container {
49+
display: grid;
50+
gap: 10px;
51+
grid-template-columns: repeat(3, 1fr);
6952

70-
.deluxe-membership .card-text {
71-
flex: 0 0 60%;
53+
@media screen and (max-width: 768px) {
54+
grid-template-columns: 1fr;
55+
}
7256
}
7357

7458
.feature-card {
75-
height: auto;
76-
max-height: 120px;
77-
}
78-
79-
.feature-card .card-content {
80-
height: 100%;
81-
overflow: hidden;
82-
padding: 10px;
83-
}
84-
85-
.feature-card .img-container {
8659
align-items: center;
87-
display: flex;
88-
flex: 0 0 40%;
89-
height: auto;
90-
max-height: 80px;
91-
min-height: 60px;
92-
}
93-
94-
.feature-card .card-text {
95-
flex: 0 0 60%;
96-
}
97-
98-
.feature-card .item-description {
99-
font-size: 0.9em;
100-
margin-top: 8px;
101-
}
60+
display: grid;
61+
gap: 10px;
62+
grid-template-columns: max-content auto;
63+
padding: 16px;
10264

103-
@media screen and (max-width: 768px) {
104-
.feature-cards-container {
105-
grid-template-columns: 1fr;
106-
}
107-
108-
.deluxe-membership .card-content {
109-
flex-direction: row;
110-
flex-wrap: wrap;
111-
}
112-
113-
.deluxe-membership .img-container {
114-
flex: 0 0 auto;
115-
height: auto;
116-
max-width: 200px;
117-
min-height: 0;
118-
width: 40%;
119-
}
120-
121-
.deluxe-membership .card-text {
122-
flex: 1 1 auto;
123-
width: calc(60% - 10px);
124-
}
125-
126-
.feature-card .card-content {
65+
.card-text {
66+
display: flex;
12767
flex-direction: column;
68+
gap: 6px;
69+
padding: 0 16px;
70+
text-align: center;
12871
}
129-
}
13072

131-
@media screen and (max-width: 480px) {
132-
.deluxe-membership .img-container {
133-
max-width: 120px;
134-
width: 30%;
135-
}
136-
137-
.img-container svg {
138-
height: auto;
139-
max-width: 100%;
73+
mat-icon {
74+
font-size: 72px;
75+
height: 72px;
76+
width: 72px;
14077
}
14178
}

‎frontend/src/app/deluxe-user/deluxe-user.component.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,24 @@ export class DeluxeUserComponent implements OnInit {
2828
public applicationName = 'OWASP Juice Shop'
2929
public logoSrc: string = 'assets/public/images/JuiceShop_Logo.png'
3030

31+
public SHOWCASES = [
32+
{
33+
icon: 'slideshow',
34+
name: 'LABEL_DEALS_OFFERS',
35+
description: 'DESCRIPTION_DEALS_OFFERS'
36+
},
37+
{
38+
icon: 'directions_car',
39+
name: 'LABEL_FREE_FAST_DELIVERY',
40+
description: 'DESCRIPTION_FREE_FAST_DELIVERY'
41+
},
42+
{
43+
icon: 'add',
44+
name: 'LABEL_UNLIMITED_PURCHASE',
45+
description: 'DESCRIPTION_UNLIMITED_PURCHASE'
46+
}
47+
] as const
48+
3149
constructor (private readonly router: Router, private readonly userService: UserService, private readonly configurationService: ConfigurationService, private readonly route: ActivatedRoute, private readonly ngZone: NgZone, private readonly io: SocketIoService) {
3250
}
3351

0 commit comments

Comments
 (0)