added bg for transparent images

added width and height below images in diff

3 files changed, 19 insertions, 1 deletions

diff --git a/app/assets/images/trans_bg.gif b/app/assets/images/trans_bg.gif
new file mode 100644
index 00000000000..c7e98e044f5
--- /dev/null
+++ b/app/assets/images/trans_bg.gif
diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss
index 440bfed7b58..9cce5bd0389 100644
--- a/app/assets/stylesheets/sections/commits.scss
+++ b/app/assets/stylesheets/sections/commits.scss
@@ -133,9 +133,12 @@
     .image {
       display: inline-block;
       margin:50px;
-      padding:1px;
       max-width:400px;
 
+      img{
+        background: url('trans_bg.gif');
+      }
+
       &.diff_removed {
         img{
           border: 1px solid #C00;
diff --git a/app/views/commit/show.html.haml b/app/views/commit/show.html.haml
index d12fff96835..432d55b19e3 100644
--- a/app/views/commit/show.html.haml
+++ b/app/views/commit/show.html.haml
@@ -7,4 +7,19 @@
 :javascript
   $(function(){
     PerLineNotes.init();
+    var w, h;
+    $('.diff_file').each(function(){
+      $('.image.diff_removed img', this).on('load', $.proxy(function(event){
+        var w = event.currentTarget.naturalWidth
+          , h = event.currentTarget.naturalHeight;
+        $('.image.diff_removed .image-info', this).append(' | <b>W:</b> ' + w + 'px | <b>H:</b> ' + h + 'px');
+      }, this));
+      $('.image.diff_added img', this).on('load', $.proxy(function(event){
+        var w = event.currentTarget.naturalWidth
+          , h = event.currentTarget.naturalHeight;
+        $('.image.diff_added .image-info', this).append(' | <b>W:</b> ' + w + 'px | <b>H:</b> ' + h + 'px');
+      }, this));
+      
+    });
+    
   });