loleaflet/css/loleaflet.css | 26 +++++++++++++++++++++-----
loleaflet/css/menubar-mobile.css | 2 +-
loleaflet/css/menubar.css | 14 ++------------
loleaflet/css/mobilewizard.css | 2 +-
loleaflet/src/control/Control.Menubar.js | 2 +-
loleaflet/src/map/Map.js | 17 +++++++++--------
6 files changed, 35 insertions(+), 28 deletions(-)
New commits:
commit b62dcc025555076a7522809b9f12f873c278205d
Author: Tor Lillqvist <t...@collabora.com>
AuthorDate: Thu Mar 19 16:27:36 2020 +0200
Commit: Andras Timar <andras.ti...@collabora.com>
CommitDate: Thu Mar 19 15:40:44 2020 +0100
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.ti...@collabora.com>
Reviewed-by: Andras Timar <andras.ti...@collabora.com>
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);
}
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
