Bug 24363

Summary: Datepicker calendar is not always sexy
Product: Koha Reporter: Caroline Cyr La Rose <caroline.cyr-la-rose>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: minor    
Priority: P5 - low CC: 1joynelson, david, jonathan.druart, katrin.fischer, lucas, martin.renvoize
Version: master   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
This bug fixes display issues with the date picker and some other style changes that were inadvertently introduced by bug 24181.
Version(s) released in:
20.05.00
Bug Depends on: 24181, 24546    
Bug Blocks: 26061    
Attachments: Screenshot showing the date acquired field in additem
Bug 24363: Small CSS change to align datepicker within input
Bug 24363: Vertical align datepicker icon on additem
Bug 24363: Datepicker calendar is not sexy on additem.pl
Bug 24363: Do not use the two-value syntax for background-position-x
Bug 24363 - Browse button broken
Bug 24363: Do not use the two-value syntax for background-position-x
Bug 24363: (follow-up) Remove height from input[type='file']
Bug 24363: Datepicker calendar is not sexy on additem.pl
Bug 24363: Do not use the two-value syntax for background-position-x
Bug 24363: (follow-up) Remove height from input[type='file']
Image "diff" of the two screenshots
Bug 24363: Move the datepicker icon out of the input
Bug 24363: Move the datepicker icon out of the input
Bug 24363: Move the datepicker icon out of the input

Description Caroline Cyr La Rose 2020-01-07 13:45:38 UTC
Created attachment 96893 [details]
Screenshot showing the date acquired field in additem

I just wanted to mention that the datepicker calendar icon looks weird in the additem form (probably elsewhere too).

Could we make it bigger and centered? Also the ellipsis (...) is not next to the box as it was before.
Comment 1 Caroline Cyr La Rose 2020-01-07 13:47:28 UTC
I use Firefox 71.0 on Ubuntu 18.04 btw... just in case this changes something
Comment 2 Lucas Gass 2020-01-07 15:21:32 UTC Comment hidden (obsolete)
Comment 3 Caroline Cyr La Rose 2020-01-07 19:04:30 UTC
in additem, I would center it also, so that it looks like the other ones.

I tried to track downs all the other pages where the calendar icon appears (when the bullet is a star, the calendar is wonky):
- memberentry
- moremember (when adding a manual restriction)
* request (when placing a hold and in the existing holds list)
- holidays
- lateorders
* suggestion (when adding a new suggestion (in suggestion management section), when searching for a suggestion)
- invoices
- aqbudgetperiods
* neworderempty (when adding an item while placing an order)
- histsearch
- parcels
- orderreceive
* circulation (when picking a due date or a renewal date)
* returns (when specifying a return date)
- pendingreserves
- reserveratios
- subscription-add
- serials-edit (in the receiving table, but also in the item form if the issue has an item)
- checkexpiration
- subscription-numberpatterns
- clubs-add-modify
* import-borrowers
* cleanborrowers
* modborrowers
- review
* batchMod
- export
* inventory
- viewlog
- koha-news
- scheduler
- categories
- smart-rules

