Skip to content

Commit 1bf3da0

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1814 from rocket-admin/mobile-menu-and-buttons-fixes
mobile: table view, filters, and row-edit overhaul
2 parents f92662f + abadad6 commit 1bf3da0

28 files changed

Lines changed: 2697 additions & 336 deletions

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,20 @@
139139
.logo__image {
140140
height: 24px;
141141
margin-right: 12px;
142+
display: block;
143+
vertical-align: middle;
144+
}
145+
146+
.logo picture {
147+
display: inline-flex;
148+
align-items: center;
149+
}
150+
151+
@media (width <= 600px) {
152+
.logo__image {
153+
height: 28px;
154+
margin-right: 8px;
155+
}
142156
}
143157

144158
.logo__demo-mark {

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,18 @@
8686
<a routerLink="/connections-list"
8787
*ngIf="userLoggedIn"
8888
class="logo">
89-
<img *ngIf="whiteLabelSettingsLoaded"
90-
[src]="whiteLabelSettings.logo || '../assets/rocketadmin_logo_white.svg'"
91-
alt="Logo"
92-
class="logo__image"
93-
>
89+
<ng-container *ngIf="whiteLabelSettingsLoaded">
90+
<img *ngIf="whiteLabelSettings.logo; else defaultRocketLogo"
91+
[src]="whiteLabelSettings.logo"
92+
alt="Logo"
93+
class="logo__image">
94+
<ng-template #defaultRocketLogo>
95+
<picture>
96+
<source media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
97+
<img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
98+
</picture>
99+
</ng-template>
100+
</ng-container>
94101
</a>
95102

96103
<a *ngIf="userLoggedIn === false" href="https://rocketadmin.com/" class="logo">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ export class AppComponent {
304304
user_hash: res.intercom_hash,
305305
user_id: res.id,
306306
email: res.email,
307-
hide_default_launcher: window.innerWidth > 600,
307+
hide_default_launcher: window.innerWidth <= 600,
308308
});
309309

310310
if (this.isDemo)

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,10 @@
319319
padding: 0;
320320
}
321321

322+
.connectionItem {
323+
min-width: 0;
324+
}
325+
322326
.connection {
323327
display: flex;
324328
flex-direction: column;
@@ -357,6 +361,7 @@
357361
flex-shrink: 0;
358362
display: flex;
359363
align-items: center;
364+
min-width: 0;
360365
gap: 12px;
361366
background-color: var(--color-primaryPalette-500);
362367
border-radius: 2px;
@@ -398,9 +403,14 @@
398403
}
399404

400405
.connection {
406+
gap: 4px;
401407
padding: 8px;
402408
}
403409

