Skip to content

Commit 1b57890

Browse files
ArtuomkaArtuomka
committed
Merge branch 'main' into backend_ceadr_refactoring
2 parents f7721da + b5734ed commit 1b57890

4 files changed

Lines changed: 227 additions & 49 deletions

File tree

‎frontend/src/app/components/connections-list/own-connections/own-connections.component.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@
193193
align-items: center;
194194
gap: 12px;
195195
align-self: flex-end;
196-
margin-top: 20px;
196+
margin-top: 52px;
197197
}
198198

199199
.fabAddButton {

‎frontend/src/app/components/connections-list/own-connections/own-connections.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
7272

7373
this._uiSettings.getUiSettings().subscribe((settings: UiSettings) => {
7474
this.connectionsListCollapsed = settings?.globalSettings?.connectionsListCollapsed;
75-
this.displayedCardCount = this.connectionsListCollapsed ? 3 : this.connections.length;
75+
this.displayedCardCount = this.connectionsListCollapsed ? 3 : (this.connections?.length || 3);
7676
});
7777
}
7878

@@ -82,6 +82,10 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
8282
this.hasMultipleMembers = members && members.length > 1;
8383
});
8484
}
85+
86+
if (changes.connections && this.connections && !this.connectionsListCollapsed) {
87+
this.displayedCardCount = this.connections.length;
88+
}
8589
}
8690

8791
showMore() {
@@ -177,6 +181,7 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
177181
width: '42em',
178182
maxWidth: '95vw',
179183
data,
184+
disableClose: true,
180185
});
181186
}
182187

‎frontend/src/app/components/upgrade/upgrade.component.css‎

Lines changed: 158 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,21 @@
9494

9595
@media (width <= 600px) {
9696
.current-plan-banner {
97-
flex-direction: column;
98-
align-items: flex-start;
99-
gap: 16px;
97+
flex-direction: row;
98+
align-items: flex-end;
99+
justify-content: space-between;
100+
padding: 12px 16px;
101+
}
102+
103+
.payment-settings-button mat-icon {
104+
display: none;
105+
}
106+
}
107+
108+
@media (width <= 600px) {
109+
.plans {
110+
margin: 1.5em auto;
111+
width: calc(100% - 32px);
100112
}
101113
}
102114

@@ -107,6 +119,85 @@
107119
margin-bottom: 1em;
108120
}
109121

122+
@media (width <= 600px) {
123+
.header {
124+
grid-template-columns: repeat(3, 1fr);
125+
grid-column-gap: 4px;
126+
align-items: stretch;
127+
position: sticky;
128+
top: 4px;
129+
z-index: 10;
130+
background-color: var(--mat-sidenav-content-background-color);
131+
padding: 4px 0;
132+
margin-left: calc(-1 * (100vw - 100%) / 2);
133+
margin-right: calc(-1 * (100vw - 100%) / 2);
134+
padding-left: calc((100vw - 100%) / 2);
135+
padding-right: calc((100vw - 100%) / 2);
136+
width: 100vw;
137+
box-sizing: border-box;
138+
}
139+
140+
.header > div:first-child,
141+
.header > div:nth-child(2) {
142+
display: none;
143+
}
144+
145+
.plan-header {
146+
position: relative;
147+
padding: 12px 8px !important;
148+
border-radius: 8px;
149+
flex: 1;
150+
}
151+
152+
.plan-header-name {
153+
margin-bottom: 2px !important;
154+
}
155+
156+
.plan-header-name .mat-h3 {
157+
font-size: 14px;
158+
}
159+
160+
.price {
161+
font-size: 1.15em;
162+
}
163+
164+
.per {
165+
font-size: 0.8em;
166+
}
167+
168+
.users {
169+
font-size: 0.7em;
170+
margin-bottom: 0.5em;
171+
margin-top: 0.15em;
172+
}
173+
174+
.plan-badge:not(.plan-badge-mobile) {
175+
display: none;
176+
}
177+
178+
.plan-badge.plan-badge-mobile {
179+
position: absolute;
180+
top: -8px;
181+
right: 8px;
182+
display: inline-flex;
183+
margin-bottom: 4px;
184+
height: 18px;
185+
}
186+
187+
.plan-header-actions {
188+
margin-top: auto;
189+
padding-top: 4px;
190+
}
191+
}
192+
193+
.plan-badge-mobile {
194+
display: none;
195+
}
196+
197+
.plan-header-actions {
198+
margin-top: auto;
199+
}
200+
110201
.mat-h1 {
111202
margin: 0;
112203
}
@@ -251,6 +342,70 @@
251342
}
252343
}
253344

