added size classes to update paramiters depending on magnification -- if we'll use this more often will need a more flexible system...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/layout.css

@@ -848,6 +848,23 @@ body {
 .dark.viewer .overlay-block .background {
   background: #0a0a0a;
 }
+.large.marks-visible.viewer:not(.single-image-mode) .current.image {
+  border-width: 3px;
+}
+.large.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+  -webkit-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -moz-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -o-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+}
+.small.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+  -webkit-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  -moz-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  -o-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  -ms-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+  transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
+}
 /********************************************************* Overlay ***/
 .overlay-block {
   display: none;

ui/layout.less

@@ -37,6 +37,9 @@
 	-ms-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
 	transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
 }
+.scale (@scale) {
+	.transform(0deg, @scale, @scale)
+}
 .rotate (@deg) {
 	.transform(@deg)
 }
@@ -843,6 +846,18 @@ body {
 }
 
 
+.large.marks-visible.viewer:not(.single-image-mode) .current.image {
+	border-width: 3px;
+}
+.large.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+	.scale(0.7);
+}
+
+.small.marks-visible.viewer:not(.single-image-mode) .marked.image:after {
+	.scale(1.8);
+}
+
+
 
 /********************************************************* Overlay ***/
 

ui/setup.js

@@ -187,6 +187,22 @@ function setupDataBindings(viewer){
 				}
 			}
 
+			// update size classes...
+			// XXX make thresholds global...
+			if(n <= 2.5){
+				$('.viewer')
+					.removeClass('small')
+					.addClass('large')
+			} else if (n >= 6) {
+				$('.viewer')
+					.addClass('small')
+					.removeClass('large')
+			} else {
+				$('.viewer')
+					.removeClass('small')
+					.removeClass('large')
+			}
+
 			// update previews...
 			updateImages()
 		})