WIP #817 @3.5

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index abd6a5057d04f7c6f0661216a92747c42204120a..e400844a408fe37da84d52210a3fcc9cedb48725 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -464,7 +464,7 @@ FluidbookMenu.prototype = {
     },
 
     openPrint: function (callback) {
-        var printDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('Print') + '</h2></div>';
+        var printDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('print') + '</h2></div>';
 
         printDialogue += this.fluidbook.printing.getView();
 
@@ -479,7 +479,7 @@ FluidbookMenu.prototype = {
     },
 
     openDownload: function (callback) {
-        var downloadDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('Download') + '</h2></div>';
+        var downloadDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('download') + '</h2></div>';
 
         downloadDialogue += this.fluidbook.printing.getView('download'); // Reuse print dialogue since they're almost the same
 
@@ -793,6 +793,13 @@ FluidbookMenu.prototype = {
                     });
                 });
                 break;
+            case 'print':
+            case 'download':
+                w = 820;
+                if (ww < w) {
+                    fullscreen = true;
+                }
+                break;
             default:
                 var maxWidth = 10000;
                 if (m.data('maxwidth') !== null) {

diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index 7bac0d644d98c96ed1cc8679212985d0554e20d4..f52310cb5e0e52f75e0aac491fa4514987976949 100644 (file)
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -42,9 +42,16 @@ FluidbookPrint.prototype = {
               default:
                 return false;
             }
+        });
 
+        // When there are no bookmarks a click on the bookmarks option will open the bookmarks help modal
+        $(document).on('click', '.bookmarks-option.disabled', function(event) {
+            event.preventDefault();
 
+            $this.fluidbook.menu.quickCloseView();
+            $this.fluidbook.menu.openView('bookmarkHelp');
         });
+
     },
 
     getView: function (mode) {
@@ -59,8 +66,8 @@ FluidbookPrint.prototype = {
             isLastPage = (this.fluidbook.currentPage == this.fluidbook.datas.pages),
             isSinglePageMode = (this.fluidbook.resize.orientation == 'portrait'),
             buttonLabels = {
-                'print' : __('Print'),
-                'download' : __('Download')
+                'print' : __('print'),
+                'download' : __('download')
             },
             view = '';
 
@@ -83,7 +90,7 @@ FluidbookPrint.prototype = {
             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 += '<label for="leftPage" class="print-label-text">' + (isLastPage || isSinglePageMode ? __('Current page') : __('left page')) + '</label>';
             view += '</div>'; // .print-option
         }
 
@@ -101,7 +108,7 @@ FluidbookPrint.prototype = {
             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 += '<label for="rightPage" class="print-label-text">' + (isFirstPage ? __('Current page') : __('right page')) + '</label>';
             view += '</div>'; // .print-option
         }
 
@@ -119,7 +126,7 @@ FluidbookPrint.prototype = {
             view += '</div>'; // .doubleThumb
             view += '</label>';
             view += '<input type="radio" name="pageChoice" value="double" id="doublePage">'
-            view += '<label for="doublePage" class="print-label-text">' + __('Double page') + '</label>';
+            view += '<label for="doublePage" class="print-label-text">' + __('spread') + '</label>';
             view += '</div>'; // .print-option
         }
 
@@ -133,23 +140,25 @@ FluidbookPrint.prototype = {
         view += '</div>'; // .doubleThumb
         view += '</label>';
         view += '<input type="radio" name="pageChoice" value="all" id="allPages">'
-        view += '<label for="allPages" class="print-label-text">' + __('Full brochure') + '</label>';
+        view += '<label for="allPages" class="print-label-text">' + __('entire brochure') + '</label>';
         view += '</div>'; // .print-option
 
         // Bookmarks
         var hasBookmarks = this.fluidbook.bookmarks.hasBookmarkedPages(),
         bookmarksDisabled = hasBookmarks ? '' : 'disabled';
 
-        view += '<div class="print-option '+ bookmarksDisabled +'">';
+        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>';
         view += '<input type="radio" name="pageChoice" value="bookmarks" id="bookmarkedPages" '+ bookmarksDisabled +'>'
-        view += '<label for="bookmarkedPages" class="print-label-text">' + __('My bookmarks') + '</label>';
+        view += '<label for="bookmarkedPages" class="print-label-text">' + __('bookmarks') + '</label>';
         view += '</div>'; // .print-option
 
+        view += '<div class="print-option"></div>'; // Extra empty div to ensure flexbox space-between works as expected
+
         view += '</div>'; // .print-dialogue
 
         // Action buttons

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 4ae6bc1172cefe1456b9b3fac8e835e8dd1725c5..3753797118fa2c9502a496131b1752ab5a82009b 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1363,10 +1363,6 @@ html.ios body.portrait #interface {
                }
        }
 
-       &[data-menu="print"], &[data-menu="download"]  {
-               max-width: 820px;
-       }
-
        &[data-menu="bookmarks-help"] {
                .content {
                        padding: 40px 70px 100px 70px;

diff --git a/style/print.less b/style/print.less
index 4b020cda2eee3910f7fbcc1b28c2e9a11cb5c430..a04e66584e595d13d541f06f2b019551985f826c 100644 (file)
--- a/style/print.less
+++ b/style/print.less
@@ -3,17 +3,20 @@
   display: flex;
   flex-wrap: wrap;
   text-align: left;
-  padding: 1em 2em;
+  justify-content: space-between;
+  padding: 1.5em 2em 1em;
   margin-bottom: -2em; // Offset the margin-bottom on each <label> so there's no extra margin on last row
 
   .print-option {
-    flex: 0 1 33%;
-    min-width: 230px;
+    flex: 0 0 200px;
     margin-bottom: 2em;
     position: relative;
 
     @media (max-width: 753px) {
-      flex-grow: 1; // When going to 2 columns due to wrapping, use space better
+      flex-basis: 50%;
+    }
+    @media (max-width: 550px) {
+      flex-basis: 100%;
     }
   }
 
@@ -29,6 +32,19 @@
     left: 100px; // Override default so there's no gap between pages
   }
 
+  // Blank pages
+  .thumb.blank:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 125px;
+    background-color: @menu-button-background;
+    opacity: 0.25;
+    z-index: 2;
+  }
+
   .bookmark-thumbnails {
     .thumb {
       &:before {