Bug 26061 - Improve style of sidebar datepickers
Summary: Improve style of sidebar datepickers
Status: Pushed to master
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 24363
Blocks:
  Show dependency treegraph
 
Reported: 2020-07-24 15:58 UTC by Owen Leonard
Modified: 2020-07-30 15:47 UTC (History)
1 user (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:
20.11.00


Attachments
Bug 26061: Improve style of sidebar datepickers (1.63 KB, patch)
2020-07-24 16:10 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 26061: Improve style of sidebar datepickers (1.69 KB, patch)
2020-07-27 13:54 UTC, PTFS Europe Sandboxes
Details | Diff | Splinter Review
Bug 26061: Improve style of sidebar datepickers (1.69 KB, patch)
2020-07-29 21:56 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 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!