Correct bug introduced in #3657 + address alignment and padding issues. WIP #3673 @5

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index b7a92808ea581bdbaccf4a73319655756cd91e76..d0dbf6cfe39a79e1879ae8e8f4f1cef0a39facb0 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -842,10 +842,10 @@ FluidbookMenu.prototype = {
                 var optimizeHeight = (h < 600);
                 if (optimizeHeight) {
                     $(".fb-slideshow-thumbnails").addClass('fb-slideshow-nothumbs');
-                    m.find('.back').addClass('small');
+                    m.find('.caption, .back').addClass('small');
                 } else {
                     $(".fb-slideshow-thumbnails").removeClass('fb-slideshow-nothumbs');
-                    m.find('.back').removeClass('small');
+                    m.find('.caption, .back').removeClass('small');
                 }
 
                 // When resizing the slideshow, the goal is to fit it into the maximum modal height (stored in 'h').
@@ -857,18 +857,14 @@ FluidbookMenu.prototype = {
                 if (m.find('.fb-slideshow-thumbnails').length > 0) {
                     thumbnailsHeight = m.find('.fb-slideshow-thumbnails').outerHeight(); // Thumbnail slider height
                 }
-                var offset = 0;
 
                 if (optimizeHeight) {
-                    offset = -headerHeight;
-                    headerHeight = 0;
                     thumbnailsHeight = 0;
                     var contentHeight = h;
                     hasCaption = false;
                 }
 
                 var slideMaxHeight = h - headerHeight - thumbnailsHeight; // Remaining height that main image + caption has to fit into
-                m.find('.content').css({top: offset});
 
                 // Process each slide and calculate optimal height for image and slide container
                 m.find('.fb-slideshow-slide').each(function () {

diff --git a/js/libs/fluidbook/fluidbook.slideshow.js b/js/libs/fluidbook/fluidbook.slideshow.js
index a1fe3cf4da5c1906e22c4c38684eb9fcfde9dc8f..fa9e1c3e4dae9e884fd3916cf764923e7ab81417 100644 (file)
--- a/js/libs/fluidbook/fluidbook.slideshow.js
+++ b/js/libs/fluidbook/fluidbook.slideshow.js
@@ -17,9 +17,7 @@ FluidbookSlideshow.prototype = {
 
         this.numSlides = $slideshow.find('img').length;
 
-        console.log(this.numSlides);
-
-        showThumbnails = showThumbnails && numSlides > 1;
+        showThumbnails = showThumbnails && this.numSlides > 1;
 
         var openIndex = parseInt($slideshow.attr('data-open-index'));
         if (isNaN(openIndex)) {

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 735ad21c8a9dd047431deb733f53ac59690e627d..196fc7e9b02e652c573f763c3bcc0e6874357bd9 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1720,6 +1720,11 @@ html.ios body.portrait #interface {
     width: 100%;
     height: 60px;
 
+    &.small {
+      padding: 5px @menu-padding;
+      height: 30px;
+    }
+
     &.h0 {
       height: 0;
       padding: 0;
@@ -2867,4 +2872,4 @@ body > input {
 
 @import "mobilefirst.less";
 @import "tabs.less";
-@import "widget.less";
\ No newline at end of file
+@import "widget.less";

diff --git a/style/fluidbook.slideshow.less b/style/fluidbook.slideshow.less
index 4922aed6bc257c567aa86fca4766cc91a4a6a2c5..108f989c6964b26fadc5d8e8d632ae92bc828611 100644 (file)
--- a/style/fluidbook.slideshow.less
+++ b/style/fluidbook.slideshow.less
@@ -15,11 +15,14 @@
 
   img {
     max-width: 100%;
+    align-self: center; // Stops IE11 distorting the image
   }
 
   &-slide {
     position: relative;
-    display: block;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
     text-align: center;
     //visibility: hidden; // Hide until JS can resize the images to avoid flicker