diff options
| -rw-r--r-- | inc/template.php | 6 | ||||
| -rw-r--r-- | lib/scripts/media.js | 40 | ||||
| -rw-r--r-- | lib/tpl/default/mediamanager.css | 14 |
3 files changed, 36 insertions, 24 deletions
diff --git a/inc/template.php b/inc/template.php index 13cec438c..2a840a01b 100644 --- a/inc/template.php +++ b/inc/template.php @@ -1455,10 +1455,10 @@ function tpl_media() { if (isset($JUMPTO)) $image = $JUMPTO; if (isset($REV) && !$JUMPTO) $rev = $REV; - echo '<div class="mediamanager" id="id-mediamanager">'; + echo '<div id="mediamanager__page">'; echo '<div id="mediamanager__layout">'; - echo '<div id="mediamanager__layout_namespaces" class="layout resizable" >'; + echo '<div id="mediamanager__layout_namespaces" class="layout-resizable" >'; html_msgarea(); echo '<div class="mediamanager-tabs">'; echo '<a href="#" class="selected">'.hsc($lang['namespaces']).'</a>'; @@ -1472,7 +1472,7 @@ function tpl_media() { echo '</div>'; echo '</div>'; - echo '<div id="mediamanager__layout_list" class="layout resizable" >'; + echo '<div id="mediamanager__layout_list" class="layout-resizable" >'; tpl_fileList(); echo '</div>'; diff --git a/lib/scripts/media.js b/lib/scripts/media.js index c5e6afc9b..00a4821d0 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -380,27 +380,38 @@ var dw_mediamanager = { }, update_resizable: function (count_width) { - jQuery(".layout").resizable({ handles: 'e' }); - jQuery(".layout").bind("resize", function(event, ui) { - var w = 0; - jQuery(".layout").each(function() { - w += jQuery(this).width(); - }); - jQuery('#id-mediamanager-layout').width(w+30); - }); + $resizable = jQuery("#mediamanager__layout .layout-resizable"); + + $resizable.resizable({ handles: 'e' , + resize: function(event, ui){ + var w = 0; + $resizable.each(function() { + w += jQuery(this).width(); + }); + wSum = w + parseFloat(jQuery('#mediamanager__layout_detail').css("min-width")); - var w = 0; - jQuery(".layout").each(function() { - if (count_width) jQuery(this).width(jQuery(this).width()); - w += jQuery(this).width(); + // max width of resizable column + var maxWidth = 0.95 * jQuery('#mediamanager__layout').width() - wSum + jQuery(this).width() - 30; + $resizable.resizable( "option", "maxWidth", maxWidth ); + + // percentage width of the first two columns + var wLeft = ( 100*(w+30) / jQuery('#mediamanager__layout').width() ); + + // width of the third column + var wRight = 95-wLeft; + wRight += "%"; + jQuery('#mediamanager__layout_detail').width(wRight); + } }); - jQuery('#id-mediamanager-layout').width(w+30); var windowHeight = jQuery(window).height(); var height = windowHeight - 300; - jQuery('.scroll-container').each(function (i) { + jQuery('#mediamanager__layout .scroll-container').each(function (i) { jQuery(this).height(height); }); + $resizable.each(function() { + jQuery(this).height(height+100); + }); }, opacity_slider: function () { @@ -711,6 +722,7 @@ jQuery(document).ready(function() { dw_mediamanager.update_resizable(1); dw_mediamanager.opacity_slider(); dw_mediamanager.portions_slider(); + jQuery(window).resize(dw_mediamanager.update_resizable); }); jQuery(dw_mediamanager.init); diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css index 02c732ce7..dc12dcbec 100644 --- a/lib/tpl/default/mediamanager.css +++ b/lib/tpl/default/mediamanager.css @@ -1,11 +1,11 @@ /* Layout */ -.mediamanager { +#mediamanager__page { width: 100%; - overflow-x: auto; } -#mediamanager__layout .layout { +#mediamanager__layout .layout, +#mediamanager__layout .layout-resizable { margin-left: 5px; margin-right: 5px; float: left; @@ -31,18 +31,18 @@ } #mediamanager__layout_namespaces { - width: 25%; + width: 15%; min-width: 125px; } #mediamanager__layout_list { - width: 40%; + width: 47%; min-width: 375px; } #mediamanager__layout_detail { - width: 30%; - min-width: 200px; + width: 33%; + min-width: 265px; } .ui-resizable-e:hover { |