fix(menu): add positioning

ubilabs · Oct 23, 2019 · 0758185 · 0758185
1 parent 734af29
commit 0758185
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 44 deletions.
diff --git a/src/scripts/components/app/app.styl b/src/scripts/components/app/app.styl
@@ -6,24 +6,31 @@
   height: 100%
   font-family: Arial, Helvetica, sans-serif
 
+.layout
+  position: absolute
+  z-index: 1
+  display: flex
+  flex-direction: row
+  width: 100%
+  height: 100%
+  pointer-events: none
+
 .story
   display: flex
   flex-direction: row
   width: 100%
   height: 100%
 
-.layoutContainer
-  position: absolute
-  bottom: 0
+.nav
+  z-index: 1
   display: flex
   flex-direction: row
   justify-content: flex-start
   align-items: flex-end
   width: 100%
   height: 100%
-  pointer-events: none
 
-.layoutContainer > *
+.nav > *
   pointer-events: auto
 
 .timeslider

diff --git a/src/scripts/components/app/app.tsx b/src/scripts/components/app/app.tsx
@@ -42,44 +42,46 @@ const TranslatedApp: FunctionComponent = () => {
     <Router>
       <IntlProvider locale={language} messages={translations[language]}>
         <div className={styles.app}>
-          <div className={styles.story}>
-            <Globes />
-            <Route path="/stories/:storyId/:page">
-              <Story />
-            </Route>
-          </div>
+          <div className={styles.layout}>
+            <Switch>
+              <Route path="/" exact>
+                <TimeSlider />
+                <StoriesButton />
 
-          <Switch>
-            <Route path="/" exact>
-              <StoriesButton />
-              <TimeSlider />
+                <div className={styles.nav}>
+                  <Menu />
+                  <div className={styles.timeslider} />
+                  <ProjectionMenu />
+                  <LayerSelector />
+                </div>
+              </Route>
 
-              <div className={styles.layoutContainer}>
-                <Menu />
-                <div className={styles.timeslider} />
-                <ProjectionMenu />
-                <LayerSelector />
-              </div>
-            </Route>
+              <Route path="/present">
+                <PresentationSelector />
+              </Route>
 
-            <Route path="/present">
-              <PresentationSelector />
-            </Route>
+              <Route path="/showcase">
+                <ShowcaseSelector />
+              </Route>
 
-            <Route path="/showcase">
-              <ShowcaseSelector />
-            </Route>
+              <Route path="/stories" exact>
+                <StoriesSelector />
+              </Route>
 
-            <Route path="/stories" exact>
-              <StoriesSelector />
-            </Route>
+              <Route
+                path="/stories/:storyId"
+                render={props => (
+                  <Redirect to={`${props.match.url}/0`} />
+                )}></Route>
+            </Switch>
+          </div>
 
-            <Route
-              path="/stories/:storyId"
-              render={props => (
-                <Redirect to={`${props.match.url}/0`} />
-              )}></Route>
-          </Switch>
+          <div className={styles.story}>
+            <Globes />
+            <Route path="/stories/:storyId/:page">
+              <Story />
+            </Route>
+          </div>
         </div>
       </IntlProvider>
 

diff --git a/src/scripts/components/presentation-selector/presentation-selector.styl b/src/scripts/components/presentation-selector/presentation-selector.styl
@@ -1,9 +1,9 @@
 .presentationSelector
-  position: absolute
-  bottom: 0
+  position: relative
   width: 100%
   height: 100%
   background-color: #fff
+  pointer-events: auto
 
 .title
   text-align: center

diff --git a/src/scripts/components/showcase-selector/showcase-selector.styl b/src/scripts/components/showcase-selector/showcase-selector.styl
@@ -1,9 +1,9 @@
 .showcaseSelector
-  position: absolute
-  bottom: 0
+  position: relative
   width: 100%
   height: 100%
   background-color: #fff
+  pointer-events: auto
 
 .title
   text-align: center

diff --git a/src/scripts/components/stories-button/stories-button.styl b/src/scripts/components/stories-button/stories-button.styl
@@ -7,7 +7,7 @@
   background-color: #ccc
   color: #000
   text-decoration: none
-  cursor: pointer
+  pointer-events: auto
 
 .storiesLabel
   display: flex

diff --git a/src/scripts/components/stories-selector/stories-selector.styl b/src/scripts/components/stories-selector/stories-selector.styl
@@ -1,9 +1,9 @@
 .storiesSelector
-  position: absolute
-  bottom: 0
+  position: relative
   width: 100%
   height: 100%
   background-color: #fff
+  pointer-events: auto
 
 .title
   text-align: center

diff --git a/src/scripts/components/story/story.styl b/src/scripts/components/story/story.styl
@@ -5,6 +5,7 @@
 
 .sidepanel
   position: relative
+  height: 100%
   background-color: #fff
   pointer-events: auto