From 21f22f3b7c4780c9c42b9bc6c72f1b8eaeee7d65 Mon Sep 17 00:00:00 2001 From: Pierre Paridans Date: Wed, 27 Jul 2022 13:37:46 +0000 Subject: [PATCH] [FIX] web: daterangepicker style in mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The DateRangePicker on mobile has a few caveats (sic) like its positionning which prevents the user from accessing the buttons (cf. out of the viewport). Steps to reproduce (on small device like iPhone 5/Moto G4): - Open Time Off - Click on New Time Off - Click on From/To field => buttons are inaccessible This commit fixes it restyling the daterangepicker on smaller screens to display it as Bottom Sheet-like element (cf. popping from the bottom of the screen and growing upto 90% of the viewport). opw-2803227 closes odoo/odoo#97024 X-original-commit: dd2bd3c22c22c49a60ca0541f84a64c3a613971c Signed-off-by: Adrien Dieudonné (adr) Signed-off-by: Pierre Paridans (app) --- .../src/legacy/scss/daterangepicker.scss | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/addons/web/static/src/legacy/scss/daterangepicker.scss b/addons/web/static/src/legacy/scss/daterangepicker.scss index 8fa081bbd7d..cdcdfc82342 100644 --- a/addons/web/static/src/legacy/scss/daterangepicker.scss +++ b/addons/web/static/src/legacy/scss/daterangepicker.scss @@ -83,4 +83,29 @@ .drp-buttons .drp-selected { display: none; } + + @include media-breakpoint-down(sm) { + position: fixed; + top: auto !important; + left: 0 !important; + bottom: 0; + right: 0 !important; + width: auto; + max-height: 90vh; + overflow-y: auto; + @include border-top-radius(1rem); + box-shadow: $box-shadow-lg; + + .drp-calendar { + max-width: inherit; + padding-right: 0 !important; + padding-left: 0 !important; + } + + .drp-buttons { + position: sticky; + bottom: 0; + background-color: #fff; + } + } }