From ea09978b39f74c538666e86da3bdefc54369c0a8 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 27 Oct 2022 16:25:05 +0000 Subject: [PATCH] Bug 31943: Date inputs wider than other inputs This patch sets a width on Flatpickr instances so that they better match the typical width of a text input field. The patch also corrects the "X" ("clear date") link color to return it to the original red color. In doing this I've defined a new $warning-text-color variable and replaced other instances of #CC0000 with this variable. I've also tweaked the appearance of the Flatpickr shortcut links ("Today," "Tomorrow," etc) so that they match other links in Koha. To test, apply the patch and rebuild the staff interface CSS. - Go to patrons and locate a patron record. - Edit the patron. - In the patron entry form, confirm that the "Date of birth" field matches the width of the text fields around it. - The "X" should be red. - Click the date of birth field to trigger the calendar popup. - The "Yesterday" and "Today" links should be colored the default green seen elsewhere in the staff interface. --- .../prog/css/src/_flatpickr.scss | 9 +++++-- .../prog/css/src/_variables.scss | 1 + .../prog/css/src/staff-global.scss | 26 +++++++++---------- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss index 34d1ce6ffe..1c2357c406 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss @@ -946,6 +946,7 @@ span.flatpickr-weekday { border-style: inset; border-width: 1px; padding: 3px 3px 3px 20px; + width: calc( 100% - 40px ); &:focus { border-radius: 0; @@ -986,10 +987,14 @@ span.flatpickr-weekday { .shortcut-buttons-flatpickr-button { background: transparent none; border: 0; - color: #004D99; + color: #006100; font-size: 90%; margin: 2px; + &:active { + box-shadow: none; + } + &:disabled { color: #999; @@ -999,7 +1004,7 @@ span.flatpickr-weekday { } &:hover { - color: #538200; + text-decoration: underline; } } } diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss index 72a8aa17ba..fa21f5052f 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss @@ -1,4 +1,5 @@ $green-text-color: #006100; +$warning-text-color: #CC0000; $background-color-primary: #408540; $background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9); $background-color-modal: lighten( saturate( $background-color-secondary, 5 ), 40 ); 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 a6d30023b6..4fb655ef22 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -69,12 +69,12 @@ a { } &.clear_date { - color: $green-text-color; + color: $warning-text-color; font-size: 130%; vertical-align: middle; &:hover { - color: $green-text-color; + color: lighten( $warning-text-color, 35% ); text-decoration: none; } } @@ -635,7 +635,7 @@ label, } &.required { - color: #C00; + color: $warning-text-color; } } @@ -767,7 +767,7 @@ ol { .overdue, .debit { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -1016,7 +1016,7 @@ div { i { &.fa-exclamation { - color: #CC0000; + color: $warning-text-color; font-style: italic; padding: 0 .3em; } @@ -1442,13 +1442,13 @@ input[type='text']:read-only:focus { } .error { - color: #CC0000; + color: $warning-text-color; } // Font Awesome icons i { &.error { - color: #CC0000; + color: $warning-text-color; } &.success { @@ -1726,7 +1726,7 @@ i { .deny { i { &.fa { - color: #CC0000; + color: $warning-text-color; } } } @@ -2505,7 +2505,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -2528,7 +2528,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -3593,7 +3593,7 @@ span { } &.circ-hlt { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -3608,7 +3608,7 @@ span { } &.required { - color: #C00; + color: $warning-text-color; font-style: italic; margin-left: .5em; } @@ -3748,7 +3748,7 @@ input.renew { } .onsite_checkout { - color: #CC0000; + color: $warning-text-color; } .onsite-checkout-only { -- 2.20.1