From d41452a76693118265a65577abefa36fd16ac09f Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 17 May 2013 16:03:40 +0400
Subject: [PATCH] fixed zooming, now uses the correct proportions...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/base.js    | 14 ++++++++++----
 ui/index.html |  5 +++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/ui/base.js b/ui/base.js
index c9ad784e..fcdbf1f9 100755
--- a/ui/base.js
+++ b/ui/base.js
@@ -132,8 +132,12 @@ function getRelativeVisualPosition(outer, inner){
 
 
 // Returns the image size (width) as viewed on screen...
-function getVisibleImageSize(){
-	return $('.image').outerWidth() * getElementScale($('.ribbon-set'))
+//
+// NOTE: dim can be either 'height' or 'width', this dimension will be 
+// 		used as image "diameter" (default: width)
+function getVisibleImageSize(dim){
+	dim = dim != 'height' ? 'outerWidth' : 'outerHeight'
+	return $('.image')[dim]() * getElementScale($('.ribbon-set'))
 }
 
 
@@ -788,15 +792,17 @@ function fitNImages(n){
 }
 
 
+// NOTE: here we measure image height as width may change depending on 
+// 		proportions...
 function zoomIn(){
-	var w = getScreenWidthInImages()
+	var w = getScreenWidthInImages(getVisibleImageSize('height'))
 	if(w > 1){
 		w = w / ZOOM_SCALE
 		fitNImages(w >= 1 ? w : 1)
 	}
 }
 function zoomOut(){
-	var w = getScreenWidthInImages()
+	var w = getScreenWidthInImages(getVisibleImageSize('height'))
 	if(w <= MAX_SCREEN_IMAGES){
 		w = w * ZOOM_SCALE
 		fitNImages(w <= MAX_SCREEN_IMAGES ? w : MAX_SCREEN_IMAGES)
diff --git a/ui/index.html b/ui/index.html
index 7a0d3fab..050e0f9d 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -257,16 +257,17 @@ body {
 
 .single-image-mode.viewer .image {
 	background-color: transparent;
-	border: none;
+	/* NOTE: need to keep a distance from screen borders... */
+	border: solid transparent 2px;
 }
 .single-image-mode.viewer .image:not(.current) {
 	/* XXX for some reason this breaks the alignment on large magnifications...
 	display: none;
 	*/
-	visibility: hidden;
 	/* XXX this makes images pass through the :visible filter...
 	opacity: 0;
 	*/
+	visibility: hidden;
 }