[Modal] Introducing "overlay fullscreen modal"

[lubber-de]

Description

The current fullscreen modal was (according to the docs) supposed to "use the entire size of the screen". This was not really true, because there still was lots of margin left, so you could see the dimmer, and also modals with little content were not even close to fullscreen.

This PR makes it possible now and adds a new variant to the modal module:

overlay fullscreen modal

When used, it is now really using and overlaying the entire viewport, regardless of the content. 🙂

Testcase

https://jsfiddle.net/sbru45e1/

Screenshot

Closes

#522

[y0hami]

Maybe this should be entire screen modal instead of entire fullscreen modal

[lubber-de]

@hammy2899 Mmh, don't think so. But that would also mean to add more css to the code because it currently relies on many fullscreen settings already there which we would need to double or at least add entire.screen to all existing fullscreen css settings. Unnecessary with no value IMHO

[lubber-de]

Ok, after research there are only 4 css settings... So if everybody wants to change the name, I am fine 😊

[y0hami]

@fomantic/core

[ColinFrick]

For me entire screen and fullscreen seem interchangeable and don't convey the difference.

Additionally Wikipedia defines a modal as following:

a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it.

Maybe we could use a word like cover / overlay or borderless / gutterless

[y0hami]

@ColinFrick that makes sense, I think cover, overlay or gutterless work the best. Maybe it should be fullscreen overlay modal since that makes the most semantic sense.

[prudho]

The fullscreen term bother me a little here. In the future we may want to display a modal into a viewport and not in the entire page.

[lubber-de]

Doesn't this feature cover the whole background? So fullscreen covered modal may fits better?
overlay sounds like I still can see something underneath.. But probably that's my only first impression
gutterless would be something for grid (there is a demand left to completely omit padding there)
So, if we choose gutterless we could use this naming aswell for grid (separate pr)

[y0hami]

I think cover and overlay are very similar in semantic terms. Cover meaning you put something over another thing but it doesn't necessarily have to hide what your covering (you can cover the right side of a square but the left side would still be showing). Overlay somewhat means the same thing, you can overlay something but you don't necessarily need to overlay the whole thing.

I think adding fullscreen to describes it in enough detail to make sense, cover fullscreen would then mean you are covering the fullscreen. This would also work for overlay fullscreen since it would mean your putting the modal over the fullscreen.

As for gutterless I think it is more of a grid term since the modal doesn't have a gutter, the "gutter" for a modal is defined via its size unlike the grid which will always have a gutter.

[lubber-de]

Ok, then let's use overlay fullscreen modal. We already have overlay sidebar and overlay nag while there isn't any covered anywhere in the framework

@ColinFrick @prudho Agree?

[prudho]

@lubber-de agreed !

LGTM

[lubber-de]

Changed the code and PR description/screenshots/fiddle accordingly
Adjusted fiddle: https://jsfiddle.net/sbru45e1/

[y0hami]

LGTM

[ColinFrick]

LGTM