From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 2 Jun 2020 16:44:20 +0000 (+0200)
Subject: Correct bug introduced in #3657 + address alignment and padding issues. WIP #3673 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f1b59a912951040c41e48c954c7d2be1ca678f4c;p=fluidbook-html5.git

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 b7a92808..d0dbf6cf 100644
--- 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 a1fe3cf4..fa9e1c3e 100644
--- 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 735ad21c..196fc7e9 100644
--- 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 4922aed6..108f989c 100644
--- 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