Hacks to improve user experience when changing orientation on phones

I now think that much of our media queries with (max-device-height:
767px) actually should use (max-device-width: 767px) if the intent is
that they detect the case of mobile phones, as opposed to tablets.

Many mobile phones have a screen.height (which is what
max-device-height in CSS refers to) that is clearly larger than 767.
But a screen.width of 768 is what at least my 9.7 iPad has.

Change-Id: I3b44e32ec583837897b4aa390fc0ab92be59d163
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/90752
Tested-by: Andras Timar <andras.timar@collabora.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>

6 files changed, 35 insertions, 28 deletions

diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index a0cf27e43..334b721ee 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -174,9 +174,28 @@ body {
 	width: 0;
 }
 
+/* Hide hamburger except on mobile phones */
 #toolbar-hamburger {
 	width: 0;
 }
+@media (max-device-width: 767px) {
+	#toolbar-hamburger {
+		width: 36px;
+	}
+	/* In Safari on iPhone, the address bar is auto-hidden in landscape
+	 * orientation. For some reason this prevents jQuery from
+	 * getting events when tapping on the things in the toolbar at
+	 * the top, like the hamburger button. To work around this,
+	 * add a bit of padding to the body element. This is of course
+	 * an extremely silly waste of precious vertical space and
+	 * some other solution should be found.
+	 */
+	@media (orientation: landscape) {
+		body {
+			padding-top: 20px;
+		}
+	}
+}
 
 #mobile-edit-button {
 	position: absolute;
@@ -284,9 +303,6 @@ body {
 		bottom: 35px !important;
 	}
 
-	#toolbar-hamburger {
-	width: 36px;
-	}
 	#closebuttonwrapper {
 		display: none;
 	}
@@ -296,7 +312,7 @@ body {
 	}
 }
 
-@media (max-width: 767px) and (orientation: portrait), (max-device-height: 767px) and (orientation: portrait) {
+@media (max-width: 767px) and (orientation: portrait) {
 	#presentation-controls-wrapper {
 		top: initial;
 		left: initial;
@@ -327,7 +343,7 @@ body {
 		bottom: 33px;
 	}
 }
-@media (max-width: 767px) and (orientation: landscape), (max-device-height: 767px) and (orientation: landscape) {
+@media (max-width: 1023px) and (orientation: landscape) {
 	#presentation-controls-wrapper {
 		top: 41px;
 		bottom: 33px;
diff --git a/loleaflet/css/menubar-mobile.css b/loleaflet/css/menubar-mobile.css
index 564eedc3e..cccb63eda 100644
--- a/loleaflet/css/menubar-mobile.css
+++ b/loleaflet/css/menubar-mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 767px), (max-device-height: 767px) {
+@media (max-device-width: 767px) {
 	.logo {
 		background-size: 100px;
 		max-width: 24px;
diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css
index f25fb9cb9..df11acf55 100644
--- a/loleaflet/css/menubar.css
+++ b/loleaflet/css/menubar.css
@@ -151,12 +151,11 @@
     overflow: hidden;
 }
 
-/* Mobile menu toggle button */
+/* Hamburger button */
 
 .main-menu-btn {
     margin: 2px 10px;
     position: relative;
-    display: none;
     width: 17px;
     height: 21px;
     text-indent: 17px;
@@ -167,7 +166,7 @@
 }
 
 
-/* hamburger icon */
+/* Hamburger icon */
 
 .main-menu-btn-icon,
 .main-menu-btn-icon:before,
@@ -270,15 +269,6 @@
 	display: none;
     }
 
-    /* hide the menu in mobile view */
-    #main-menu-state:not(:checked) ~ #main-menu {
-        display: none;
-    }
-
-    .main-menu-btn {
-        display: inline-block;
-    }
-
     .main-nav {
         position: absolute;
         height: 0;
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index bb6addd51..eb4d613fa 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -1,4 +1,4 @@
-@media (max-width: 767px), (max-device-height: 767px) {
+@media (max-device-width: 767px)  {
 	.menuwizard .menu-entry-icon{
 		padding-left: 4%;
 	}
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index c11e54a5e..643850b16 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -879,7 +879,7 @@ L.Control.Menubar = L.Control.extend({
 
 		$('#main-menu').bind('keydown', {self: this}, this._onKeyDown);
 
-		if (L.Browser.mobile)
+		if (window.mode.isMobile())
 			$('#main-menu').parent().css('height', '0');
 
 		var self = this;
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 69f094070..4e8bd7b75 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -224,19 +224,20 @@ L.Map = L.Evented.extend({
 
 			// We need core's knowledge of whether it is a mobile phone or not (which is
 			// what .uno:LOKSetMobile does) to be in sync with the test in
-			// _onJSDialogMsg in TileLayer.js but we don't have the clout to do so
-			// except for the iOS app out of fear of breaking something.
-			if (L.Browser.mobile && (!window.ThisIsTheiOSApp || screen.width < 768))
+			// _onJSDialogMsg in TileLayer.js.
+			if (window.mode.isMobile())
 			{
 				this._size = new L.Point(0,0);
 				this._onResize();
 				this._socket.sendMessage('uno .uno:LOKSetMobile');
-				// Add a style sheet for mobile phones. Just a placeholder so far.
+				// Add a style sheet for mobile phones. Doing it here is hopefully more
+				// reliable that relying on CSS media queries looking at the window or device size.
 				var style = document.createElement('style');
-				style.innerHTML = ' \
-#foobar { \
-        background: red; \
-} \
+				style.innerHTML = '  \
+/* Hide the menu bar in a horribly convoluted way */ \
+#main-menu-state:not(:checked) ~ #main-menu {        \
+    display: none;                                   \
+}                                                    \
 ';
 				document.head.appendChild(style);
 			}