scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 14:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add dynamic card placeholder calculation to prevent scrollbars [SCI-9068]

Browse source
This commit is contained in:
sboursen-scinote 2023-09-20 13:56:53 +02:00
parent 9966229324
commit 1aaea77070
5 changed files with 44 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/projects/index.js
View file

@ -7,7 +7,8 @@
// - refresh project users tab after manage user modal is closed
// - refactor view handling using library, ex. backbone.js
/* global HelperModule dropdownSelector Sidebar Turbolinks filterDropdown InfiniteScroll AsyncDropdown GLOBAL_CONSTANTS */
/* global HelperModule dropdownSelector Turbolinks filterDropdown InfiniteScroll
AsyncDropdown GLOBAL_CONSTANTS loadPlaceHolder */
/* eslint-disable no-use-before-define */
var ProjectsIndex = (function() {
@ -403,14 +404,6 @@ var ProjectsIndex = (function() {
});
}
function loadPlaceHolder() {
let palceholder = '';
$.each(Array(pageSize), function() {
palceholder += $('#projectPlaceholder').html();
});
$(palceholder).insertAfter($(cardsWrapper).find('.table-header'));
}
function initCardData(viewContainer, data) {
viewContainer.data('projects-cards-url', data.projects_cards_url);
viewContainer.removeClass('no-results no-data');
@ -447,7 +440,7 @@ var ProjectsIndex = (function() {
var viewContainer = $(cardsWrapper);
var cardsUrl = viewContainer.data('projects-cards-url');
loadPlaceHolder();
loadPlaceHolder($(cardsWrapper), $('#projectPlaceholder'), '.project-placeholder');
$.ajax({
url: cardsUrl,
type: 'GET',

13
app/assets/javascripts/projects/show.js
View file

@ -1,4 +1,5 @@
/* global animateSpinner filterDropdown Turbolinks HelperModule InfiniteScroll AsyncDropdown GLOBAL_CONSTANTS */
/* global animateSpinner filterDropdown Turbolinks HelperModule InfiniteScroll AsyncDropdown
GLOBAL_CONSTANTS loadPlaceHolder */
/* eslint-disable no-use-before-define */
(function() {
const pageSize = GLOBAL_CONSTANTS.DEFAULT_ELEMENTS_PER_PAGE;
@ -54,14 +55,6 @@
});
}
function loadPlaceHolder() {
let palceholder = '';
$.each(Array(pageSize), function() {
palceholder += $('#experimentPlaceholder').html();
});
$(palceholder).insertAfter($(cardsWrapper).find('.table-header'));
}
function initCardData(viewContainer, data) {
viewContainer.find('.card, .no-results-container, .no-data-container').remove();
viewContainer.removeClass('no-results no-data');
@ -96,7 +89,7 @@
var viewContainer = $(cardsWrapper);
var cardsUrl = viewContainer.data('experiments-cards-url');
loadPlaceHolder();
loadPlaceHolder($(cardsWrapper), $('#experimentPlaceholder'), '.experiment-placeholder');
$.ajax({
url: cardsUrl,
type: 'GET',

37
app/assets/javascripts/shared/card_placeholder.js Normal file
View file

@ -0,0 +1,37 @@
const loadPlaceHolder = function($cardsWrapper, $placeholderTemplate, placeholder, options = { gridGap: 25, rowsPerCard: 4, minPlaceholderCardHeight: 50 }) {
const { gridGap, rowsPerCard, minPlaceholderCardHeight } = options;
const windowHeight = window.innerHeight;
const placeholderHTML = $placeholderTemplate.html();
const tableHeader = $cardsWrapper.find('.table-header');
let cardsWrapperBottom = $cardsWrapper.get(0).getBoundingClientRect().bottom;
$(placeholderHTML).insertAfter(tableHeader);
let cellCounter = 1;
let totalCellCount = -Infinity;
let placeholderCardHeight = Math.max($cardsWrapper.find(placeholder).outerHeight(), minPlaceholderCardHeight);
if ($cardsWrapper.hasClass('list')) {
placeholderCardHeight = parseInt(window.getComputedStyle($cardsWrapper.get(0))
.getPropertyValue('grid-template-rows').split(' ')[0], 0);
}
while (cardsWrapperBottom < windowHeight) {
$(placeholderHTML).insertAfter(tableHeader);
cardsWrapperBottom = $cardsWrapper.get(0).getBoundingClientRect().bottom;
const columnsCount = window.getComputedStyle($cardsWrapper.get(0))
.getPropertyValue('grid-template-columns').split(' ').length;
const rowsCount = window.getComputedStyle($cardsWrapper.get(0))
.getPropertyValue('grid-template-rows').split(' ').length / rowsPerCard;
totalCellCount = columnsCount * rowsCount;
cellCounter += 1;
if ($cardsWrapper.hasClass('list')
&& cardsWrapperBottom + placeholderCardHeight >= windowHeight) {
break;
} else if (cardsWrapperBottom + placeholderCardHeight + gridGap >= windowHeight
&& cellCounter >= totalCellCount) {
break;
}
}
};

1
app/assets/stylesheets/report_index.scss
View file

@ -22,7 +22,6 @@
.reports-datatable {
--content-header-size: 3.5rem;
height: calc(100vh - var(--navbar-height) - var(--content-header-size));
#reports-table_wrapper {
display: flex;

1
config/initializers/assets.rb
View file

@ -47,6 +47,7 @@ Rails.application.config.assets.precompile += %w(emojione.js)
Rails.application.config.assets.precompile += %w(emojionearea.js)
Rails.application.config.assets.precompile += %w(eventPause-min.js)
Rails.application.config.assets.precompile += %w(sidebar.js)
Rails.application.config.assets.precompile += %w(shared/card_placeholder.js)
Rails.application.config.assets.precompile += %w(projects/index.js)
Rails.application.config.assets.precompile += %w(projects/canvas.js)
Rails.application.config.assets.precompile += %w(experiments/dropdown_actions.js)