From d0eb8bfe20f8cf1dbc9e94d9eb82dcfbdf6af149 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Thu, 30 Mar 2023 15:44:56 +0200 Subject: [PATCH] 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. --- lib/scripts/media.js | 27 ++------------------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/lib/scripts/media.js b/lib/scripts/media.js index fda64635cc..5005c3b78a 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -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, don’t 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'); }, /**