Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

[$40] Make toastr messages always visible #95

Closed
maxceem opened this issue Aug 12, 2021 · 5 comments
Closed

[$40] Make toastr messages always visible #95

maxceem opened this issue Aug 12, 2021 · 5 comments
Assignees
@MadOPcode
Labels
CF Issues for Community Fixes QA Pass on Dev QA Pass on Prod tcx_Assigned tcx_FixAccepted tcx_Paid
Milestone
mfe-taas-admin-ap...

Comments

@maxceem
Copy link
Contributor

maxceem commented Aug 12, 2021

Follow up issue from #82 (comment) issue 6:

the red toastr message is not visible if the resources per page is more and the modal also is still opened which is causing confusion.

When the page has a scrollbar and we make some operations at the bottom of the page we don't see the toastr which migh lea to confusion. For example when we perform some operations like editing payment or adding additional payment and it fails, the modal would stay open but we would not know that some issue happened.

To fix it we have to make sure that toastr is always visible even if scroll down.

The perfect solution if toastr message would be sticky see demo https://react-sticky.netlify.app/#/basic (this library seems to be maintained, but maybe there is a better one which is maintained https://www.npmjs.com/package/react-sticky-el)

  • When we on top of the page we show toastr at this place

    image

  • When we scroll a bit, we are showing it at the same place.

  • But when we scroll down and the toastr if going to be hided, we make it fixed 20px from the top.
@maxceem maxceem changed the title Make toastr messages alwasy visible [$40] Make toastr messages always visible Aug 12, 2021
@maxceem maxceem mentioned this issue Aug 12, 2021
Closed
@maxceem maxceem added the CF Issues for Community Fixes label Aug 12, 2021
MadOPcode added a commit to MadOPcode/micro-frontends-taas-admin-app that referenced this issue Aug 14, 2021
@MadOPcode
Adds fixes for topcoder-archive#80, topcoder-archive#82. Implements t…
a401de6 
…opcoder-archive#94, topcoder-archive#95.

- Adds fixes for adding and editing payments (topcoder-archive#80, topcoder-archive#82)
- Adds working period data reloading after adding and editing payments (topcoder-archive#94)
- Makes toastr messages always stay withing the viewport (topcoder-archive#95)
@MadOPcode MadOPcode mentioned this issue Aug 14, 2021
Merged
@sandhiyakavi
Copy link
Collaborator

Verified on Dev env.

image
image
image

@maxceem
Copy link
Contributor Author

maxceem commented Aug 18, 2021

Challenge https://www.topcoder.com/challenges/38b1552b-380b-4326-b222-7b0497b5858e has been created for this ticket.

This is an automated message for maxceem via Topcoder X

@maxceem
Copy link
Contributor Author

maxceem commented Aug 18, 2021

Challenge https://www.topcoder.com/challenges/38b1552b-380b-4326-b222-7b0497b5858e has been assigned to madopcode.

This is an automated message for maxceem via Topcoder X

@maxceem maxceem closed this as completed Aug 18, 2021
@maxceem
Copy link
Contributor Author

maxceem commented Aug 18, 2021

Payment task has been updated: https://www.topcoder.com/challenges/38b1552b-380b-4326-b222-7b0497b5858e
Payments Complete
Winner: madopcode
Copilot: maxceem
Challenge 38b1552b-380b-4326-b222-7b0497b5858e has been paid and closed.

This is an automated message for maxceem via Topcoder X

@maxceem maxceem reopened this Aug 18, 2021
@sandhiyakavi
Copy link
Collaborator

Verified on Prod Env. Working as expected.

cc: @nkumar-topcoder

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@MadOPcode MadOPcode

Labels
CF Issues for Community Fixes QA Pass on Dev QA Pass on Prod tcx_Assigned tcx_FixAccepted tcx_Paid
Projects
None yet
Milestone
mfe-taas-admin-app-v1.1
Development

No branches or pull requests
3 participants
@maxceem @MadOPcode @sandhiyakavi