Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Fixing scrolly bug on mobile

Browse Source 
Summary:
On mobile view not all rows are rendered when a section is expanded.
Scrolly component calculates height of the GridView too soon (before animation is
completed). With this change on mobile view we always take the screen height for
calculation.

A similar bug was on Card List, where cards were squeezed and their height was
calculated to soon.

Test Plan: Added test

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3748
This commit is contained in:
Jarosław Sadziński
2023-01-04 17:37:32 +01:00
parent cd72a54bbb
commit d107810127
4 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/client/lib/koDomScrolly.js
View File

@@ -274,9 +274,9 @@ Scrolly.prototype.addPane = function(containerElem, options, itemCreateFunc) {
/**
* Tells Scrolly to call updateSize after things have had a chance to render.
*/
Scrolly.prototype.scheduleUpdateSize = function() {
Scrolly.prototype.scheduleUpdateSize = function(overrideHeight) {
if (!this.isDisposed() && !this.delayedUpdateSize.isPending()) {
this.delayedUpdateSize.schedule(0, this.updateSize, this);
this.delayedUpdateSize.schedule(0, this.updateSize.bind(this, overrideHeight), this);
}
};
@@ -284,15 +284,16 @@ Scrolly.prototype.scheduleUpdateSize = function() {
* Measures the size of the panes and adjusts Scrolly parameters for how many rows to render.
* This should be called as soon as all Scrolly panes have been attached to the Document, and any
* time their outer size changes.
* Pass in an overrideHeight to use instead of the current height of the panes.
*/
Scrolly.prototype.updateSize = function() {
Scrolly.prototype.updateSize = function(overrideHeight) {
this.resetHeights();
this.shownHeight = Math.max(0, Math.max.apply(null, this.panes.map(function(pane) {
return pane.container.clientHeight;
})));
// Update counts of rows that are shown.
var numVisible = Math.max(1, Math.ceil(this.shownHeight / this.minRowHeight));
var numVisible = Math.max(1, Math.ceil((overrideHeight ?? this.shownHeight) / this.minRowHeight));
this.numBuffered = 5;
this.numRendered = numVisible + 2 * this.numBuffered;