]> _ Git - fluidbook-html5.git/commitdiff
wip #1388 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 1 Jun 2017 15:30:54 +0000 (17:30 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 1 Jun 2017 15:30:54 +0000 (17:30 +0200)
images/interface.svg
js/libs/fluidbook/fluidbook.links.js
js/libs/fluidbook/fluidbook.menu.js
js/libs/fluidbook/fluidbook.resize.js
js/libs/fluidbook/fluidbook.utils.js
style/fluidbook.less

index 1386df0c712ba8b0aebd410c534eb44526fbce89..89ec20406ee059708580181d703220fbbe8a5a04 100644 (file)
@@ -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>
index 3374bcee313f04a9abc03080f335fc334ce7d152..dad9d49c972055d1ead4aaa10c6b0c7003b3e58b 100644 (file)
@@ -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);
index 85c099ddb5abd7a243db920e64fab7c3d95dc243..560c559a9d2a2950ea3db8da162d485807a24ec4 100644 (file)
@@ -542,8 +542,7 @@ FluidbookMenu.prototype = {
             default:
                 break;
         }
-
-
+        
         var captionHeight = m.find('.caption').outerHeight();
         css = {};
         ccss = {};
index c1806cbf06e9cd127549150361086e131f8ec79d..b3baa1bcea5d7845fc624ce15bfdb23f8c250511 100644 (file)
@@ -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];
index 48b2301673af64e999d3db56c2be8e66a1a1a18a..f02f3bf56021679f73d05211a5b474d325e41b51 100644 (file)
@@ -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 + '"');
     });
index b368a07749a1f1755f2fb4e8bf4c2e52a81f9f86..dbe655d36967a397c98b1f9cf687477c56b7f2d6 100644 (file)
@@ -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 {