From 05322787aa9e4159ec3589065c1d1f6f3e895a1b Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 9 Nov 2023 13:21:06 +0000 Subject: [PATCH] Bug 34413: Fix style of Flatpickr in iOS mobile view This patch updates Flatpickr CSS in the OPAC and staff interface so that date fields are displayed correctly in iOS mobile views. To test, apply the patch and rebuild the OPAC and staff interface CSS. - In the OPAC, click "Create new account" - In the account entry form, confirm that the date of birth field looks correct and that the date-picker works as it should. - In the staff client, go to Patrons -> New patron. - Check the date of birth field in this form too. This patch has been tested in the Xcode iOS device simulator with iOS 17. While I wasn't able to reproduce the problem in Firefox, I was able to use the developer tools' responsive design mode to trigger the mobile view and thus be able to see the styles which are being applied: - In the OPAC, on the "Create new account" screen, open the Web Developer Tools panel (Tools -> Browser tools -> Web Developer Tools). - Click the "Responsive Design Mode" button in the upper-right corner of the developer tools panel (it looks like a phone and tablet together). - The main browser window will now how some settings at the top. - In the first dropdown, choose an iPhone model. - The date of birth field should now be styled differently because of the addition of a "flatpickr-mobile" style. - Right-click the field and choose "Inspect." In the developer console you can see the styles which are being applied to the field. One of those should be ".flatpickr-input.flatpickr-mobile" Signed-off-by: Lucas Gass --- koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss | 5 +++++ koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss index 777ac6c993f..165936c3969 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss @@ -947,6 +947,11 @@ span.flatpickr-weekday { border-width: 1px; padding: 3px 3px 3px 20px; + &.flatpickr-mobile { + height: 2rem; + width: 11rem; + } + &:focus { border-radius: 0; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss index 323418d78e8..042e0fc0621 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss @@ -843,6 +843,11 @@ span.flatpickr-weekday { border-width: 1px; padding: 3px 3px 3px 20px; + &.flatpickr-mobile { + height: 2rem; + width: 11rem; + } + &:focus { border-radius: 0; } -- 2.30.2