Bug 26061

Summary: Improve style of sidebar datepickers
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: lucas, sally.healey
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00
Bug Depends on: 24363    
Bug Blocks:    
Attachments: Bug 26061: Improve style of sidebar datepickers
Bug 26061: Improve style of sidebar datepickers
Bug 26061: Improve style of sidebar datepickers

Description Owen Leonard 2020-07-24 15:58:49 UTC
Browser support of the CSS calc() function is broad enough that we can use it to prevent the datepicker icon from wrapping below the form field.
Comment 1 Owen Leonard 2020-07-24 16:10:34 UTC
Created attachment 107359 [details] [review]
Bug 26061: Improve style of sidebar datepickers

This patch makes a small change to the staff interface CSS so that
datepicker form fields in sidebar forms don't force the datepicker icon
onto a second line.

The change uses the CSS calc() function to specify that form fields with
a .hasDatepicker class (dynamically added by jqueryUI) have a width of
100% minus 20 pixels, leaving room for the datepicker icon.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface).

- View a page in the staff interface which has a datepicker field in a
  sidebar form and confirm that the icon stays on the same line as the
  firm field at varying browser widths. Examples:

  - Reports -> Saved SQL reports
  - Circulation -> Overdues
  - Acquisitions -> Late orders
Comment 2 PTFS Europe Sandboxes 2020-07-27 13:54:53 UTC
Created attachment 107426 [details] [review]
Bug 26061: Improve style of sidebar datepickers

This patch makes a small change to the staff interface CSS so that
datepicker form fields in sidebar forms don't force the datepicker icon
onto a second line.

The change uses the CSS calc() function to specify that form fields with
a .hasDatepicker class (dynamically added by jqueryUI) have a width of
100% minus 20 pixels, leaving room for the datepicker icon.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface).

- View a page in the staff interface which has a datepicker field in a
  sidebar form and confirm that the icon stays on the same line as the
  firm field at varying browser widths. Examples:

  - Reports -> Saved SQL reports
  - Circulation -> Overdues
  - Acquisitions -> Late orders

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Comment 3 Katrin Fischer 2020-07-29 21:56:50 UTC
Created attachment 107541 [details] [review]
Bug 26061: Improve style of sidebar datepickers

This patch makes a small change to the staff interface CSS so that
datepicker form fields in sidebar forms don't force the datepicker icon
onto a second line.

The change uses the CSS calc() function to specify that form fields with
a .hasDatepicker class (dynamically added by jqueryUI) have a width of
100% minus 20 pixels, leaving room for the datepicker icon.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface).

- View a page in the staff interface which has a datepicker field in a
  sidebar form and confirm that the icon stays on the same line as the
  firm field at varying browser widths. Examples:

  - Reports -> Saved SQL reports
  - Circulation -> Overdues
  - Acquisitions -> Late orders

Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Comment 4 Katrin Fischer 2020-07-29 21:57:44 UTC
I think this is a good improvement, but I wonder if those date fields wouldn't look a little nicer if they were even a little shorter - at the moment they are very wide compared to date fields in other places (patron record for example).
Comment 5 Owen Leonard 2020-07-30 11:02:25 UTC
(In reply to Katrin Fischer from comment #4)
> I think this is a good improvement, but I wonder if those date fields
> wouldn't look a little nicer if they were even a little shorter

The date fields in the sidebar are different than elsewhere because all form fields in the sidebar are styled to be the same width. I think this consistency looks good.
Comment 6 Jonathan Druart 2020-07-30 15:47:36 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 7 Lucas Gass 2020-08-13 14:58:32 UTC
enhancement will not be backported to 20.05.x series