From 455f917cd2c9ed7b266b6f8506e8665bba672e79 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 10 May 2019 15:55:58 +0200
Subject: [PATCH] wait #2711 @0.5

---
 js/libs/fluidbook/fluidbook.menu.js  |  4 ++
 js/libs/fluidbook/fluidbook.print.js | 96 ++++++++++++++++------------
 style/mobilefirst.less               | 10 ++-
 3 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index c5392671..f39585de 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -845,6 +845,10 @@ FluidbookMenu.prototype = {
                     w = 560;
                 }
 
+                if (m.find('.print-dialogue').hasClass('compact')) {
+                    w = 500;
+                }
+
                 // Enable fullscreen when there's no longer enough width for the popup
                 if (ww < w) {
                     fullscreen = true;
diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index 0a994bf7..835a2b26 100644
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -76,8 +76,10 @@ FluidbookPrint.prototype = {
 
     getView: function (mode) {
 
+        var compact = this.fluidbook.mobilefirst.enabled;
+
         // Ensure mode is either download or print (default)
-        mode = (mode == 'download' ? mode : 'print');
+        mode = (mode === 'download' ? mode : 'print');
 
         // Todo: handle RTL differences for page numbers? See fluidbook.index.js for example
         var leftPageNumber = this.fluidbook.getPhysicalPageNumberOfSide('left'),
@@ -92,23 +94,25 @@ FluidbookPrint.prototype = {
             view = '';
 
         view += '<div class="content">';
-        view += '<div class="print-dialogue">';
+        view += '<div class="print-dialogue' + (compact ? ' compact' : '') + '">';
 
         // NOTE: Each option has two labels so thumbnails are also clickable and so it works with the custom radio inputs
 
         // Left Page (empty when on first page)
         if (!isFirstPage) {
             view += '<div class="print-option">';
-            view += '<label for="leftPage">';
-            view += '<div class="doubleThumb">';
-            view += '<div class="thumb left">';
-            view += this.fluidbook.loader.getThumbImage(leftPageNumber,  true);
-            view += '</div>'; // .thumb
-            if (!isSinglePageMode && !isLastPage) {
-                view += '<div class="thumb right blank"><div class="blank-mask"></div></div>';
+            if (!compact) {
+                view += '<label for="leftPage">';
+                view += '<div class="doubleThumb">';
+                view += '<div class="thumb left">';
+                view += this.fluidbook.loader.getThumbImage(leftPageNumber, true);
+                view += '</div>'; // .thumb
+                if (!isSinglePageMode && !isLastPage) {
+                    view += '<div class="thumb right blank"><div class="blank-mask"></div></div>';
+                }
+                view += '</div>'; // .doubleThumb
+                view += '</label>';
             }
-            view += '</div>'; // .doubleThumb
-            view += '</label>';
             view += '<input type="radio" name="pageChoice" value="left" id="leftPage">';
             view += '<label for="leftPage" class="print-label-text">' + (isLastPage || isSinglePageMode ? __('Current page') : __('left page')) + '</label>';
             view += '</div>'; // .print-option
@@ -117,16 +121,18 @@ FluidbookPrint.prototype = {
         // Right Page (empty when when on last page or in portrait / single page mode)
         if (!isLastPage && !isSinglePageMode) {
             view += '<div class="print-option">';
-            view += '<label for="rightPage">';
-            view += '<div class="doubleThumb">';
-            if (!isFirstPage) {
-                view += '<div class="thumb left blank"><div class="blank-mask"></div></div>';
+            if (!compact) {
+                view += '<label for="rightPage">';
+                view += '<div class="doubleThumb">';
+                if (!isFirstPage) {
+                    view += '<div class="thumb left blank"><div class="blank-mask"></div></div>';
+                }
+                view += '<div class="thumb ' + (isFirstPage ? 'left' : 'right') + '">'; // Only shows 1 page when on first page
+                view += this.fluidbook.loader.getThumbImage(rightPageNumber, true);
+                view += '</div>'; // .thumb
+                view += '</div>'; // .doubleThumb
+                view += '</label>';
             }
-            view += '<div class="thumb ' + (isFirstPage ? 'left' : 'right') + '">'; // Only shows 1 page when on first page
-            view += this.fluidbook.loader.getThumbImage(rightPageNumber,  true);
-            view += '</div>'; // .thumb
-            view += '</div>'; // .doubleThumb
-            view += '</label>';
             view += '<input type="radio" name="pageChoice" value="right" id="rightPage">';
             view += '<label for="rightPage" class="print-label-text">' + (isFirstPage ? __('Current page') : __('right page')) + '</label>';
             view += '</div>'; // .print-option
@@ -135,16 +141,18 @@ FluidbookPrint.prototype = {
         // Double Page
         if (!isFirstPage && !isLastPage && !isSinglePageMode) {
             view += '<div class="print-option">';
-            view += '<label for="doublePage">';
-            view += '<div class="doubleThumb">';
-            view += '<div class="thumb left">';
-            view += this.fluidbook.loader.getThumbImage(leftPageNumber, true);
-            view += '</div>';
-            view += '<div class="thumb right">';
-            view += this.fluidbook.loader.getThumbImage(rightPageNumber, true);
-            view += '</div>'; // .thumb
-            view += '</div>'; // .doubleThumb
-            view += '</label>';
+            if (!compact) {
+                view += '<label for="doublePage">';
+                view += '<div class="doubleThumb">';
+                view += '<div class="thumb left">';
+                view += this.fluidbook.loader.getThumbImage(leftPageNumber, true);
+                view += '</div>';
+                view += '<div class="thumb right">';
+                view += this.fluidbook.loader.getThumbImage(rightPageNumber, true);
+                view += '</div>'; // .thumb
+                view += '</div>'; // .doubleThumb
+                view += '</label>';
+            }
             view += '<input type="radio" name="pageChoice" value="double" id="doublePage">'
             view += '<label for="doublePage" class="print-label-text">' + __('spread') + '</label>';
             view += '</div>'; // .print-option
@@ -153,13 +161,15 @@ FluidbookPrint.prototype = {
         // Full Brochure
         if (this.fluidbook.datas.printFullBrochure) {
             view += '<div class="print-option">';
-            view += '<label for="allPages">';
-            view += '<div class="doubleThumb">';
-            view += '<div class="thumb left">';
-            view += this.fluidbook.loader.getThumbImage(1,  true);
-            view += '</div>'; // .thumb
-            view += '</div>'; // .doubleThumb
-            view += '</label>';
+            if (!compact) {
+                view += '<label for="allPages">';
+                view += '<div class="doubleThumb">';
+                view += '<div class="thumb left">';
+                view += this.fluidbook.loader.getThumbImage(1, true);
+                view += '</div>'; // .thumb
+                view += '</div>'; // .doubleThumb
+                view += '</label>';
+            }
             view += '<input type="radio" name="pageChoice" value="all" id="allPages">'
             view += '<label for="allPages" class="print-label-text">' + __('entire brochure') + '</label>';
             view += '</div>'; // .print-option
@@ -171,11 +181,13 @@ FluidbookPrint.prototype = {
                 bookmarksDisabled = hasBookmarks ? '' : 'disabled';
 
             view += '<div class="print-option bookmarks-option ' + bookmarksDisabled + '">';
-            view += '<label for="bookmarkedPages">';
-            view += '<div class="doubleThumb bookmarks">';
-            view += this.fluidbook.bookmarks.getPrintPreview();
-            view += '</div>'; // .doubleThumb
-            view += '</label>';
+            if (!compact) {
+                view += '<label for="bookmarkedPages">';
+                view += '<div class="doubleThumb bookmarks">';
+                view += this.fluidbook.bookmarks.getPrintPreview();
+                view += '</div>'; // .doubleThumb
+                view += '</label>';
+            }
             view += '<input type="radio" name="pageChoice" value="bookmarks" id="bookmarkedPages" ' + bookmarksDisabled + '>';
             view += '<label for="bookmarkedPages" class="print-label-text">' + __('bookmarks') + '</label>';
             view += '</div>'; // .print-option
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index f6e18fe3..0b94341f 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -75,7 +75,7 @@
       padding: 25px 20px;
 
       .ps__rail-x {
-        margin:0 25px;
+        margin: 0 25px;
         transform: translate(0, -25px) !important;
         opacity: 1 !important;
       }
@@ -89,6 +89,14 @@
 
     box-shadow: 0 0 5px rgba(0, 0, 0, .3);
   }
+
+  .print-dialogue {
+    margin-bottom: 20px;
+    .print-option {
+      flex-basis: 100%;
+    }
+  }
+
 }
 
 
-- 
2.39.5