https://snipboard.io/03cGy7.jpg
Maybe Replace .flatpickr-input { padding: 3px 3px 3px 20px; } With padding: 3px
Confirmed.
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.
The calendar icon disappeared. https://snipboard.io/kdVOqH.jpg
(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.
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.
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>
I can confirm that the calendar icons stays using yarn build, signing off. Jonathan, do you want to give it another go?
? confirmed! That's weird!
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>
Note that the commit title should tell what the patch *does*, not what the bug is!
Pushed to master for 22.11. Nice work everyone, thanks!
Arf this has impact on display in tables such as holds table. I created Bug 32259
And this one is still way too wide: https://snipboard.io/Ym1QqO.jpg
And this one is still way too wide: https://snipboard.io/N6Omph.jpg