Commit Graph

17 Commits

Author SHA1 Message Date
wattroll
aecbabf3d3 Language menu (#48)
* 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)
2022-04-13 10:22:09 +01:00
wattroll
f024d2195a Add LanguageSwitch component for changing app's language (#25)
Co-authored-by: msramalho <19508417+msramalho@users.noreply.github.com>
2022-04-06 22:54:42 +01:00
hgrsd
9b7e02ef61 add satellite overlay toggle 2022-03-22 22:57:56 -04:00
Lachlan Kermode
e99398ceab Cleaning technical debt (#192)
* abstract Space component to switch out Map

* basic viewing possible

* restructure components dir

* all jsx --> js

* App.jsx --> App.js

* comment out 3d for now
2021-01-19 22:22:12 +01:00
Zac Ioannidis
81e00fd917 Using prettier for linting 2020-12-08 13:13:50 +00:00
Lachlan Kermode
8b507fde96 some styling fixes (#178)
* logos at bottom

* use GT-Zirkon font

* update filter/category copy

* add a fallback font

* stop tracking

* make timeline smaller for smaller laptops

* fix for firefox responsive intropopup

* mobile fallback

* update design system version
2020-10-29 18:14:32 +01:00
Lachlan Kermode
973619d178 WIP: filters as narratives always 2020-06-26 17:10:48 +02:00
Lachlan Kermode
95d9977df9 clean up styles 2019-08-16 11:12:25 +01:00
Lachlan Kermode
a7480a0e56 clean SCSS and add browser notify 2019-08-15 15:50:40 +01:00
Lachlan Kermode
451b76481d make default cover cleaner 2019-08-15 15:03:53 +01:00
Lachlan Kermode
44598d602f wip: restyling overlay 2019-02-13 18:08:46 +00:00
Lachlan Kermode
ed9af1cbf6 add cover with toggle 2019-02-07 12:04:47 +00:00
Lachlan Kermode
3efdf48c52 fix source scrolling, layout and arrows 2019-01-30 18:06:43 +00:00
Lachlan Kermode
1d6988edce use video-react 2018-12-26 10:21:57 +01:00
Lachlan Kermode
c10b741325 synchronous updateSource logic 2018-12-21 12:47:25 +00:00
Franc Camps-Febrer
38eca7110c Create Narrative card 2018-12-07 08:50:28 +00:00
Franc FC
92e03fdb07 Clean master commit 2018-10-31 14:11:03 -04:00