Bug 20729 - Update style of datepickers
Summary: Update style of datepickers
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-05-08 16:06 UTC by Owen Leonard
Modified: 2020-01-06 20:17 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Screenshot showing the calendar icon pushed onto the next line (3.21 KB, image/png)
2018-05-08 16:09 UTC, Owen Leonard
Details
Screenshot showing the form after this style update (3.15 KB, image/png)
2018-05-08 16:10 UTC, Owen Leonard
Details
Bug 20729: Update style of datepickers (2.75 KB, patch)
2018-05-08 16:17 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20729: Update style of datepickers (2.81 KB, patch)
2018-05-08 18:05 UTC, Mark Tompsett
Details | Diff | Splinter Review
Bug 20729: Update style of datepickers (2.85 KB, patch)
2018-05-10 16:20 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 20729: Update style of datepickers (2.83 KB, patch)
2018-10-10 18:17 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20729: Update style of datepickers (2.90 KB, patch)
2018-12-24 16:45 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 20729: Update style of datepickers (2.96 KB, patch)
2019-01-11 21:51 UTC, Pierre-Marc Thibault
Details | Diff | Splinter Review
Bug 20729: Update style of datepickers (2.98 KB, patch)
2019-01-13 20:47 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2018-05-08 16:06:42 UTC
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.
Comment 1 Owen Leonard 2018-05-08 16:09:59 UTC
Created attachment 75166 [details]
Screenshot showing the calendar icon pushed onto the next line
Comment 2 Owen Leonard 2018-05-08 16:10:25 UTC
Created attachment 75167 [details]
Screenshot showing the form after this style update
Comment 3 Owen Leonard 2018-05-08 16:17:10 UTC Comment hidden (obsolete)
Comment 4 Mark Tompsett 2018-05-08 18:05:36 UTC Comment hidden (obsolete)
Comment 5 Katrin Fischer 2018-05-10 16:20:55 UTC Comment hidden (obsolete)
Comment 6 Jonathan Druart 2018-05-10 16:47:23 UTC
Looks uglier for me, at least when editing a patron:

https://screenshots.firefox.com/yo0iX4PG4RacDzOX/pro.kohadev.org
Comment 7 Owen Leonard 2018-07-03 14:06:36 UTC
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.
Comment 8 Marcel de Rooy 2018-07-03 14:18:29 UTC
(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.
Comment 9 Owen Leonard 2018-10-10 18:17:22 UTC Comment hidden (obsolete)
Comment 10 Lucas Gass 2018-12-24 16:45:28 UTC
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>
Comment 11 Pierre-Marc Thibault 2019-01-11 21:51:37 UTC
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>
Comment 12 Katrin Fischer 2019-01-13 20:47:17 UTC
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>
Comment 13 Nick Clemens 2019-01-28 14:12:41 UTC
Awesome work all!

Pushed to master for 19.05
Comment 14 Martin Renvoize 2019-02-01 12:40:17 UTC
Enhancement, will not be backported to 18.11.x series.