mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-11 04:48:36 +03:00
aecbabf3d3
* refactor(Toolbar): change the way z-order of elements is expressed
**Before:**
`.toolbar` was placed over the content of `#toolbar-wrapper`.
**After:**
`.toolbar-panels` are placed behind the content of `#toolbar-wrapper`.
**Reason:**
allows descendants of `.toolbar` to place themselves behind it.
Context
-------
Previously we had the following setup
(`*` means the root of stacking context, `-` means normal child):
* div#toolbar-wrapper { z-index: 10, position: fixed }
* div.toolbar { z-index: 10, position: relative }
- div.toolbar-tabs
- div.toolbar-tab
- div.toolbar-tab
- div.toolbar-tab
* div.toolbar-panels { position: fixed }
* div.map-wrapper { position: fixed }
* div.cover-container { z-index: 501, position: absolute }
That was achivieving what was necessary:
- `#toolbar-wrapper` tree is placed over the `.map-wrapper`,
- `.cover-container` tree is placed over the `#toolbar-wrapper`,
- `.toolbar` tree is placed over `.toolbar-panels`
Problem
-------
The practical problem with it was not being able to make descendants
of `.toolbar` go behind it when sliding away (as they were within
`.toolbar`'s own stacking context).
We needed to add a small language menu which would be positioned next
to the button that opens it, and slide away behind the toolbar like
other toolbar-panels.
Solution
--------
I changed the stacking to be the following:
* div#toolbar-wrapper { z-index: 10, position: fixed }
- div.toolbar
- div.toolbar-tabs
- div.toolbar-tab
- div.toolbar-tab
- div.toolbar-tab
* div.toolbar-panels { z-index: -1, position: fixed }
* div.map-wrapper { position: fixed }
* div.cover-container { z-index: 501, position: absolute }
This explicitly places `.toolbar-panels` behind everything else within
the stacking context created by `#toolbar-wrapper`.
Outcome
-------
Now `.language-menu` can easily be added as:
* div#toolbar-wrapper { z-index: 10, position: fixed }
- div.toolbar
- div.toolbar-tabs
- div.toolbar-tab
- div.toolbar-tab { position: relative }
* div.language-menu { z-index: -1, position: absolute }
- div.toolbar-tab
* div.toolbar-panels { z-index: -1, position: fixed }
* feat(Toolbar): add language menu (button and a sliding out panel)
19 lines
382 B
SCSS
19 lines
382 B
SCSS
@import "variables";
|
|
@import "common";
|
|
@import "loading";
|
|
@import "header";
|
|
@import "cardstack";
|
|
@import "narrativecard";
|
|
@import "overlay";
|
|
@import "map";
|
|
@import "timeline";
|
|
@import "toolbar";
|
|
@import "infopopup";
|
|
@import "notification";
|
|
@import "mediaplayer";
|
|
@import "cover";
|
|
@import "search";
|
|
@import "satelliteoverlaytoggle";
|
|
@import "languageswitch";
|
|
@import "languagemenu";
|