Skip to content

Commit f758d54

Browse files
J12934J12934
committed
Remove top level wapper by using component as the wrapper
1 parent a4f5968 commit f758d54

2 files changed

Lines changed: 80 additions & 80 deletions

File tree

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

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -3,95 +3,95 @@
33
~ SPDX-License-Identifier: MIT
44
-->
55

6-
<div class="main-wrapper">
7-
<div *ngIf="error" class="heading mat-elevation-z6">
8-
<div style="margin-top:5px;">
9-
<p class="error">{{error}}</p>
6+
<div *ngIf="error" class="heading mat-elevation-z6">
7+
<div style="margin-top:5px;">
8+
<p class="error">{{error}}</p>
9+
</div>
10+
</div>
11+
12+
<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>
1042
</div>
1143
</div>
12-
<mat-card appearance="outlined" class="mat-elevation-z6 deluxe-membership">
44+
</mat-card>
45+
<div class="feature-cards-container">
46+
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
1347
<div class="card-content">
1448
<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>
49+
<mat-icon style="transform: scale(3)" class="img-responsive img-thumbnail">
50+
slideshow
51+
</mat-icon>
2352
</div>
2453
<div class="card-text">
2554
<div class="item-name">
26-
<b translate>LABEL_DELUXE_MEMBERSHIP</b>
55+
<b translate>LABEL_DEALS_OFFERS</b>
2756
</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 mat-raised-button>
37-
<span translate>LABEL_BECOME_MEMBER</span>
38-
</button>
39-
</div>
57+
<div class="item-description" translate>
58+
DESCRIPTION_DEALS_OFFERS
4059
</div>
4160
</div>
4261
</div>
4362
</mat-card>
44-
<div class="feature-cards-container">
45-
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
46-
<div class="card-content">
47-
<div class="img-container">
48-
<mat-icon style="transform: scale(3)" class="img-responsive img-thumbnail">
49-
slideshow
50-
</mat-icon>
51-
</div>
52-
<div class="card-text">
53-
<div class="item-name">
54-
<b translate>LABEL_DEALS_OFFERS</b>
55-
</div>
56-
<div class="item-description" translate>
57-
DESCRIPTION_DEALS_OFFERS
58-
</div>
59-
</div>
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>
6069
</div>
61-
</mat-card>
62-
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
63-
<div class="card-content">
64-
<div class="img-container">
65-
<mat-icon style="transform: scale(3)" class="img-responsive img-thumbnail">
66-
directions_car
67-
</mat-icon>
70+
<div class="card-text">
71+
<div class="item-name">
72+
<b translate>LABEL_FREE_FAST_DELIVERY</b>
6873
</div>
69-
<div class="card-text">
70-
<div class="item-name">
71-
<b translate>LABEL_FREE_FAST_DELIVERY</b>
72-
</div>
73-
<div class="item-description" translate>
74-
DESCRIPTION_FREE_FAST_DELIVERY
75-
</div>
74+
<div class="item-description" translate>
75+
DESCRIPTION_FREE_FAST_DELIVERY
7676
</div>
7777
</div>
78-
</mat-card>
79-
<mat-card appearance="outlined" class="mat-elevation-z6 feature-card">
80-
<div class="card-content">
81-
<div class="img-container">
82-
<mat-icon style="transform: scale(3)" class="img-responsive img-thumbnail">
83-
add
84-
</mat-icon>
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>
87+
<div class="card-text">
88+
<div class="item-name">
89+
<b translate>LABEL_UNLIMITED_PURCHASE</b>
8590
</div>
86-
<div class="card-text">
87-
<div class="item-name">
88-
<b translate>LABEL_UNLIMITED_PURCHASE</b>
89-
</div>
90-
<div class="item-description" translate>
91-
DESCRIPTION_UNLIMITED_PURCHASE
92-
</div>
91+
<div class="item-description" translate>
92+
DESCRIPTION_UNLIMITED_PURCHASE
9393
</div>
9494
</div>
95-
</mat-card>
96-
</div>
95+
</div>
96+
</mat-card>
9797
</div>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55

66
$bg-heading: rgba(0, 0, 0, 0.2);
77

8-
.heading {
9-
background: $bg-heading;
10-
font-size: x-large;
11-
justify-content: center;
12-
padding: 12px 20px;
13-
}
14-
15-
.main-wrapper {
8+
:host {
169
display: flex;
1710
flex-direction: column;
1811
gap: 10px;
1912
margin-left: 10%;
2013
margin-right: 10%;
2114
}
2215

16+
.heading {
17+
background: $bg-heading;
18+
font-size: x-large;
19+
justify-content: center;
20+
padding: 12px 20px;
21+
}
22+
2323
.feature-cards-container {
2424
display: grid;
2525
gap: 10px;

0 commit comments

Comments
 (0)