simplify media manager panel height

The height of the panel was calculated in JavaScript, trying to use the
remaining space. With larger headers that lead to a relatively small
area. In addition the height calculation behaved weirdly on certain
resolutions (in some templates) resulting in a decreasing height on each
image interaction.

This patch simply sets the panel height 60% of the browser window using
the vh unit (which was not available when the media manager was
written).

To keep backward compatibility and not accidentally break a bunch of
templates, the height is still set from JavaScript but only once instead
of updating it on every resize operation.

A proper refactoring of the whole media manager code is still something
we need to tackle in the future, but this change should make it slightly
better.
This commit is contained in:
Andreas Gohr 2023-03-30 15:44:56 +02:00
parent 66966f8dc7
commit d0eb8bfe20
1 changed files with 2 additions and 25 deletions

View File

@ -105,6 +105,7 @@ var dw_mediamanager = {
// less/more recent buttons in media revisions form
.on('submit', '.btn_newer, .btn_older', dw_mediamanager.details);
dw_mediamanager.resize();
dw_mediamanager.update_resizable();
dw_mediamanager.layout_width = $page.width();
jQuery(window).on('resize', dw_mediamanager.window_resize);
@ -373,9 +374,6 @@ var dw_mediamanager = {
.toggleClass('rows', new_type === 'rows')
.toggleClass('thumbs', new_type === 'thumbs');
}], new_type);
// FIXME: Move to onchange handler (opt[2])?
dw_mediamanager.resize();
},
set_fileview_sort: function (new_sort) {
@ -478,8 +476,6 @@ var dw_mediamanager = {
},
window_resize: function () {
dw_mediamanager.resize();
dw_mediamanager.opacity_slider();
dw_mediamanager.portions_slider();
},
@ -519,33 +515,14 @@ var dw_mediamanager = {
// set width of file panel
$filePanel.width(relWidthNonResizable + '%');
dw_mediamanager.resize();
dw_mediamanager.opacity_slider();
dw_mediamanager.portions_slider();
}
});
dw_mediamanager.resize();
},
resize: function () {
var $contents = jQuery('#mediamanager__page').find('div.panelContent'),
height = jQuery(window).height() - jQuery(document.body).height() +
Math.max.apply(null, jQuery.map($contents, function (v) {
return jQuery(v).height();
}));
// If the screen is too small, dont try to resize
if (height < dw_mediamanager.minHeights[dw_mediamanager.view_opts.list]) {
$contents.add(dw_mediamanager.$resizables()).height('auto');
} else {
$contents.height(height);
dw_mediamanager.$resizables().each(function () {
var $this = jQuery(this);
$this.height(height + $this.find('div.panelContent').offset().top - $this.offset().top);
});
}
jQuery('#mediamanager__page').find('div.panelContent').css('height', '60vh');
},
/**