410+
.connection:has(.connectionSchemaButton) {
411+
padding: 8px 8px 4px;
412+
}
413+
404414
.connectionLogoPreview {
405415
height: 56px;
406416
padding: 6px 10px;
@@ -409,6 +419,7 @@
409419

410420
.connectionInfo .connectionInfo__connectionTitle {
411421
font-size: 14px !important;
422+
margin-bottom: -8px;
412423
}
413424

414425
.connectionLogoPreview .mat-body-2 {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
288288
openTableFilters(structure) {
289289
let filterDialodRef = this.dialog.open(DbTableFiltersDialogComponent, {
290290
width: '56em',
291+
panelClass: 'mobile-bottom-sheet-dialog',
292+
autoFocus: false,
291293
data: {
292294
connectionID: this.connectionID,
293295
tableName: this.selectedTableName,

‎frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,43 @@
33
align-items: center;
44
justify-content: space-between;
55
margin-top: 16px;
6+
margin-bottom: 12px;
7+
}
8+
9+
.filters-header__settings {
10+
flex: 0 0 auto;
11+
margin-left: auto;
12+
}
13+
14+
.filters-header__text {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: flex-start;
18+
gap: 2px;
19+
line-height: 1.2;
20+
text-align: left;
21+
}
22+
23+
@media (width <= 600px) {
24+
.filters-header {
25+
justify-content: flex-start;
26+
gap: 12px;
27+
}
28+
29+
.filters-header__text {
30+
flex: 1 1 auto;
31+
}
32+
}
33+
34+
.filters-header__label {
35+
font-size: 18px;
36+
font-weight: 600;
37+
}
38+
39+
.filters-header__table {
40+
font-size: 12px;
41+
font-weight: 500;
42+
opacity: 0.6;
643
}
744

845
.filters-content {
@@ -11,6 +48,11 @@
1148
grid-column-gap: 8px;
1249
align-content: flex-start;
1350
align-items: flex-start;
51+
padding-top: 8px !important;
52+
}
53+
54+
.filters-select {
55+
margin-top: 4px;
1456
}
1557

1658
.filters-select {
@@ -59,6 +101,48 @@
59101
margin-top: 4px;
60102
}
61103

104+
.filter-line ::ng-deep .mat-mdc-form-field-subscript-wrapper {
105+
display: none;
106+
}
107+
108+
.filter-line {
109+
margin-bottom: 12px;
110+
}
111+
112+
@media (width <= 600px) {
113+
.filters-content {
114+
grid-template-columns: 1fr 32px;
115+
}
116+
117+
.filter-line {
118+
grid-template-columns: 1fr 32px;
119+
grid-template-areas:
120+
"name name"
121+
"field button";
122+
row-gap: 2px;
123+
}
124+
125+
.column-name {
126+
grid-area: name;
127+
grid-column: 1 / -1;
128+
margin: 0;
129+
font-size: 12px;
130+
font-weight: 600;
131+
opacity: 0.6;
132+
}
133+
134+
.filter-line__field {
135+
grid-area: field;
136+
grid-column: 1;
137+
}
138+
139+
.filter-delete-button {
140+
grid-area: button;
141+
grid-column: 2;
142+
margin-top: 0;
143+
}
144+
}
145+
62146
.settings-form__reset-button {
63147
margin-right: auto;
64148
}

‎frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<form #tableFiltersForm="ngForm" class="filters-form">
22
<h1 mat-dialog-title class="filters-header">
3-
<span>Filters for <strong>{{ data.displayTableName }}</strong> table</span>
3+
<span class="filters-header__text">
4+
<span class="filters-header__label">Filters</span>
5+
<span class="filters-header__table">Table: {{ data.displayTableName }}</span>
6+
</span>
47
<a mat-icon-button mat-dialog-close
8+
class="filters-header__settings"
59
routerLink="/dashboard/{{data.connectionID}}/{{data.tableName}}/settings"
610
matTooltip="Advanced settings">
711
<mat-icon>settings</mat-icon>

‎frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css‎

Lines changed: 86 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,72 @@
3030
@media (width <= 600px) {
3131
.row-preview-sidebar_open {
3232
position: fixed;
33-
top: 44px;
33+
top: auto;
3434
bottom: 0;
3535
left: 0;
36+
right: 0;
3637
min-height: initial;
37-
max-height: initial;
38+
max-height: calc(80vh + env(safe-area-inset-bottom, 0px));
3839
width: 100vw;
39-
z-index: 2;
40+
z-index: 1001;
41+
border-top-left-radius: 16px;
42+
border-top-right-radius: 16px;
43+
border-left: none !important;
44+
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
45+
padding-bottom: env(safe-area-inset-bottom, 0px);
46+
animation: rowPreviewSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
47+
}
48+
}
49+
50+
.row-preview-backdrop {
51+
display: none;
52+
}
53+
54+
.row-preview-sidebar__handle {
55+
display: none;
56+
}
57+
58+
@media (width <= 600px) {
59+
.row-preview-backdrop {
60+
display: block;
61+
position: fixed;
62+
inset: 0;
63+
background: rgba(0, 0, 0, 0.4);
64+
z-index: 1000;
65+
animation: rowPreviewBackdropFadeIn 240ms ease-out;
66+
}
67+
68+
.row-preview-sidebar__handle {
69+
display: block;
70+
width: 36px;
71+
height: 4px;
72+
border-radius: 2px;
73+
background: rgba(0, 0, 0, 0.2);
74+
margin: 8px auto 0;
75+
}
76+
}
77+
78+
@media (prefers-color-scheme: dark) {
79+
.row-preview-sidebar__handle {
80+
background: rgba(255, 255, 255, 0.24);
81+
}
82+
}
83+
84+
@keyframes rowPreviewSlideUp {
85+
from {
86+
transform: translateY(100%);
87+
}
88+
to {
89+
transform: translateY(0);
90+
}
91+
}
92+
93+
@keyframes rowPreviewBackdropFadeIn {
94+
from {
95+
opacity: 0;
96+
}
97+
to {
98+
opacity: 1;
4099
}
41100
}
42101

@@ -49,8 +108,8 @@
49108
justify-content: space-between;
50109
padding-top: 20px;
51110
padding-bottom: 20px;
52-
padding-left: 16px;
53-
padding-right: 16px;
111+
padding-left: 20px;
112+
padding-right: 12px;
54113
z-index: 1;
55114
}
56115

@@ -70,7 +129,7 @@
70129
flex-direction: column;
71130
align-items: flex-start;
72131
gap: 4px;
73-
padding: 12px 16px;
132+
padding: 12px 20px;
74133
}
75134

76135
.row-preview-sidebar__field:not(:last-child) {
@@ -88,18 +147,20 @@
88147
width: 100%;
89148
}
90149

91-
.related-records-panel {
92-
margin-left: 4px;
93-
width: calc(100% - 8px);
94-
}
95-
96-
.related-records-panel__header {
97-
height: 36px !important;
98-
padding: 0 12px 0 8px;
150+
.related-records-section {
151+
margin: 8px 0 0;
152+
padding: 0 20px;
99153
}
100154

101-
.related-records-panel ::ng-deep .mat-expansion-panel-body {
155+
.related-records-section__title {
156+
margin: 0 0 4px !important;
102157
padding: 0;
158+
font-size: 12px !important;
159+
font-weight: 600 !important;
160+
line-height: 1.4 !important;
161+
text-transform: uppercase;
162+
letter-spacing: 0.06em;
163+
opacity: 0.6;
103164
}
104165

105166
.related-records__header {
@@ -122,6 +183,16 @@
122183
padding-right: 8px;
123184
}
124185

186+
.related-record__open {
187+
color: rgba(0, 0, 0, 0.54);
188+
}
189+
190+
@media (prefers-color-scheme: dark) {
191+
.related-record__open {
192+
color: rgba(255, 255, 255, 0.7);
193+
}
194+
}
195+
125196
.related-record ::ng-deep .mdc-list-item__primary-text::before {
126197
height: 24px;
127198
}

0 commit comments

Comments
 (0)