I may be missing some (or a lot).
Comment 4 Jonathan Druart 2020-01-07 21:37:18 UTC Comment hidden (obsolete)
Comment 5 Jonathan Druart 2020-01-07 21:43:21 UTC
(In reply to Jonathan Druart from comment #4)
> Created attachment 96968 [details] [review] [review]
> Bug 24363: Vertical align datepicker icon on additem

That was my try to fix the additem form, but it was not perfect as the '...' was not displaying good.
Comment 6 Jonathan Druart 2020-01-13 11:18:47 UTC
On the hold list view: https://snipboard.io/iLdfAg.jpg
Comment 7 Katrin Fischer 2020-01-13 11:28:39 UTC
I was encountering quite a bit of broken displays yesterday - feel we might need to revert this for hte moment.
Comment 8 Jonathan Druart 2020-01-13 11:56:56 UTC
(In reply to Katrin Fischer from comment #7)
> I was encountering quite a bit of broken displays yesterday - feel we might
> need to revert this for hte moment.

I do not think we should revert it, it only impacts master. Also the fix should be quite small (fix all issues with a few CSS lines).
Just need to find the correct fix :)
Comment 9 Owen Leonard 2020-01-16 17:41:11 UTC Comment hidden (obsolete)
Comment 10 Jonathan Druart 2020-01-21 10:36:36 UTC
I see it wider than other inputs: https://snipboard.io/pemyLA.jpg
Comment 11 Jonathan Druart 2020-01-21 10:41:02 UTC
Looks ok without padding-right: 18px;
Comment 12 Katrin Fischer 2020-01-21 18:00:25 UTC
I'll add some more problem pages:

* Reports: /cgi-bin/koha/reports/issues_stats.pl
Comment 13 David Nind 2020-01-31 09:36:28 UTC
Everything looks good in Firefox.

However with Google Chrome the icon is aligned to the inside left of the box and the start of the date overlays it.

I can post screenshots if required.
Comment 14 Jonathan Druart 2020-02-03 12:54:48 UTC Comment hidden (obsolete)
Comment 15 Jonathan Druart 2020-02-03 12:55:18 UTC
(In reply to David Nind from comment #13)
> Everything looks good in Firefox.
> 
> However with Google Chrome the icon is aligned to the inside left of the box
> and the start of the date overlays it.
> 
> I can post screenshots if required.

I confirm that on both Chrome and Chromium, inspector says "invalid property value" for rule background-position-x.

The new patch should fix it.
Comment 16 David Nind 2020-02-03 18:31:06 UTC
This now looks good to me! (Firefox + Google Chrome on Ubuntu 18.04)

Should Jonathan's patch include the updated CSS file? Originally I had to regenerate the CSS.
Comment 17 David Nind 2020-02-03 18:54:01 UTC Comment hidden (obsolete)
Comment 18 Jonathan Druart 2020-02-04 09:25:06 UTC Comment hidden (obsolete)
Comment 19 Jonathan Druart 2020-02-04 09:27:24 UTC
(In reply to David Nind from comment #16)
> Should Jonathan's patch include the updated CSS file? Originally I had to
> regenerate the CSS.

No, it should not. Resubmitted.

(In reply to David Nind from comment #17)
> Created attachment 98355 [details]
> Bug 24363 - Browse button broken
> 
> Actually, the patch "breaks" the 'Browse' button in Firefox. Displays fine
> in Google Chrome. See the attachment with before and after screenshots.
> 
> It did this as well when originally tested.

Indeed, I recreate that. Apparently it is caused by:

+    height: 26px;


Owen, could you explain where do come from the @mixin default-input rules? Do we really need them?
Comment 20 Owen Leonard 2020-02-04 13:16:21 UTC
> > Actually, the patch "breaks" the 'Browse' button in Firefox.

The difference is almost imperceptible in Firefox on Windows, so I'm glad you caught it.

> Owen, could you explain where do come from the @mixin default-input rules?
> Do we really need them?

We don't *need* them but using a @mixin lets us define the rules once and apply them to more than one element. I don't think the mixin is a problem if we add "height:unset" to input[type='file'].
Comment 21 Owen Leonard 2020-02-04 13:16:44 UTC Comment hidden (obsolete)
Comment 22 David Nind 2020-02-05 07:55:23 UTC Comment hidden (obsolete)
Comment 23 David Nind 2020-02-05 07:55:27 UTC Comment hidden (obsolete)
Comment 24 David Nind 2020-02-05 07:55:30 UTC Comment hidden (obsolete)
Comment 25 David Nind 2020-02-05 07:59:08 UTC
Magic! Have tested in Google Chrome and Firefox Developer Edition on Ubuntu 18.04. Everything looks much better - date pickers and upload buttons.

While I didn't check all the screens with data pickers, I checked a fair number of them and they all look consistent.
Comment 26 Jonathan Druart 2020-02-05 08:30:34 UTC
I think there is still a problem with the inputs (radio now):
Before: https://snipboard.io/plg4Ye.jpg
After : https://snipboard.io/KHaCVI.jpg

Alignment and padding/margin?
Comment 27 Owen Leonard 2020-02-05 12:42:40 UTC Comment hidden (obsolete)
Comment 28 Jonathan Druart 2020-02-05 13:32:57 UTC
I am worried they are not the only regressions we are going to introduce with this patch as it can impact all the inputs.
Comment 29 Jonathan Druart 2020-02-13 15:08:52 UTC
Also notice that the input in the header has now a shadow.

I think that if we cannot fix the regressions brought by bug 24181 easily, we will need to revert it.
Comment 30 Jonathan Druart 2020-02-13 15:15:19 UTC
Created attachment 98857 [details] [review]
Bug 24363: Move the datepicker icon out of the input
Comment 31 Jonathan Druart 2020-02-13 15:16:53 UTC
(In reply to Jonathan Druart from comment #30)
> Created attachment 98857 [details] [review] [review]
> Bug 24363: Move the datepicker icon out of the input

What about this patch?

https://snipboard.io/Lud1yE.jpg
https://snipboard.io/d47B2a.jpg
https://snipboard.io/0YQydX.jpg
Comment 32 David Nind 2020-02-14 06:38:47 UTC
Created attachment 98893 [details] [review]
Bug 24363: Move the datepicker icon out of the input

Signed-off-by: David Nind <david@davidnind.com>
Comment 33 Katrin Fischer 2020-02-17 22:40:56 UTC
Created attachment 99139 [details] [review]
Bug 24363: Move the datepicker icon out of the input

Signed-off-by: David Nind <david@davidnind.com>
Comment 34 Martin Renvoize 2020-02-19 16:13:10 UTC
Nice work everyone!

Pushed to master for 20.05
Comment 35 Joy Nelson 2020-03-13 00:42:11 UTC
enhancement not backported to 19.11.x