Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2025-06-13 20:53:59 +00:00
Code Issues Projects Releases Wiki Activity

fix #1035 : Column alignment when zoom font only settings in browser (#1036)

Browse Source 
Use rem value instead of fixed pixel where needed.
Removed inline style 52px for .gridview_data_row_num
This commit is contained in:
Grégoire Cutzach 2024-07-23 14:55:03 +02:00 committed by GitHub
parent d982ca2103
commit 0272b67240
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/client/components/GridView.css
View File

@ -44,7 +44,7 @@
}
.gridview_corner_spacer { /* spacer in .gridview_data_header */
width: 4rem; /* matches row_num width */
width: 52px; /* matches row_num width */
flex: none;
}
@ -68,7 +68,7 @@
position: sticky;
left: 0px;
overflow: hidden;
width: 4rem; /* Also should match width for .gridview_header_corner, and the overlay elements */
width: 52px; /* Also should match width for .gridview_header_corner, and the overlay elements */
flex: none;
border-bottom: 1px solid var(--grist-theme-table-header-border, lightgray);
@ -131,7 +131,7 @@
border-left: 1px solid var(--grist-color-dark-grey);
}
.print-widget .gridview_data_header {
padding-left: 4rem !important;
padding-left: 52px !important;
}
.print-widget .gridview_data_pane .print-all-rows {
display: table-row-group;
@ -155,7 +155,7 @@
}
.gridview_data_corner_overlay {
width: 4rem;
width: 52px;
height: calc(var(--gridview-header-height) + 1px); /* matches gridview_data_header height (+border) */
top: 1px; /* go under 1px border on scrollpane */
border-bottom: 1px solid var(--grist-theme-table-header-border, lightgray);
@ -177,7 +177,7 @@
- frozen-offset: when frozen columns are wider then the screen, we want them to move left initially,
this value is the position where this movement should stop.
*/
left: calc(4em + (var(--frozen-width, 0) - min(var(--frozen-scroll-offset, 0), var(--frozen-offset, 0))) * 1px);
left: calc(52px + (var(--frozen-width, 0) - min(var(--frozen-scroll-offset, 0), var(--frozen-offset, 0))) * 1px);
box-shadow: -6px 0 6px 6px var(--grist-theme-table-scroll-shadow, #444);
/* shadow should only show to the right of it (10px should be enough) */
-webkit-clip-path: polygon(0 0, 10px 0, 10px 100%, 0 100%);
@ -189,7 +189,7 @@
.scroll_shadow_frozen {
height: 100%;
width: 0px;
left: 4em;
left: 52px;
box-shadow: -8px 0 14px 4px var(--grist-theme-table-scroll-shadow, #444);
-webkit-clip-path: polygon(0 0, 10px 0, 10px 100%, 0 100%);
clip-path: polygon(0 0, 28px 0, 24px 100%, 0 100%);
@ -205,7 +205,7 @@
/* this value is the same as for the left shadow - but doesn't need to really on the scroll offset
as this component will be hidden when the scroll starts
*/
left: calc(4em + var(--frozen-width, 0) * 1px);
left: calc(52px + var(--frozen-width, 0) * 1px);
background-color: var(--grist-theme-table-frozen-columns-border, #999999);
z-index: 30;
user-select: none;
@ -226,7 +226,7 @@
}
.gridview_header_backdrop_left {
width: calc(4rem + 1px); /* Matches rowid width (+border) */
width: calc(52px + 1px); /* Matches rowid width (+border) */
height:100%;
top: 1px; /* go under 1px border on scrollpane */
z-index: 10;
@ -311,7 +311,7 @@
/* style header and a data field */
.record .field.frozen {
position: sticky;
left: calc(4em + 1px + (var(--frozen-position, 0) - var(--frozen-offset, 0)) * 1px); /* 4em for row number + total width of cells + 1px for border*/
left: calc(52px + 1px + (var(--frozen-position, 0) - var(--frozen-offset, 0)) * 1px); /* 52px (4em) for row number + total width of cells + 1px for border*/
z-index: 10;
}
/* for data field we need to reuse color from record (add-row and zebra stripes) */

3
app/client/components/GridView.js
View File

@ -69,9 +69,10 @@ const SHORT_CLICK_IN_MS = 500;
// size of the plus width ()
const PLUS_WIDTH = 40;
// size of the row number field (we assume 4rem)
// size of the row number field (we assume 4rem, 1rem = 13px in grist)
const ROW_NUMBER_WIDTH = 52;
/**
* GridView component implements the view of a grid of cells.
*/