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)
Civilian Harm in Ukraine TimeMap
Visit ukraine.bellingcat.com.
Read Bellingcat's article about this project in English (UK), Русский (Россия)
TimeMap is a tool for exploration, monitoring and classification of incidents in time and space, originally forked from forensic-architecture/timemap.
Development
- Use node v14.x.x
npm installto setup- adjust any local configs in config.js
CONFIG=config.js npm run devornpm run devif the file is named config.js- For more info visit the original repo
Contributing
Please check our issues page for desired contributions, and feel free to suggest your own.
Configurations
Documentation of config.js
SERVER_ROOT- points to the API base addressXXXX_EXT- points to the respective JSONs of the data, for events, sources, and associationsMAPBOX_TOKEN- used to load the custom stylesDATE_FMTandTIME_FMT- how to consume the events' date/time from the APIstore.app.language- configures default languagestore.app.languages- configures available languagesstore.app.map- configures the initial map view and the UX limitsstore.app.cluster- configures how clusters/bubbles are grouped into larger clusters, largerradiusmeans bigger cluster bubblesstore.app.timeline- configure timeline ranges, zoom level options, and default rangestore.app.intro- the intro panel that shows on startstore.app.cover- configuration for the full page cover, thedescriptionis a list of markdown entities, can also contain htmlstore.ui.colorsandstore.ui.maxNumOfColorsare applied to filters, as they are selected
Easiest way to deploy the static files is through
nvm use 14npm run build(rather:CI=false npm run build)- copy the files to your server, for example to
/var/www/html