From 6cededf8485f2728bd5e5c905d9381a1579675fe Mon Sep 17 00:00:00 2001
From: Anton Georgiev <anto.georgiev@gmail.com>
Date: Tue, 24 Feb 2015 21:29:32 +0000
Subject: [PATCH] fit to width slide in portrait. substitute jquery resizing
 for whiteboard

---
 .../app/client/stylesheets/whiteboard.less    |  1 +
 .../app/client/views/whiteboard/slide.coffee  | 29 ++++++++-----------
 .../client/views/whiteboard/whiteboard.coffee |  9 +-----
 3 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/labs/meteor-client/app/client/stylesheets/whiteboard.less b/labs/meteor-client/app/client/stylesheets/whiteboard.less
index 4f8d47e2ab..74ccd4488d 100755
--- a/labs/meteor-client/app/client/stylesheets/whiteboard.less
+++ b/labs/meteor-client/app/client/stylesheets/whiteboard.less
@@ -10,6 +10,7 @@
   flex: 2 2 50%;
   min-width: 0;
   @media @landscape {
+    height:98%;
     -webkit-order: 2;
     order: 2;
     display: -moz-flex;
diff --git a/labs/meteor-client/app/client/views/whiteboard/slide.coffee b/labs/meteor-client/app/client/views/whiteboard/slide.coffee
index 5ceaace0da..459fa3d975 100755
--- a/labs/meteor-client/app/client/views/whiteboard/slide.coffee
+++ b/labs/meteor-client/app/client/views/whiteboard/slide.coffee
@@ -5,13 +5,9 @@ Template.slide.rendered = ->
     setInSession 'slideOriginalWidth', this.width
     setInSession 'slideOriginalHeight', this.height
     $(window).resize( ->
+      # redraw the whiteboard to adapt to the resized window
       redrawWhiteboard()
     )
-    if window.matchMedia('(orientation: portrait)').matches
-      $('#whiteboard').height($('#whiteboard').width() * this.height / this.width + $('#whiteboard-navbar').height() + 20)
-    else
-      # set the slide height to the max available
-      $('#whiteboard-paper').height($('#whiteboard').height())
     if currentSlide?.slide?.png_uri?
       createWhiteboardPaper (wpm) ->
         displaySlide wpm
@@ -49,19 +45,18 @@ Template.slide.rendered = ->
 # based on the image's original width and height
 @scaleSlide = (originalWidth, originalHeight) ->
 
-  # the size of the whiteboard space (frame) where the slide will be displayed
-  boardWidth = $("#whiteboard").width()
-  boardHeight = null # see under
-
-  # calculate boardHeight
-  whiteboardBottom = $("#whiteboard").offset().top + $("#whiteboard").height()
-  footerTop = $(".myFooter").offset().top
-  if footerTop < whiteboardBottom
-    boardHeight = footerTop - $("#whiteboard").offset().top - $("#whiteboard-navbar").height() - 10
-  else
-    boardHeight = $("#whiteboard").height() - $("#whiteboard-navbar").height() - 10
+  # set the size of the whiteboard space (frame) where the slide will be displayed
   if window.matchMedia('(orientation: landscape)').matches
-    boardHeight -= 10; # add some bottom padding
+    # for landscape orientation we want "fit to height" so that we can
+    # minimize the empty space above and below the slide (for best readability)
+    boardWidth = $("#whiteboard").width()
+    # the slide area is under the whiteboard navbar. -10 so that the slide stays within
+    boardHeight = $("#whiteboard").height() - $("#whiteboard-navbar").height() - 10
+  else
+    # for portrait orientation we want "fit to width" so that we can
+    # minimize the empty space on the sides of the slide (for best readability)
+    boardWidth = $("#whiteboard").width()
+    boardHeight = 1.4 * $("#whiteboard").width() # A4 ratio
 
   # this is the best fitting pair
   adjustedWidth = null
diff --git a/labs/meteor-client/app/client/views/whiteboard/whiteboard.coffee b/labs/meteor-client/app/client/views/whiteboard/whiteboard.coffee
index a91c66c41a..4f76c73ed6 100755
--- a/labs/meteor-client/app/client/views/whiteboard/whiteboard.coffee
+++ b/labs/meteor-client/app/client/views/whiteboard/whiteboard.coffee
@@ -1,8 +1,5 @@
+# redraw the whiteboard to adapt to the resized window
 @redrawWhiteboard = () ->
-  if window.matchMedia('(orientation: portrait)').matches
-    $('#whiteboard').height($('#whiteboard').width() * getInSession('slideOriginalHeight') / getInSession('slideOriginalWidth') + $('#whiteboard-navbar').height() + 20)
-  else if $('#whiteboard').height() isnt $('#users').height() + 10
-    $('#whiteboard').height($('#users').height() + 10)
   adjustedDimensions = scaleSlide(getInSession('slideOriginalWidth'), getInSession('slideOriginalHeight'))
   wpm = whiteboardPaperModel
   wpm.clearShapes()
@@ -10,7 +7,3 @@
   manuallyDisplayShapes()
   wpm.scale(adjustedDimensions.width, adjustedDimensions.height)
   wpm.createCursor()
-
-Template.whiteboard.rendered = ->
-  if window.matchMedia('(orientation: landscape)').matches
-    $("#whiteboard").height(($("#chat").height()) + 'px')