CSS Modal fade/show

[clash99]

Due to differing modal references, some modals fade in while some just show. Fix to all be consistent.

[clash99]

I also notice the the pages under the modal background are changing (from showing records in a list to showing no records). I wouldn't expect the underlying page to change at all when the modal opened.

Before modal is open:

After modal is open:

[ian-ross]

These two issues are somewhat related. The reason that some modals fade in and some just appear is that we have two different kinds of modals: "real modals", where the HTML for the modal is included in the page template (and has a class of "modal fade" to make it fade in) and a # link is used to trigger modal display; and "fake modals", which are full pages with their own URLs that just happen to have a modal displayed over the top of them (like /organizations/new that you showed above). I don't think there's a way to make the "fake modals" fade in without doing some extra JS to trigger the fade-in when the page is ready, which is kind of nasty.

Worse though, is the fact that these "modals" are really not modals at all, but are separate pages, which means that the page content may not be the same as the referring page. You can see this particularly clearly on the project dashboard. If you're on the project overview and you select "Add resource", the underlying page changes to the resource list view with the "add resource" modal over the top of it. If you press "Cancel" in the modal, you end up in the resource list view, not back in the overview. (Oliver says this used to work, using some HTTP referrer trickery to get back to the right page, but got broken somewhere along the way. In any case, even if the "Cancel" button works correctly, the underlying page view still changes when the modal is activated, which is obviously not right.)

The only way to resolve this effectively is for every page where modals may occur to include all the HTML for all the possible modals that may appear on that page. That's going to require quite a bit of restructuring of the templates to make it work, so it probably needs to be discussed to come up with a way to manage it smoothly.

Oliver says he'll think about it a bit, and I will too.

[seav]

For the "fake modals", is there really a value in presenting them to the user as modals? For confirmation actions ("Are you sure you want to archive the project?") modals make sense. But for other forms that take up a lot of the user's time, such as the add organization form, they can be real pages with not much difference in user cognition.

[clash99]

I think we should move this one out since nothing is really "broken", just messy/ inconsistent. Once I have time to look at everything all together, I will revisit with a recommendation.

@wonderchook - Can we move this to Sprint 8? or even 9?

[wonderchook]

@clash99 yes, I only left it in sprint 7 because I wasn't sure how many items we'd be able to do with the UI.

[seav]

The separate issue regarding modals vs. pages was forked as #572, which should be resolved first. For the modals that stay as modals, this issue is for making their fade-in appearance consistent across the website, if such fading is really desired.

[dpalomino]

Not currently relevant, closing issue. Please reopen if needed.