I was documenting Bug 33473 and noticed a very tiny bug in the styling of the pop-up menu options to print or send a receipt by email. To recreate: 1. Go to a patron's account 2. Make sure they have an email address in their account 3. Go to their Accounting tab 4. Create a manual invoice 5. Pay the fee 6. Go to the Transactions tab and click the Receipt button --> There should be two options: Print and Email --> Note that the options are slightly misaligned (the Print is slightly more to the left) 7. Hover the mouse cursor over one option and then the next --> The background for the Email option goes over the edge of the pop-up menu on the right
Possibly caused by bug 39448
Created attachment 186170 [details] [review] Bug 40727: Fix minor styling bug To test: 1. Go to a patron's account 2. Make sure they have an email address in their account 3. Go to their Accounting tab 4. Create a manual invoice 5. Pay the fee 6. Go to the Transactions tab and click the Receipt button --> There should be two options: Print and Email --> Note that the options are slightly misaligned (the Print is slightly more to the left) 7. Hover the mouse cursor over one option and then the next --> The background for the Email option goes over the edge of the pop-up menu on the right 8. Apply the patch. Do a yarn build and then restart_all. Next clear the cache in your local browser and refresh the page. 9. Repeat steps 6 & 7. Email is now properly aligned and when you hover over it the button no longer overflows. 10. Sign off -- have a great day :D
I think a simpler solution would be to remove these lines from staff-global.scss, starting at line 2220: td { &.actions { white-space: nowrap; a, button { display: inline-block; - margin-left: .3rem; - - - &:first-child { - margin-left: 0; - } } } It doesn't appear to be necessary for us to add the left margin manually.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39448 added minor spacing to the action buttons. Without this spacing, the layout can look a bit tight—though that might come down to personal preference. My patch just ensures that "Email" isn’t affected by the spacing applied to the action buttons. I'm open to whatever might work best though
Created attachment 186263 [details] [review] Bug 40727: Fix minor styling bug To test: 1. Go to a patron's account 2. Make sure they have an email address in their account 3. Go to their Accounting tab 4. Create a manual invoice 5. Pay the fee 6. Go to the Transactions tab and click the Receipt button --> There should be two options: Print and Email --> Note that the options are slightly misaligned (the Print is slightly more to the left) 7. Hover the mouse cursor over one option and then the next --> The background for the Email option goes over the edge of the pop-up menu on the right 8. Apply the patch. Do a yarn build and then restart_all. Next clear the cache in your local browser and refresh the page. 9. Repeat steps 6 & 7. Email is now properly aligned and when you hover over it the button no longer overflows. 10. Sign off -- have a great day :D Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
The fix works. I don't have an opinions as to how the change was made, but it does fix the problem that I noticed. Thank you Laura!
Created attachment 191492 [details] [review] Bug 40727: (alternate) Remove unnecessary .actions CSS This patch takes an alternate approach of removing some CSS which isn't strictly necessary. I think there was a time when the Bootstrap buttons didn't come with their own margins and we needed to add it manually. This change will slightly affect the margins of any buttons inside a td.actions, but the default margin looks fine to me. Examples: - Administration -> Patron categories - Tools -> Notices and slips
Laura's patch isn't incorrect, but I think it's better to remove CSS where we have the option.
Created attachment 191498 [details] [review] Bug 40727: (alternate) Remove unnecessary .actions CSS This patch takes an alternate approach of removing some CSS which isn't strictly necessary. I think there was a time when the Bootstrap buttons didn't come with their own margins and we needed to add it manually. This change will slightly affect the margins of any buttons inside a td.actions, but the default margin looks fine to me. Examples: - Administration -> Patron categories - Tools -> Notices and slips Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
idem as my previous comment :) The alternate fix works as well. I'm not knowledgeable enough to have an opinion as to how it is fixed. Thanks Owen!
Applying patches fails on merge conflict.
Created attachment 192613 [details] [review] Bug 40727: (alternate) Remove unnecessary .actions CSS This patch takes an alternate approach of removing some CSS which isn't strictly necessary. I think there was a time when the Bootstrap buttons didn't come with their own margins and we needed to add it manually. This change will slightly affect the margins of any buttons inside a td.actions, but the default margin looks fine to me. Examples: - Administration -> Patron categories - Tools -> Notices and slips Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
Created attachment 192614 [details] [review] Bug 40727: (alternate) Remove unnecessary .actions CSS This patch takes an alternate approach of removing some CSS which isn't strictly necessary. I think there was a time when the Bootstrap buttons didn't come with their own margins and we needed to add it manually. This change will slightly affect the margins of any buttons inside a td.actions, but the default margin looks fine to me. Examples: - Administration -> Patron categories - Tools -> Notices and slips Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>