Update Layering/Interaction of Components
NOTE This is only meant to help people make decisions while styling components.
This highlights my mental model for the application and will hopefully help drive some of the UI decisions we make. Some of the components interact and overlay each other when enabled at the same time. This is the ordering/proper layering of components within the application, starting from the bottom:
Base Page
- about.component
Panels
- map.component & list.component & settings.component (are all at the same height). When each panel opens it resizes any other panels that are open based on the available space. We probably don't need a drop shadow from the list/settings over the map since we are saying that they are all at the same height.
Template Skin
- header.component (all content, slides up and down under the header)
Alerts (
- details-info.component (floats above the list/map/settings, can always be closed.) DISCUSS
- auto update Material Snackbar
- feed-warning.component
Discussion
The only thing that might be controversial about this is that the details-info.component
is always visible. Currently, in our existing interface the event details info is only visible above the list & map components (not the settings component). However, based on how the list and settings interact (to constrain each other's total width while simultaneously expanded) it appears that list and settings slide in over the map at the same height. If the event details info slides in over the map and list panels, then it should also slide in over the settings panel. If people are worried about this obscuring info in the settings panel, it can be closed at any time to avoid interfering with any content.
If we were to keep the current logic where the settings panel obscures the event details info (when only the settings panel is expanded), by that same logic the settings panel should be changed to slide over the list panel when expanded rather than interacting with it.
If this doesn't make sense I could make some images.