345+
@media (width <= 600px) {
346+
.plansTable colgroup {
347+
display: none;
348+
}
349+
350+
.plansTable ::ng-deep table {
351+
display: block;
352+
}
353+
354+
.plansTable ::ng-deep tbody {
355+
display: flex;
356+
flex-direction: column;
357+
}
358+
359+
.plansTable ::ng-deep .mat-mdc-row {
360+
display: grid;
361+
grid-template-columns: 1fr 1fr 1fr;
362+
padding: 12px 16px;
363+
height: auto;
364+
}
365+
366+
.plansTable ::ng-deep .mat-mdc-cell:first-child {
367+
grid-column: 1 / -1;
368+
font-weight: 500;
369+
padding: 0 0 4px !important;
370+
font-size: 14px;
371+
text-align: left;
372+
border-bottom: none;
373+
min-height: unset;
374+
}
375+
376+
.plansTable ::ng-deep .mat-mdc-cell:not(:first-child) {
377+
padding: 0 !important;
378+
text-align: center;
379+
border-bottom: none;
380+
min-height: unset;
381+
border-left: 1px solid rgba(0, 0, 0, 0.08);
382+
border-right: 1px solid rgba(0, 0, 0, 0.08);
383+
}
384+
385+
.plansTable ::ng-deep .mat-mdc-cell:nth-child(2) {
386+
border-left: none;
387+
}
388+
389+
.plansTable ::ng-deep .mat-mdc-cell:last-child {
390+
border-right: none;
391+
}
392+
393+
.cell_centered {
394+
padding: 0 !important;
395+
}
396+
397+
.cell_current {
398+
background: none;
399+
}
400+
}
401+
402+
@media (width <= 600px) and (prefers-color-scheme: dark) {
403+
.plansTable ::ng-deep .mat-mdc-cell:not(:first-child) {
404+
border-left-color: rgba(255, 255, 255, 0.08);
405+
border-right-color: rgba(255, 255, 255, 0.08);
406+
}
407+
}
408+
254409
.databases-header-cell__users {
255410
text-align: center;
256411
}

