feat(story-timeslider): add timeslider to stories (#640)

* feat(story-timeslider): add timeslider to stories * feat(story-timeslider): resizing, move layer description on mobile * refactor(story-timeslider): remove comments
ubilabs · Sep 22, 2020 · e7f7bec · e7f7bec
1 parent ef14eaa
commit e7f7bec
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 13 deletions.
diff --git a/src/scripts/components/layers/time-slider/time-slider.tsx b/src/scripts/components/layers/time-slider/time-slider.tsx
@@ -30,11 +30,15 @@ import {globeSpinningSelector} from '../../../selectors/globe/spinning';
 
 import styles from './time-slider.styl';
 
+interface Props {
+  className?: string;
+}
+
 // debounce the time update
 const DELAY = 200;
 
 // eslint-disable-next-line complexity
-const TimeSlider: FunctionComponent = () => {
+const TimeSlider: FunctionComponent<Props> = ({className = ''}) => {
   const selectedLayerIds = useSelector(selectedLayerIdsSelector);
   const {mainId, compareId} = selectedLayerIds;
   const dispatch = useDispatch();
@@ -132,8 +136,10 @@ const TimeSlider: FunctionComponent = () => {
     rangeMain && rangeCompare && styles.compareInput
   );
 
+  const classes = cx(styles.timeSlider, className);
+
   return (
-    <div className={styles.timeSlider}>
+    <div className={classes}>
       {isPlaying && (
         <TimePlayback
           minTime={combined.min}

diff --git a/src/scripts/components/main/data-viewer/data-viewer.tsx b/src/scripts/components/main/data-viewer/data-viewer.tsx
@@ -33,11 +33,13 @@ import styles from './data-viewer.styl';
 
 interface Props {
   backgroundColor: string;
+  hideNavigation?: boolean;
   markers?: Marker[];
 }
 
 const DataViewer: FunctionComponent<Props> = ({
   backgroundColor,
+  hideNavigation,
   markers = []
 }) => {
   const dispatch = useDispatch();
@@ -165,7 +167,7 @@ const DataViewer: FunctionComponent<Props> = ({
           action: () => setIsMainActive(false)
         })}
 
-      {showGlobeNavigation && <GlobeNavigation />}
+      {!hideNavigation && showGlobeNavigation && <GlobeNavigation />}
     </div>
   );
 };

diff --git a/src/scripts/components/stories/layer-description/layer-description.styl b/src/scripts/components/stories/layer-description/layer-description.styl
@@ -1,11 +1,17 @@
 @require '../../../../variables.styl'
 
 .layerDescription
-  position: absolute
-  right: 0
-  bottom: 0
-  padding: emCalc(40px) emCalc(75px)
+  overflow-y: auto
+  margin: remCalc(15px) remCalc(25px)
+  height: 50px
   color: $textDefault
   text-align: center
   font-size: 11px
   font-family: NotesEsaBold
+
+@media screen and (max-width: 480px)
+  .layerDescription
+    position: absolute
+    top: 0
+    left: 0
+    height: 40px
diff --git a/src/scripts/components/stories/story/story.styl b/src/scripts/components/stories/story/story.styl
@@ -26,15 +26,49 @@
   height: 100%
   background-color: $plainBlack
 
+.layerDetails
+  position: absolute
+  right: 0
+  bottom: 0
+  left: 0
+  display: flex
+  flex-direction: column
+  justify-content: flex-end
+  padding: inherit
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%)
+
+.storySlider
+  position: unset
+  padding: emCalc(40px) 0 emCalc(30px)
+  background: none
+
+  > div
+    min-width: 25%
+    width: 60%
+
 @media screen and (max-width: 480px)
   .main
     display: flex
     flex-direction: column
     overflow-y: auto
 
     > :last-child
-      height: 300px
+      height: 350px
 
     > *
-      padding: 25px
+      padding: emCalc(10px) emCalc(25px) 0 emCalc(25px)
       width: inherit
+
+  .layerDetails
+    height: inherit
+    background: none
+    pointer-events: none
+
+    > *
+      pointer-events: all
+
+  .storySlider
+    position: absolute
+    right: 0
+    bottom: 0
+    padding: emCalc(40px) 0 emCalc(20px)
diff --git a/src/scripts/components/stories/story/story.tsx b/src/scripts/components/stories/story/story.tsx
@@ -20,6 +20,7 @@ import {StoryMode} from '../../../types/story-mode';
 import {Slide, Story as StoryType} from '../../../types/story';
 import {GlobeProjection} from '../../../types/globe-projection';
 import {SlideType} from '../../../types/slide-type';
+import TimeSlider from '../../layers/time-slider/time-slider';
 
 import styles from './story.styl';
 
@@ -75,10 +76,17 @@ const Story: FunctionComponent = () => {
 
     return (
       <div className={styles.globeContainer}>
-        <DataViewer markers={slide.markers} backgroundColor={'#000000'} />
-        {slide.layerDescription && (
-          <LayerDescription layerDescription={slide.layerDescription} />
-        )}
+        <DataViewer
+          hideNavigation
+          markers={slide.markers}
+          backgroundColor={'#000000'}
+        />
+        <div className={styles.layerDetails}>
+          <TimeSlider className={styles.storySlider} />
+          {slide.layerDescription && (
+            <LayerDescription layerDescription={slide.layerDescription} />
+          )}
+        </div>
       </div>
     );
   };