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.

1 files changed, 2 insertions, 25 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index fda64635c..5005c3b78 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');
     },
 
     /**