Skip to content

Commit

Permalink
simplify media manager panel height
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
splitbrain committed Mar 30, 2023
1 parent 66966f8 commit d0eb8bf
Showing 1 changed file with 2 additions and 25 deletions.
27 changes: 2 additions & 25 deletions lib/scripts/media.js
Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -478,8 +476,6 @@ var dw_mediamanager = {
},

window_resize: function () {
dw_mediamanager.resize();

dw_mediamanager.opacity_slider();
dw_mediamanager.portions_slider();
},
Expand Down Expand Up @@ -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');
},

/**
Expand Down

0 comments on commit d0eb8bf

Please sign in to comment.