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>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 0e4c61c..22d9d4c 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -193,6 +193,11 @@ aside {
             [type="text"] {
                 width: 100%;
             }
+
+            .hasDatepicker {
+                margin-right: 3px;
+                width: calc(100% - 20px);
+            }
         }
     }
 }