From 5c767656236ea5066f291ece1bf260aa2bcd6aa5 Mon Sep 17 00:00:00 2001
From: "Bartosz \"Simek\" Kaszubowski" <gosimek@gmail.com>
Date: Thu, 31 Oct 2013 00:12:53 +0100
Subject: [PATCH] eliminate images "jumping" effect

after loading the properties in image viewer
---
 src/editor/ImageViewer.js         |  2 +-
 src/htmlContent/image-holder.html |  6 ++++--
 src/styles/brackets.less          | 12 ++++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js
index 258c1aca8d3..5b84e84c945 100644
--- a/src/editor/ImageViewer.js
+++ b/src/editor/ImageViewer.js
@@ -98,7 +98,7 @@ define(function (require, exports, module) {
         $("#img-preview").on("load", function () {
             // add dimensions and size
             _naturalWidth = this.naturalWidth;
-            var dimensionString = _naturalWidth + " x " + this.naturalHeight + " " + Strings.UNIT_PIXELS;
+            var dimensionString = _naturalWidth + " &times; " + this.naturalHeight + " " + Strings.UNIT_PIXELS;
             // get image size
             var fileEntry = new NativeFileSystem.FileEntry(fullPath);
             fileEntry.getMetadata(
diff --git a/src/htmlContent/image-holder.html b/src/htmlContent/image-holder.html
index 178d6f2c91f..ee616d352bc 100644
--- a/src/htmlContent/image-holder.html
+++ b/src/htmlContent/image-holder.html
@@ -1,7 +1,9 @@
 <div id="image-holder">
     <div id="img-centering">
-        <div id="img-data"></div>
-        <div id="img-path"></div>
+        <div id="img-header">
+            <div id="img-data"></div>
+            <div id="img-path"></div>	
+        </div>
         <div id="img">
             <div id="img-scale"></div>
             <img id="img-preview" src="file:///{{fullPath}}">
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 17647a088d1..39b5fbd6f9e 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -270,6 +270,13 @@ a, img {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
         max-height: 90%;
     }
+
+    #img-header {
+        display: inline-block;
+        width: 100%;
+        height: 38px;
+        margin-bottom: 15px;
+    }
     
     #img-data,
     #img-path {
@@ -281,10 +288,7 @@ a, img {
     #img-path::selection {
         background: @selection-color-focused;
     }
-    
-    #img-path {
-        margin: 0 0 15px;
-    }
+
     #img {
         position: relative;
     }