‎frontend/src/app/components/upgrade/upgrade.component.html‎

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -33,49 +33,52 @@ <h1 class="mat-h1">
3333
<span class="mat-h3">{{plan.name}} </span>
3434
<mat-chip disabled *ngIf="plan.name === 'Team'" class="plan-badge">Recommended</mat-chip>
3535
</div>
36+
<mat-chip disabled *ngIf="plan.name === 'Team'" class="plan-badge plan-badge-mobile">Popular</mat-chip>
3637
<div>
3738
<span class="price">${{ plan.price }}</span><span class="per">/monthly</span>
3839
</div>
3940
<span class="per users">
4041
<span *ngIf="plan.price !== 0">per each <strong class="users__value">10 users</strong></span>
4142
<span *ngIf="plan.price === 0">up to <strong class="users__value">3 users</strong></span>
4243
</span>
43-
<button mat-flat-button color="accent" type="button"
44-
*ngIf="plan.key === currentPlan.key; else activeButton"
45-
disabled class="current">
46-
Current
47-
</button>
48-
<ng-template #activeButton>
49-
<ng-container *ngIf="isAdmin">
50-
<button mat-flat-button color="accent" type="button"
51-
*ngIf="plan.price > currentPlan.price && hasPaymentMethod"
52-
[disabled]="submitting"
53-
(click)="changePlan(plan.key)">
54-
Upgrade
55-
</button>
56-
<button mat-button type="button"
57-
*ngIf="plan.price < currentPlan.price && hasPaymentMethod"
58-
[disabled]="submitting"
59-
(click)="changePlan(plan.key)">
60-
Downgrade
61-
</button>
62-
63-
<a mat-flat-button color="accent"
64-
*ngIf="plan.price > currentPlan.price && !hasPaymentMethod"
65-
[disabled]="submitting"
66-
routerLink="/upgrade/payment"
67-
[queryParams]="{plan: plan.key}">
68-
Upgrade
69-
</a>
70-
<a mat-button
71-
*ngIf="plan.price < currentPlan.price && !hasPaymentMethod"
72-
[disabled]="submitting"
73-
routerLink="/upgrade/payment"
74-
[queryParams]="{plan: plan.key}">
75-
Downgrade
76-
</a>
77-
</ng-container>
78-
</ng-template>
44+
<div class="plan-header-actions">
45+
<button mat-flat-button color="accent" type="button"
46+
*ngIf="plan.key === currentPlan.key; else activeButton"
47+
disabled class="current">
48+
Current
49+
</button>
50+
<ng-template #activeButton>
51+
<ng-container *ngIf="isAdmin">
52+
<button mat-flat-button color="accent" type="button"
53+
*ngIf="plan.price > currentPlan.price && hasPaymentMethod"
54+
[disabled]="submitting"
55+
(click)="changePlan(plan.key)">
56+
Upgrade
57+
</button>
58+
<button mat-button type="button"
59+
*ngIf="plan.price < currentPlan.price && hasPaymentMethod"
60+
[disabled]="submitting"
61+
(click)="changePlan(plan.key)">
62+
Downgrade
63+
</button>
64+
65+
<a mat-flat-button color="accent"
66+
*ngIf="plan.price > currentPlan.price && !hasPaymentMethod"
67+
[disabled]="submitting"
68+
routerLink="/upgrade/payment"
69+
[queryParams]="{plan: plan.key}">
70+
Upgrade
71+
</a>
72+
<a mat-button
73+
*ngIf="plan.price < currentPlan.price && !hasPaymentMethod"
74+
[disabled]="submitting"
75+
routerLink="/upgrade/payment"
76+
[queryParams]="{plan: plan.key}">
77+
Downgrade
78+
</a>
79+
</ng-container>
80+
</ng-template>
81+
</div>
7982
</div>
8083
</ng-template>
8184
</ng-container>
@@ -96,9 +99,12 @@ <h2 class="mat-header-2">Databases</h2>
9699
<ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
97100
<td mat-cell *matCellDef="let element"
98101
[ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
99-
<span *ngIf="plan.key === 'title'">{{element[plan.key]}}</span>
100-
<mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-symbols-outlined">all_inclusive</mat-icon>
101-
<span *ngIf="element[plan.key] !== '∞' && plan.key !== 'title'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
102+
<span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
103+
<ng-container *ngIf="plan.key !== 'title'">
104+
105+
<mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-symbols-outlined">all_inclusive</mat-icon>
106+
<span *ngIf="element[plan.key] !== '∞'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
107+
</ng-container>
102108
</td>
103109
</ng-container>
104110
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@@ -117,7 +123,11 @@ <h2 class="mat-header-2">Hosted Instances</h2>
117123
<ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
118124
<td mat-cell *matCellDef="let element"
119125
[ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
120-
{{element[plan.key]}}
126+
<span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
127+
<ng-container *ngIf="plan.key !== 'title'">
128+
129+
{{element[plan.key]}}
130+
</ng-container>
121131
</td>
122132
</ng-container>
123133
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@@ -135,8 +145,12 @@ <h2 class="mat-header-2">Users</h2>
135145
<ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
136146
<td mat-cell *matCellDef="let element"
137147
[ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
138-
<span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
139-
<ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
148+
<span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
149+
<ng-container *ngIf="plan.key !== 'title'">
150+
151+
<span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
152+
<ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
153+
</ng-container>
140154
</td>
141155
</ng-container>
142156
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@@ -154,8 +168,12 @@ <h2 class="mat-header-2">Features</h2>
154168
<ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
155169
<td mat-cell *matCellDef="let element"
156170
[ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
157-
<span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
158-
<ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
171+
<span *ngIf="plan.key === 'title'" class="row-title">{{element[plan.key]}}</span>
172+
<ng-container *ngIf="plan.key !== 'title'">
173+
174+
<span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
175+
<ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
176+
</ng-container>
159177
</td>
160178
</ng-container>
161179
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

0 commit comments

Comments
 (0)