Attachment 158745 Details for Bug 34413 – Bug 34413: Fix style of Flatpickr in iOS mobile view

[patch] Bug 34413: Fix style of Flatpickr in iOS mobile view

Bug-34413-Fix-style-of-Flatpickr-in-iOS-mobile-vie.patch (text/plain), 2.88 KB, created by Lucas Gass (lukeg) on 2023-11-09 15:18:02 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Lucas Gass (lukeg)

Created: 2023-11-09 15:18:02 UTC

Size: 2.88 KB

patch

obsolete

>From 05322787aa9e4159ec3589065c1d1f6f3e895a1b Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>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 <lucas@bywatersolutions.com>
>---
> 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

Actions: View | Diff | Splinter Review

Attachments on bug 34413: 158678 | 158715 | 158716 | 158745 | 158751