diff options
| author | Pedro Pinto Silva <pedro.silva@collabora.com> | 2020-01-17 13:56:42 +0100 |
|---|---|---|
| committer | Pedro Pinto da Silva <pedro.silva@collabora.com> | 2020-01-17 14:05:25 +0100 |
| commit | c92682c8132786cf5bee7c3468ba338220465324 (patch) | |
| tree | 392cfc2a9173eaedb1169747b099282b68b7efb9 | |
| parent | e2fa8c43a1cc800016ec4a2ca5ba0da5c322ca47 (diff) | |
Mobile: Scroll indicators (shows the user he can swipe to see more):
- Use shadow instead of background gradient in order to have more granular control over the result (multiple shadows)
- [Toolbar]: decrease indicators width to 0; [MobileWizard]: decrease indicators height to 0
- ^ to avoid mistaps. We now have larger "gradients" with 0 space from the element which allows any elmente that is underneath to be tappable
Change-Id: Ie329ed4e85d7342ab9cdc90f89cfdc8663e73da7
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/86979
Reviewed-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
Tested-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
| -rw-r--r-- | loleaflet/css/toolbar-mobile.css | 6 | ||||
| -rw-r--r-- | loleaflet/src/control/Control.MobileWizard.js | 2 |
2 files changed, 4 insertions, 4 deletions
diff --git a/loleaflet/css/toolbar-mobile.css b/loleaflet/css/toolbar-mobile.css index 75259e00f..b94857006 100644 --- a/loleaflet/css/toolbar-mobile.css +++ b/loleaflet/css/toolbar-mobile.css @@ -38,11 +38,11 @@ display: none; } #toolbar-down .w2ui-scroll-left, #toolbar-down .w2ui-scroll-right{ - background: linear-gradient(to left, #fff0 0%, #ccc 98%, #bbb 100%); + background: none; height: 100%; - width: 18px; + width: 0px; top: 0%; - box-shadow: none; + box-shadow: 8px 0 13px 2px #0b87e7, -6px 0px 6px 6px #007cdc; border-radius: 0px; } #toolbar-down .w2ui-scroll-right{ diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js index 59c31974e..02fdc05cf 100644 --- a/loleaflet/src/control/Control.MobileWizard.js +++ b/loleaflet/src/control/Control.MobileWizard.js @@ -60,7 +60,7 @@ L.Control.MobileWizard = L.Control.extend({ var docType = this._map.getDocType(); var maxScrolled = 52; if (ContentsLength > 1 || docType != 'spreadsheet') - $('#mobile-wizard-content').prepend('<div id="mobile-wizard-scroll-indicator" style="width: 100%;height: 40px;position: fixed;z-index: 2;bottom: 0;background: linear-gradient(#fff0 20%, #0b87e7 400%);"></div>'); + $('#mobile-wizard-content').append('<div id="mobile-wizard-scroll-indicator" style="width: 100%;height: 0px;position: fixed;z-index: 2;bottom: -7px;box-shadow: 0 -8px 20px 4px #0b87e770, 0 1px 10px 6px #0b87e7;"></div>'); if (docType == 'spreadsheet') maxScrolled = 41; $('#mobile-wizard').show(); |