From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 1 Jun 2017 15:30:54 +0000 (+0200)
Subject: wip #1388 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=74553f979e375627dd3819180d3f78f503ab8876;p=fluidbook-html5.git

wip #1388 @1.5
---

diff --git a/images/interface.svg b/images/interface.svg
index 1386df0c..89ec2040 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -1,6 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <symbol viewBox="0 0 17 17" id="interface-close">
-        <path id="p1" class="fill-c-menu-text" d="M0.01472 2.13604L2.13604 0.014720000000000066L16.98528 14.86396L14.863959999999999 16.98528Z" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path>
-        <path id="p2" class="fill-c-menu-text" d="M2.13604 16.98528L0.014720000000000066 14.863959999999999L14.86396 0.014719999999998734L16.98528 2.1360399999999986Z" fill-opacity="1" transform="matrix(1,0,0,1,0,0)"></path>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+
+    <symbol id="interface-close" viewBox="0 0 512 512">
+        <path d="m0 68l68-68 476 476-68 68z m68 476l-68-68 476-476 68 68z"/>
     </symbol>
-</svg>
\ No newline at end of file
+
+</svg>
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 3374bcee..dad9d49c 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -154,7 +154,7 @@ FluidbookLinks.prototype = {
             z.show();
 
             var s = (zoomWidth / box.width);
-            $(".zoomPopupClose").css('opacity', 0).transform({scale: 1 / s, origin: ['100%', '0', 0]});
+            $(".zoomPopupClose").css('opacity', 0).transform({scale: (0.5 * this.fluidbook.resize.interfaceScale) / s, origin: ['100%', '0', 0]});
             setTimeout(function () {
                 z.css({
                     boxShadow: '0 0 100px rgba(0,0,0,0.3)',
@@ -163,7 +163,7 @@ FluidbookLinks.prototype = {
             }, 50);
 
             setTimeout(function () {
-                $(".zoomPopupClose").css('opacity', '');
+                $(".zoomPopupClose").css('opacity', '1');
             }, 500);
 
             z.data('scale', zoomScale);
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 85c099dd..560c559a 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -542,8 +542,7 @@ FluidbookMenu.prototype = {
             default:
                 break;
         }
-
-
+        
         var captionHeight = m.find('.caption').outerHeight();
         css = {};
         ccss = {};
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index c1806cbf..b3baa1bc 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -14,6 +14,7 @@ function FluidbookResize(fluidbook) {
     this.orientation = '';
     this.textScale = 2;
     this.bookScale = 1;
+    this.interfaceScale = 1;
     this.ww = $(window).width();
     this.hh = $(window).height();
     this.init();
@@ -72,6 +73,7 @@ FluidbookResize.prototype = {
 
             interfaceScale = Math.min(1, this.ww / refWidth, this.hh / this.referenceHeight);
         }
+        this.interfaceScale = interfaceScale;
 
         var navScale = interfaceScale * parseInt(this.fluidbook.datas.mobileNavScale) / 100;
         var cssInterfaceScale = [interfaceScale, interfaceScale];
diff --git a/js/libs/fluidbook/fluidbook.utils.js b/js/libs/fluidbook/fluidbook.utils.js
index 48b23016..f02f3bf5 100644
--- a/js/libs/fluidbook/fluidbook.utils.js
+++ b/js/libs/fluidbook/fluidbook.utils.js
@@ -56,6 +56,11 @@ function getSpriteIcon(icon, attrs) {
     if (attrs.viewBox == null) {
         attrs.viewBox = $('svg symbol#' + icon).get(0).attributes.viewBox.value;
     }
+    if (attrs.class == null) {
+        attrs.class = icon;
+    } else {
+        attrs.class += ' ' + icon;
+    }
     $.each(attrs, function (k, v) {
         a.push(k + '="' + v + '"');
     });
diff --git a/style/fluidbook.less b/style/fluidbook.less
index b368a077..dbe655d3 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -595,7 +595,7 @@ header {
 
 #search input {
 	padding: 5px;
-	border-radius: 5px;
+	border-radius: 1px;
 	border: 0;
 	height: 22px;
 	width: 150px;
@@ -860,18 +860,14 @@ footer.hidden, header.hidden, #interface.hidden {
 			height: 0;
 			padding: 0;
 			.back {
-				opacity: 0;
-				transition: opacity 300ms;
+				width: 30px;
+				height: 30px;
+				padding: 10px;
+				font-size: 7px;
+				line-height: 10px;
 			}
 		}
 
-		&:hover {
-			.caption {
-				.back {
-					opacity: 1;
-				}
-			}
-		}
 	}
 
 	&[data-menu="webvideo"] {
@@ -1871,7 +1867,8 @@ a.button {
 		z-index: 103;
 		padding: 22px;
 		background-color: @menu-button-background;
-		opacity: 0;
+		color: @menu-text;
+		opacity: 1;
 		transition: opacity 250ms;
 	}
 }
@@ -2064,6 +2061,12 @@ a.button {
 	}
 }
 
+/* SVG Sprite */
+[class^="interface-"], [class*=" interface-"] {
+	display: inline-block;
+	fill: currentColor;
+}
+
 /* Webfonts*/
 
 @font-face {