Bug 31943 - Date inputs wider than other inputs
Summary: Date inputs wider than other inputs
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 30952
Blocks: 32259 32606
  Show dependency treegraph
 
Reported: 2022-10-24 12:05 UTC by Jonathan Druart
Modified: 2023-06-08 22:32 UTC (History)
3 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.11.00


Attachments
Bug 31943: Date inputs wider than other inputs (5.31 KB, patch)
2022-10-27 16:39 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 31943: Date inputs wider than other inputs (5.36 KB, patch)
2022-10-30 09:53 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 31943: Date inputs wider than other inputs (5.38 KB, patch)
2022-10-31 06:58 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Druart 2022-10-24 12:05:22 UTC
https://snipboard.io/03cGy7.jpg
Comment 1 Jonathan Druart 2022-10-24 12:08:42 UTC
Maybe
Replace 
.flatpickr-input {
  padding: 3px 3px 3px 20px;
}
With padding: 3px
Comment 2 Katrin Fischer 2022-10-24 19:59:35 UTC
Confirmed.
Comment 3 Owen Leonard 2022-10-27 16:39:10 UTC
Created attachment 142723 [details] [review]
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.
Comment 4 Jonathan Druart 2022-10-28 08:30:33 UTC
The calendar icon disappeared.
https://snipboard.io/kdVOqH.jpg
Comment 5 Owen Leonard 2022-10-28 18:05:24 UTC
(In reply to Jonathan Druart from comment #4)
> The calendar icon disappeared.
> https://snipboard.io/kdVOqH.jpg

I found this to be true when I rebuild CSS using "yarn css" but not when using "yarn build." Which did you use?

I don't understand the reason for the difference.
Comment 6 Owen Leonard 2022-10-28 18:22:31 UTC
In fact I find this to be true when running "yarn css" on master as well. It seems to have to do with the way the icon color is encoded during the build process.

fill='#369', which appears when we use "yarn css" doesn't work.

fill='%23369', with "yarn build," works.
Comment 7 Katrin Fischer 2022-10-30 09:53:57 UTC
Created attachment 142811 [details] [review]
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.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 8 Katrin Fischer 2022-10-30 09:54:42 UTC
I can confirm that the calendar icons stays using yarn build, signing off. Jonathan, do you want to give it another go?
Comment 9 Jonathan Druart 2022-10-31 06:57:45 UTC
? confirmed! That's weird!
Comment 10 Jonathan Druart 2022-10-31 06:58:15 UTC
Created attachment 142822 [details] [review]
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.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 11 Jonathan Druart 2022-10-31 06:59:02 UTC
Note that the commit title should tell what the patch *does*, not what the bug is!
Comment 12 Tomás Cohen Arazi 2022-11-03 12:05:34 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!
Comment 13 Fridolin Somers 2022-11-17 21:39:19 UTC
Arf this has impact on display in tables such as holds table.
I created Bug 32259
Comment 14 Jonathan Druart 2022-11-18 06:43:34 UTC Comment hidden (obsolete)
Comment 15 Jonathan Druart 2022-11-18 06:44:17 UTC
And this one is still way too wide: https://snipboard.io/N6Omph.jpg