diff options
| author | Tamás Zolnai <tamas.zolnai@collabora.com> | 2020-03-19 17:37:04 +0100 |
|---|---|---|
| committer | Andras Timar <andras.timar@collabora.com> | 2020-03-20 15:05:22 +0100 |
| commit | 97988f7c7b84081c9316146745ca5d3008727f01 (patch) | |
| tree | 9770ef5b29ada599871ab8be85f35036c24aadb2 | |
| parent | 0b40d94dc23f2a1c5b2e763674c166bea9dfec6c (diff) | |
Restore cypress test framework's mobile tests.
Broken since: b62dcc025555076a7522809b9f12f873c278205d
The issue here cypress sets the window size and not the device size
when tries to emulate mobile view.
https://github.com/cypress-io/cypress/issues/970
For now, let's keep window size media rules too.
[tml: Window size changes depending on orientation. Device size does
not. We need to change each rule that used only max-device-width into
one using two subrules using max-width combined with comma (i.e. the
OR operator), one for portrait using 767px as the limit, one for
landscape using 1023px as the limit.]
We do this in other places of the css code anyway. In a long term, it
would be good to find a better way to emulate mobile view by cypress
or to detect mobile from JS code, so we can enable mobile mode easily
for cypress tests.
Change-Id: Ic7974f44fcbf6ed2883e93acd28153709514c216
| -rw-r--r-- | loleaflet/css/loleaflet.css | 2 | ||||
| -rw-r--r-- | loleaflet/css/mobilewizard.css | 2 |
2 files changed, 2 insertions, 2 deletions
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css index 334b721ee..2016bc131 100644 --- a/loleaflet/css/loleaflet.css +++ b/loleaflet/css/loleaflet.css @@ -178,7 +178,7 @@ body { #toolbar-hamburger { width: 0; } -@media (max-device-width: 767px) { +@media (max-width: 767px) and (orientation: portrait), (max-width: 1023px) and (orientation: landscape) { #toolbar-hamburger { width: 36px; } diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css index eb4d613fa..0dde3030a 100644 --- a/loleaflet/css/mobilewizard.css +++ b/loleaflet/css/mobilewizard.css @@ -1,4 +1,4 @@ -@media (max-device-width: 767px) { +@media (max-width: 767px) and (orientation: portrait), (max-width: 1023px) and (orientation: landscape) { .menuwizard .menu-entry-icon{ padding-left: 4%; } |