Skip to content

mobile: table view, filters, and row-edit overhaul #1814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 13 commits into from
Jun 2, 2026
Merged

mobile: table view, filters, and row-edit overhaul #1814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
daf86ed
feat(table-view): mobile cards, bottom-sheet row preview, sort/filter…
karinakharchenko May 21, 2026
8800d2a
feat(mobile): polish table view actions, filters, and dialogs
karinakharchenko May 21, 2026
384bae2
fix(filters): floating labels no longer clip, column name above input…
karinakharchenko May 22, 2026
6288e01
fix(filters): compact saved-filters dialog with per-condition layout
karinakharchenko May 22, 2026
13d6f39
feat(mobile): table picker, sort, and columns as bottom sheets
karinakharchenko May 27, 2026
5c083b1
feat(mobile): pull-to-refresh, import/export sheet, sticky row-edit a…
karinakharchenko May 27, 2026
d58cda9
feat(mobile): rework table header, action bar, sort sheet, and row ed…
karinakharchenko Jun 1, 2026
5d4b25f
Merge branch 'main' into mobile-menu-and-buttons-fixes
lyubov-voloshko Jun 2, 2026
01f13e4
connection card: fix connection name trim and spacing
lyubov-voloshko Jun 2, 2026
a85b905
fix intercome desktop button shown
lyubov-voloshko Jun 2, 2026
e62efd4
fix mobile layout for saved filters row, active filters and condition…
lyubov-voloshko Jun 2, 2026
b25aec5
Merge branch 'main' into mobile-menu-and-buttons-fixes
lyubov-voloshko Jun 2, 2026
abadad6
fix notifications service unit test for verticalPosition
lyubov-voloshko Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions frontend/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,20 @@
.logo__image {
height: 24px;
margin-right: 12px;
display: block;
vertical-align: middle;
}

.logo picture {
display: inline-flex;
align-items: center;
}

@media (width <= 600px) {
.logo__image {
height: 28px;
margin-right: 8px;
}
}

.logo__demo-mark {
Expand Down
17 changes: 12 additions & 5 deletions frontend/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,18 @@
<a routerLink="/connections-list"
*ngIf="userLoggedIn"
class="logo">
<img *ngIf="whiteLabelSettingsLoaded"
[src]="whiteLabelSettings.logo || '../assets/rocketadmin_logo_white.svg'"
alt="Logo"
class="logo__image"
>
<ng-container *ngIf="whiteLabelSettingsLoaded">
<img *ngIf="whiteLabelSettings.logo; else defaultRocketLogo"
[src]="whiteLabelSettings.logo"
alt="Logo"
class="logo__image">
<ng-template #defaultRocketLogo>
<picture>
<source media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
<img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
</picture>
</ng-template>
</ng-container>
</a>

<a *ngIf="userLoggedIn === false" href="https://rocketadmin.com/" class="logo">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ export class AppComponent {
user_hash: res.intercom_hash,
user_id: res.id,
email: res.email,
hide_default_launcher: window.innerWidth > 600,
hide_default_launcher: window.innerWidth <= 600,
});

if (this.isDemo)
Expand Down
11 changes: 11 additions & 0 deletions frontend/src/app/components/connections-list/own-connections/own-connections.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,10 @@
padding: 0;
}

.connectionItem {
min-width: 0;
}

.connection {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -357,6 +361,7 @@
flex-shrink: 0;
display: flex;
align-items: center;
min-width: 0;
gap: 12px;
background-color: var(--color-primaryPalette-500);
border-radius: 2px;
Expand Down Expand Up @@ -398,9 +403,14 @@
}

.connection {
gap: 4px;
padding: 8px;
}

.connection:has(.connectionSchemaButton) {
padding: 8px 8px 4px;
}

