Skip to content

fix(AsyncReplication): fix table styles #891

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
merged 1 commit into from
Jun 10, 2024
Merged

fix(AsyncReplication): fix table styles #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 1 addition & 33 deletions src/containers/App/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ body,
:root {
--g-color-base-yellow-light: rgba(255, 199, 0, 0.15);
--g-color-base-yellow-medium: rgba(255, 219, 77, 0.4);

--data-table-row-height: 40px;
}

.g-root {
Expand Down Expand Up @@ -74,42 +72,12 @@ body,
.app {
height: 100%;
@include flex-container();
@include data-table-styles();

&__main {
overflow: auto;
@include flex-container();
}

.data-table {
width: 100%;
@include body-2-typography();

&__table {
max-width: 100%;

border-spacing: 0;
border-collapse: separate;
}
}

.data-table__th {
font-weight: bold;

border-top: unset;
border-right: unset;
border-left: unset;
}

.data-table__sticky .data-table__th,
.data-table__td {
height: var(--data-table-row-height);

vertical-align: middle;

border-top: unset;
border-right: unset;
border-left: unset;
}
}

.error {
Expand Down
6 changes: 0 additions & 6 deletions src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,6 @@
&:not(:last-child) {
margin-bottom: var(--diagnostics-section-margin);
}

th {
height: 40px;

vertical-align: middle;
}
}

&__top-queries-row {
Expand Down
38 changes: 35 additions & 3 deletions src/styles/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,13 +94,45 @@
@include body-2-typography();
}

@mixin query-data-table() {
& .data-table {
@mixin data-table-styles {
--data-table-row-height: 40px;
--data-table-cell-align: middle;
--data-table-head-align: middle;

.data-table {
@include body-2-typography();

&__th,
&__td {
vertical-align: middle;
height: var(--data-table-row-height);

border-top: unset;
border-right: unset;
border-left: unset;
}

&__th {
font-weight: bold;
}

&__table {
border-spacing: 0;
border-collapse: separate;
}
}

// DataTable with moving head is actually made of two separate tables
// The second table has header with zero height, so it's actually invisible
// There should not be any height set for this header
.data-table__box_sticky-head_moving {
.data-table__th {
height: unset;
}
}
Comment on lines +124 to +131
Copy link
Member Author

@artemmufazalov artemmufazalov Jun 10, 2024

Choose a reason for hiding this comment

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

Previously styles above were applied only to DataTable with moving head. Now styles apply to all tables: tables with stickyHead moving and fixed, common tables (stickyHead = undefined). moving head exception was explicitly defined with comment

}

@mixin query-data-table() {
& .data-table {
&__box {
.data-table__table-wrapper {
padding-bottom: 20px;
Expand Down