issue #43 images align

2 files changed, 30 insertions, 9 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 6c5c2611e..26eb43fc3 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -439,11 +439,6 @@ var dw_mediamanager = {
         }
 
         dw_mediamanager.layout_width = jQuery('#mediamanager__layout').width();
-
-        // rebuild sliders if exists
-        dw_mediamanager.opacity_slider();
-        dw_mediamanager.portions_slider();
-
         $r = jQuery("#mediamanager__layout .layout-resizable, #mediamanager__layout .layout");
 
         var w = 0, wSum = 0, mCount = 0, mArray = [];
@@ -476,6 +471,9 @@ var dw_mediamanager = {
             w += "%";
             jQuery(this).width(w);
         });
+
+        dw_mediamanager.opacity_slider();
+        dw_mediamanager.portions_slider();
     },
 
     /**
@@ -512,6 +510,9 @@ var dw_mediamanager = {
                     w += "%";
                     jQuery(this).width(w);
                 });
+
+                dw_mediamanager.opacity_slider();
+                dw_mediamanager.portions_slider();
             }
         });
 
@@ -579,6 +580,11 @@ var dw_mediamanager = {
     opacity_slider: function () {
         var $slider = jQuery( "#mediamanager__opacity_slider" );
         if (!$slider.length) return;
+
+        var $image = jQuery('#mediamanager__diff_opacity_image1 img');
+        if (!$image.length) return;
+        $slider.width($image.width()-20);
+
         $slider.slider();
         $slider.slider("option", "min", 0);
         $slider.slider("option", "max", 0.999);
@@ -602,18 +608,26 @@ var dw_mediamanager = {
         var $div = jQuery("#mediamanager__diff_layout");
         if (!$div.length) return;
 
+        $div.width('100%');
+        $image2.parent().width('97%');
+        $image1.width('100%');
+        $image2.width('100%');
+
         if ($image1.width() < $div.width()) {
             $div.width($image1.width());
         }
 
         $image2.parent().width('50%');
         $image2.width($image1.width());
+        $image1.width($image1.width());
 
         var $slider = jQuery("#mediamanager__portions_slider");
         if (!$slider.length) return;
+        $slider.width($image1.width()-20);
+
         $slider.slider();
         $slider.slider("option", "min", 0);
-        $slider.slider("option", "max", 100);
+        $slider.slider("option", "max", 97);
         $slider.slider("option", "step", 1);
         $slider.slider("option", "value", 50);
         $slider.bind("slide", function(event, ui) {
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index 49f2901e2..8a42a9e35 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -324,6 +324,10 @@ form.meta textarea.edit {
 
 /* File diff */
 
+#mediamanager__diff {
+    margin-top: 10px;
+}
+
 #mediamanager__diff_table {
     padding: 0;
     margin: 0;
@@ -365,21 +369,24 @@ form.meta textarea.edit {
     left: 0;
 }
 
-#mediamanager__diff_layout div img,
 #mediamanager__diff_opacity_image1,
 #mediamanager__diff_portions_image1 {
+    width: 97%;
+}
+
+#mediamanager__diff_layout div img {
     width: 100%;
 }
 
 #mediamanager__diff_opacity_image2 {
-    width: 100%;
+    width: 97%;
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
 }
 
 #mediamanager__diff_portions_image2 {
-    width: 100%;
+    width: 97%;
     border-right: 1px solid red;
     overflow: hidden;
 }