Skip to content

Commit f0fd670

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1829 from rocket-admin/mobile-fixes-update
Mobile fixes update
2 parents 9972340 + fafa80a commit f0fd670

33 files changed

Lines changed: 1386 additions & 115 deletions

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

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,34 @@
2222
width: 60vw;
2323
}
2424

25+
.main-menu-sidenav .account-section-item {
26+
--mdc-list-list-item-label-text-size: 13px;
27+
--mat-list-list-item-leading-icon-size: 18px;
28+
--mdc-list-list-item-one-line-container-height: 40px;
29+
--mdc-list-list-item-two-line-container-height: 52px;
30+
}
31+
32+
.main-menu-sidenav .account-section-item .mat-icon {
33+
font-size: 18px;
34+
width: 18px;
35+
height: 18px;
36+
}
37+
38+
@media (width <= 600px) {
39+
.main-menu-sidenav.mat-drawer {
40+
top: 44px !important;
41+
height: calc(100vh - 44px) !important;
42+
}
43+
44+
.main-menu-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown {
45+
top: 44px !important;
46+
}
47+
48+
.main-menu-sidenav mat-toolbar {
49+
display: none !important;
50+
}
51+
}
52+
2553
.nav-bar {
2654
position: sticky;
2755
top: 0;
@@ -218,8 +246,6 @@
218246
display: flex;
219247
flex-direction: column;
220248
align-items: flex-start;
221-
border-top: var(--mat-table-row-item-outline-width, 1px) solid
222-
var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
223249
border-bottom: var(--mat-table-row-item-outline-width, 1px) solid
224250
var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
225251
margin-left: 8px;
@@ -243,7 +269,7 @@
243269
}
244270

