I propose and update to the styling of form fields which are configured to use the jQueryUI datepicker plugin. Instead of appending a calendar icon to the input (which can result in unwanted line-wrapping), we can style the input with the calendar icon as a background-image.
Created attachment 75166 [details] Screenshot showing the calendar icon pushed onto the next line
Created attachment 75167 [details] Screenshot showing the form after this style update
Created attachment 75168 [details] [review] Bug 20729: Update style of datepickers This patch updates the styling of form fields which are configured to use the jQueryUI datepicker widget. Some CSS has been added, and the default datepicker configuration has been changed. To test, apply the patch and clear your cache if necessary. Test pages which include a datepicker to confirm that they look correct and work correctly. Some examples: - Circulation -> Check out -> Specify due date - Patrons -> Add patron -> Date of birth, registration date, expiry date fields - Serials -> Search subscriptions -> Search results page sidebar - Tools -> News -> Add news item And confirm that this change hasn't adversely affected the calendar tool: - Tools -> Calendar
Created attachment 75182 [details] [review] Bug 20729: Update style of datepickers This patch updates the styling of form fields which are configured to use the jQueryUI datepicker widget. Some CSS has been added, and the default datepicker configuration has been changed. To test, apply the patch and clear your cache if necessary. Test pages which include a datepicker to confirm that they look correct and work correctly. Some examples: - Circulation -> Check out -> Specify due date - Patrons -> Add patron -> Date of birth, registration date, expiry date fields - Serials -> Search subscriptions -> Search results page sidebar - Tools -> News -> Add news item And confirm that this change hasn't adversely affected the calendar tool: - Tools -> Calendar NOTE: Obvious in Serials. Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
Created attachment 75232 [details] [review] Bug 20729: Update style of datepickers This patch updates the styling of form fields which are configured to use the jQueryUI datepicker widget. Some CSS has been added, and the default datepicker configuration has been changed. To test, apply the patch and clear your cache if necessary. Test pages which include a datepicker to confirm that they look correct and work correctly. Some examples: - Circulation -> Check out -> Specify due date - Patrons -> Add patron -> Date of birth, registration date, expiry date fields - Serials -> Search subscriptions -> Search results page sidebar - Tools -> News -> Add news item And confirm that this change hasn't adversely affected the calendar tool: - Tools -> Calendar Signed-off-by: Mark Tompsett <mtompset@hotmail.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Looks uglier for me, at least when editing a patron: https://screenshots.firefox.com/yo0iX4PG4RacDzOX/pro.kohadev.org
I think there are few places in Koha where a datepicker field has the same width as all form fields around it. I think the only global CSS applied to input widths is for form fields in sidebar filter forms. The alternative is to remove the CSS padding property and modify all templates with datepickers in order to ensure that the "size" attribute of the input field is large enough to accommodate the calendar icon without overlapping the input text. I think that's a less desirable solution.
(In reply to Jonathan Druart from comment #6) > Looks uglier for me, at least when editing a patron: > > https://screenshots.firefox.com/yo0iX4PG4RacDzOX/pro.kohadev.org I would not say that it is ugly. Just a bit funny at first. I would not object to this change if it fixes the line wrap problem.
Created attachment 80368 [details] [review] Bug 20729: Update style of datepickers This patch updates the styling of form fields which are configured to use the jQueryUI datepicker widget. Some CSS has been added, and the default datepicker configuration has been changed. To test, apply the patch, rebuild the staff client CSS file, and clear your cache if necessary. Test pages which include a datepicker to confirm that they look correct and work correctly. Some examples: - Circulation -> Check out -> Specify due date - Patrons -> Add patron -> Date of birth, registration date, expiry date fields - Serials -> Search subscriptions -> Search results page sidebar - Tools -> News -> Add news item And confirm that this change hasn't adversely affected the calendar tool: - Tools -> Calendar
Created attachment 83478 [details] [review] Bug 20729: Update style of datepickers This patch updates the styling of form fields which are configured to use the jQueryUI datepicker widget. Some CSS has been added, and the default datepicker configuration has been changed. To test, apply the patch, rebuild the staff client CSS file, and clear your cache if necessary. Test pages which include a datepicker to confirm that they look correct and work correctly. Some examples: - Circulation -> Check out -> Specify due date - Patrons -> Add patron -> Date of birth, registration date, expiry date fields - Serials -> Search subscriptions -> Search results page sidebar - Tools -> News -> Add news item And confirm that this change hasn't adversely affected the calendar tool: - Tools -> Calendar Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Created attachment 83830 [details] [review] Bug 20729: Update style of datepickers This patch updates the styling of form fields which are configured to use the jQueryUI datepicker widget. Some CSS has been added, and the default datepicker configuration has been changed. To test, apply the patch, rebuild the staff client CSS file, and clear your cache if necessary. Test pages which include a datepicker to confirm that they look correct and work correctly. Some examples: - Circulation -> Check out -> Specify due date - Patrons -> Add patron -> Date of birth, registration date, expiry date fields - Serials -> Search subscriptions -> Search results page sidebar - Tools -> News -> Add news item And confirm that this change hasn't adversely affected the calendar tool: - Tools -> Calendar Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> Signed-off-by: Pierre-Marc Thibault <pierre-marc.thibault@inLibro.com>
Created attachment 83851 [details] [review] Bug 20729: Update style of datepickers This patch updates the styling of form fields which are configured to use the jQueryUI datepicker widget. Some CSS has been added, and the default datepicker configuration has been changed. To test, apply the patch, rebuild the staff client CSS file, and clear your cache if necessary. Test pages which include a datepicker to confirm that they look correct and work correctly. Some examples: - Circulation -> Check out -> Specify due date - Patrons -> Add patron -> Date of birth, registration date, expiry date fields - Serials -> Search subscriptions -> Search results page sidebar - Tools -> News -> Add news item And confirm that this change hasn't adversely affected the calendar tool: - Tools -> Calendar Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> Signed-off-by: Pierre-Marc Thibault <pierre-marc.thibault@inLibro.com>
Awesome work all! Pushed to master for 19.05
Enhancement, will not be backported to 18.11.x series.