Bug 26061

Summary:	Improve style of sidebar datepickers
Product:	Koha	Reporter:	Owen Leonard <oleonard>
Component:	Templates	Assignee:	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
Circulation function:
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 (lukeg) 2020-08-13 14:58:32 UTC

enhancement will not be backported to 20.05.x series