.connectionLogoPreview {
height: 56px;
padding: 6px 10px;
Expand All @@ -409,6 +419,7 @@

.connectionInfo .connectionInfo__connectionTitle {
font-size: 14px !important;
margin-bottom: -8px;
}

.connectionLogoPreview .mat-body-2 {
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/app/components/dashboard/dashboard.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
openTableFilters(structure) {
let filterDialodRef = this.dialog.open(DbTableFiltersDialogComponent, {
width: '56em',
panelClass: 'mobile-bottom-sheet-dialog',
autoFocus: false,
data: {
connectionID: this.connectionID,
tableName: this.selectedTableName,
Expand Down
84 changes: 84 additions & 0 deletions ...nts/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,43 @@
align-items: center;
justify-content: space-between;
margin-top: 16px;
margin-bottom: 12px;
}

.filters-header__settings {
flex: 0 0 auto;
margin-left: auto;
}

.filters-header__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1.2;
text-align: left;
}

@media (width <= 600px) {
.filters-header {
justify-content: flex-start;
gap: 12px;
}

.filters-header__text {
flex: 1 1 auto;
}
}

.filters-header__label {
font-size: 18px;
font-weight: 600;
}

.filters-header__table {
font-size: 12px;
font-weight: 500;
opacity: 0.6;
}

.filters-content {
Expand All @@ -11,6 +48,11 @@
grid-column-gap: 8px;
align-content: flex-start;
align-items: flex-start;
padding-top: 8px !important;
}

.filters-select {
margin-top: 4px;
}

.filters-select {
Expand Down Expand Up @@ -59,6 +101,48 @@
margin-top: 4px;
}

.filter-line ::ng-deep .mat-mdc-form-field-subscript-wrapper {
display: none;
}

.filter-line {
margin-bottom: 12px;
}

@media (width <= 600px) {
.filters-content {
grid-template-columns: 1fr 32px;
}

.filter-line {
grid-template-columns: 1fr 32px;
grid-template-areas:
"name name"
"field button";
row-gap: 2px;
}

.column-name {
grid-area: name;
grid-column: 1 / -1;
margin: 0;
font-size: 12px;
font-weight: 600;
opacity: 0.6;
}

.filter-line__field {
grid-area: field;
grid-column: 1;
}

.filter-delete-button {
grid-area: button;
grid-column: 2;
margin-top: 0;
}
}

.settings-form__reset-button {
margin-right: auto;
}
6 changes: 5 additions & 1 deletion ...ts/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<form #tableFiltersForm="ngForm" class="filters-form">
<h1 mat-dialog-title class="filters-header">
<span>Filters for <strong>{{ data.displayTableName }}</strong> table</span>
<span class="filters-header__text">
<span class="filters-header__label">Filters</span>
<span class="filters-header__table">Table: {{ data.displayTableName }}</span>
</span>
<a mat-icon-button mat-dialog-close
class="filters-header__settings"
routerLink="/dashboard/{{data.connectionID}}/{{data.tableName}}/settings"
matTooltip="Advanced settings">
<mat-icon>settings</mat-icon>
Expand Down
101 changes: 86 additions & 15 deletions .../app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,72 @@
@media (width <= 600px) {
.row-preview-sidebar_open {
position: fixed;
top: 44px;
top: auto;
bottom: 0;
left: 0;
right: 0;
min-height: initial;
max-height: initial;
max-height: calc(80vh + env(safe-area-inset-bottom, 0px));
width: 100vw;
z-index: 2;
z-index: 1001;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-left: none !important;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
padding-bottom: env(safe-area-inset-bottom, 0px);
animation: rowPreviewSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
}

.row-preview-backdrop {
display: none;
}

.row-preview-sidebar__handle {
display: none;
}

@media (width <= 600px) {
.row-preview-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1000;
animation: rowPreviewBackdropFadeIn 240ms ease-out;
}

.row-preview-sidebar__handle {
display: block;
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.2);
margin: 8px auto 0;
}
}

@media (prefers-color-scheme: dark) {
.row-preview-sidebar__handle {
background: rgba(255, 255, 255, 0.24);
}
}

@keyframes rowPreviewSlideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
Comment on lines +84 to +91

@coderabbitai coderabbitai Bot Jun 1, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Rename keyframes to kebab-case to satisfy stylelint.

The new animation names violate the configured keyframes-name-pattern and can fail lint checks.

Suggested fix 
-		animation: rowPreviewSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+		animation: row-preview-slide-up 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
...
-		animation: rowPreviewBackdropFadeIn 240ms ease-out;
+		animation: row-preview-backdrop-fade-in 240ms ease-out;
...
-@keyframes rowPreviewSlideUp {
+@keyframes row-preview-slide-up {
...
-@keyframes rowPreviewBackdropFadeIn {
+@keyframes row-preview-backdrop-fade-in {

Also applies to: 93-100

🧰 Tools
🪛 Stylelint (17.12.0)

[error] 84-84: Expected keyframe name "rowPreviewSlideUp" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css`
around lines 84 - 91, The `@keyframes` name rowPreviewSlideUp uses camelCase and
breaks the configured keyframes-name-pattern; rename it to kebab-case (e.g.,
row-preview-slide-up) and update all corresponding usages (animation,
animation-name, and any JS/TS references) to the new identifier; repeat the same
change for the other keyframes defined at 93-100 (rename to a kebab-case
equivalent) so stylelint passes and all animations still reference the updated
names (check CSS selectors, inline styles, and component templates).


@keyframes rowPreviewBackdropFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

Expand All @@ -49,8 +108,8 @@
justify-content: space-between;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 16px;
padding-right: 16px;
padding-left: 20px;
padding-right: 12px;
z-index: 1;
}

Expand All @@ -70,7 +129,7 @@
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px 16px;
padding: 12px 20px;
}

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

.related-records-panel {
margin-left: 4px;
width: calc(100% - 8px);
}

.related-records-panel__header {
height: 36px !important;
padding: 0 12px 0 8px;
.related-records-section {
margin: 8px 0 0;
padding: 0 20px;
}

.related-records-panel ::ng-deep .mat-expansion-panel-body {
.related-records-section__title {
margin: 0 0 4px !important;
padding: 0;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.6;
}

.related-records__header {
Expand All @@ -122,6 +183,16 @@
padding-right: 8px;
}

.related-record__open {
color: rgba(0, 0, 0, 0.54);
}

@media (prefers-color-scheme: dark) {
.related-record__open {
color: rgba(255, 255, 255, 0.7);
}
}

.related-record ::ng-deep .mdc-list-item__primary-text::before {
height: 24px;
}
Expand Down
Loading
Loading