[Bug 34413] New: Flat picker birth date field does not display properly on initial load on iOS
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Bug ID: 34413 Summary: Flat picker birth date field does not display properly on initial load on iOS Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Patrons Assignee: koha-bugs@lists.koha-community.org Reporter: cbrannon@cdalibrary.org QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com, kyle.m.hall@gmail.com If you are using iOS (iPhone for my test), and create a new patron, the birth date field does not show. there is a squishy blob in it's place. Click on that, and the flatpicker comes up and you can enter the date. Everything from that point forward looks fine. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |emily.lamancusa@montgomeryc | |ountymd.gov --- Comment #1 from Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> --- Created attachment 158678 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=158678&action=edit Screenshot - iPhone flatpickr Our staff confirmed this on three different versions of iPhone - screenshot attached in case it's helpful -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 --- Comment #2 from Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> --- Version 22.11 for us - I guess you'd need an iPhone emulator to confirm whether it's still an issue on master? -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 --- Comment #3 from Lucas Gass <lucas@bywatersolutions.com> --- I cannot test this to confirm, but I think this CSS ( OPACUserCSS ) will fix the problem: #opac-patron-registration .flatpickr { height:30px !important; width: 150px !important; } -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |oleonard@myacpl.org |ity.org | Severity|enhancement |normal Status|NEW |ASSIGNED -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff Patch complexity|--- |Trivial patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 --- Comment #4 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 158715 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=158715&action=edit 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" -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #158715|0 |1 is obsolete| | --- Comment #5 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 158716 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=158716&action=edit 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" -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 --- Comment #6 from Lucas Gass <lucas@bywatersolutions.com> --- I don't know how to test this in Ubuntu with k-t-d. So I applied Owen's changes to the ByWater model site and had a look with browserstack. It works so I am signing off, thanks Owen! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #158716|0 |1 is obsolete| | --- Comment #7 from Lucas Gass <lucas@bywatersolutions.com> --- Created attachment 158745 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=158745&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |emily.lamancusa@montgomeryc |y.org |ountymd.gov -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #158745|0 |1 is obsolete| | --- Comment #8 from Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> --- Created attachment 158751 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=158751&action=edit 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> Signed-off-by: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA --- Comment #9 from Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> --- Confirmed that the CSS from the patch solved the problem when added to our OPACUserCSS. Incidentally, Lucas's CSS from comment 3 also works. :) Thanks everyone! Passing QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Tomás Cohen Arazi <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to master Version(s)| |23.11.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 --- Comment #10 from Tomás Cohen Arazi <tomascohen@gmail.com> --- Pushed to master for 23.11. Nice work everyone, thanks! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|23.11.00 |23.11.00,23.05.06 released in| | CC| |fridolin.somers@biblibre.co | |m Status|Pushed to master |Pushed to stable --- Comment #11 from Fridolin Somers <fridolin.somers@biblibre.com> --- Pushed to 23.05.x for 23.05.06 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 Pedro Amorim <pedro.amorim@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to stable |Pushed to oldstable Version(s)|23.11.00,23.05.06 |23.11.00,23.05.06,22.11.12 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 --- Comment #12 from Pedro Amorim <pedro.amorim@ptfs-europe.com> --- Nice work everyone! Pushed to 22.11.x for next release -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34413 --- Comment #13 from Christopher Brannon <cbrannon@cdalibrary.org> --- (In reply to Pedro Amorim from comment #12)
Nice work everyone!
Pushed to 22.11.x for next release
Grateful for that! -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org