245271
.connection-navigation__upgrade-button {
246-
margin-top: 8px;
272+
margin-top: -12px;
247273
margin-left: 8px;
248274
width: calc(100% - 16px);
249275
}

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

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
class="main-menu-sidenav"
66
>
77
<mat-toolbar>Rocketadmin</mat-toolbar>
8-
<mat-nav-list *ngIf="userLoggedIn === true">
9-
<a mat-list-item routerLink="/connections-list"
8+
<mat-nav-list *ngIf="userLoggedIn === true" (click)="drawer.close()">
9+
<a *ngIf="!connectionID" mat-list-item routerLink="/connections-list"
1010
routerLinkActive="nav-bar__button_active"
1111
aria-label="List of connections">
1212
<mat-icon matListItemIcon class="connection-navigation__icon">
@@ -21,7 +21,7 @@
2121
{{navigationTabs[tab].caption}}
2222
</a>
2323
</mat-nav-list>
24-
<a mat-list-item routerLink="/user-settings" class="connection-navigation__item_user" data-testid="account-link-account-menu">
24+
<a mat-list-item routerLink="/user-settings" class="connection-navigation__item_user account-section-item" data-testid="account-link-account-menu">
2525
<mat-icon matListItemIcon class="connection-navigation__icon connection-navigation__icon_account"
2626
matBadge="1" [matBadgeHidden]="currentUser.isActive"
2727
matBadgeColor="accent" matBadgeSize="small">
@@ -30,19 +30,27 @@
3030
<div matListItemTitle>Account</div>
3131
<div matListItemLine>{{currentUser.email}}</div>
3232
</a>
33-
<a mat-list-item routerLink="/company" data-testid="company-link-account-menu">
33+
<a mat-list-item routerLink="/company" class="account-section-item" data-testid="company-link-account-menu">
3434
<mat-icon matListItemIcon class="connection-navigation__icon">
3535
apartment
3636
</mat-icon>
3737
<div matListItemTitle>Company</div>
3838
</a>
39-
<a mat-list-item routerLink="/secrets" data-testid="secrets-link-account-menu">
39+
<a mat-list-item routerLink="/hosted-databases"
40+
routerLinkActive="nav-bar__button_active"
41+
aria-label="Hosted databases">
42+
<mat-icon matListItemIcon fontSet="material-symbols-outlined" class="connection-navigation__icon">
43+
database
44+
</mat-icon>
45+
<div matListItemTitle>Hosted databases</div>
46+
</a>
47+
<a mat-list-item routerLink="/secrets" class="account-section-item" data-testid="secrets-link-account-menu">
4048
<mat-icon matListItemIcon class="connection-navigation__icon">
4149
key
4250
</mat-icon>
4351
<div matListItemTitle>Secrets</div>
4452
</a>
45-
<a mat-list-item *ngIf="isSaas" routerLink="/zapier" data-testid="zapier-link-account-menu">
53+
<a mat-list-item *ngIf="isSaas" routerLink="/zapier" class="account-section-item" data-testid="zapier-link-account-menu">
4654
<mat-icon matListItemIcon class="connection-navigation__icon">
4755
electric_bolt
4856
</mat-icon>
@@ -53,17 +61,18 @@
5361
<mat-icon fontSet="material-symbols-outlined">chat_bubble</mat-icon>
5462
<span>Chat with support</span>
5563
</button>
56-
<a mat-list-item href="https://docs.rocketadmin.com/" target="_blank">
64+
<a mat-list-item class="account-section-item" href="https://docs.rocketadmin.com/" target="_blank">
5765
<mat-icon matListItemIcon class="connection-navigation__icon" fontSet="material-symbols-outlined">help</mat-icon>
5866
<div matListItemTitle>Help center</div>
5967
</a>
60-
<mat-list-item (click)="logOut()" data-testid="logout-button-account-menu">
68+
<mat-list-item class="account-section-item" (click)="logOut()" data-testid="logout-button-account-menu">
6169
<mat-icon matListItemIcon class="connection-navigation__icon">logout</mat-icon>
6270
<div matListItemTitle>Log out</div>
6371
</mat-list-item>
6472
</mat-nav-list>
6573
<a mat-flat-button color="accent" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN'" class="connection-navigation__upgrade-button" routerLink="/upgrade"
66-
routerLinkActive="nav-bar__button_active">
74+
routerLinkActive="nav-bar__button_active"
75+
(click)="drawer.close()">
6776
Upgrade
6877
</a>
6978
</mat-sidenav>
@@ -93,7 +102,7 @@
93102
class="logo__image">
94103
<ng-template #defaultRocketLogo>
95104
<picture>
96-
<source media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
105+
<source *ngIf="connectionID" media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
97106
<img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
98107
</picture>
99108
</ng-template>
@@ -130,6 +139,11 @@
130139
[ngClass]="{'connection_active': connectionID === connection.connection.id}">
131140
{{connection.displayTitle}}
132141
</a>
142+
<mat-divider></mat-divider>
143+
<a mat-menu-item routerLink="/hosted-databases">
144+
<mat-icon class="nav-menu__list-link-icon" fontSet="material-symbols-outlined">database</mat-icon>
145+
<span>Hosted databases</span>
146+
</a>
133147
</ng-template>
134148
</mat-menu>
135149
<span *ngIf="isDemo" class="logo__demo-mark">demo</span>

‎frontend/src/app/app.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
22
import { ChangeDetectorRef, Component } from '@angular/core';
33
import { MatBadgeModule } from '@angular/material/badge';
44
import { MatButtonModule } from '@angular/material/button';
5+
import { MatDividerModule } from '@angular/material/divider';
56
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
67
import { MatListModule } from '@angular/material/list';
78
import { MatMenuModule } from '@angular/material/menu';
@@ -50,6 +51,7 @@ amplitude.getInstance().init('9afd282be91f94da735c11418d5ff4f5');
5051
MatButtonModule,
5152
MatBadgeModule,
5253
MatMenuModule,
54+
MatDividerModule,
5355
MatTooltipModule,
5456
Angulartics2OnModule,
5557
FeatureNotificationComponent,

0 commit comments

Comments
 (0)