feat(layout): adjust flex handling for image/text/video

gerdesque · Feb 14, 2021 · 3390ccc · 3390ccc
1 parent d8e39ea
commit 3390ccc
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 37 deletions.
diff --git a/libs/ui/src/lib/chapter/chapter.scss b/libs/ui/src/lib/chapter/chapter.scss
@@ -25,6 +25,7 @@
     align-items: center;
     justify-content: center;
     flex-flow: row wrap;
+    padding: 0 16px;
 
     &--fore {
       transform: translateZ(90px) scale(.7);
@@ -76,3 +77,34 @@
     filter: blur(0) 
   }
 }
+
+.full {
+  flex: 1 80%;
+}
+
+.primary {
+  flex: 1 66%;
+}
+
+.second {
+  flex: 0 50%;
+}
+
+.third {
+  flex: 0 33%;
+}
+
+.fourth {
+  flex: 0 25%;
+}
+
+.fifth {
+  flex: 0 20%;
+}
+
+@media screen and (max-device-height: 860px){
+
+  .parallax__group {
+      height: 150vh;
+  }
+}
diff --git a/libs/ui/src/lib/chapter/chapter.tsx b/libs/ui/src/lib/chapter/chapter.tsx
@@ -8,11 +8,9 @@ import {AppContext } from '../chapter/context';
 
 import { ChapterProps } from '@gerdesque/data';
 
-
-
 export const Chapter = (props: ChapterProps) => {
 
-  const [character, setCharacter] = useContext(AppContext);
+  const [character] = useContext(AppContext);
 
   const renderChapterGroups = () => {
     return props.groups.map((group, index) =>

diff --git a/libs/ui/src/lib/image/image.scss b/libs/ui/src/lib/image/image.scss
@@ -33,23 +33,6 @@ img {
   text-align: center;
 }
 
-.full {
-  width: 80%;
-}
-
-.primary {
-  width: 66%;
-}
-
-.second {
-  width: 50%;
-}
-
-.third {
-  width: 33%;
-  padding: 5px;
-}
-
 .avatar img {
   border-radius: 50%;
 }

diff --git a/libs/ui/src/lib/text/text.scss b/libs/ui/src/lib/text/text.scss
@@ -2,10 +2,6 @@
   width: 80%;
 }
 
-.third {
-  width: 33%;
-}
-
 p {
   text-align: center;
 }

diff --git a/libs/ui/src/lib/title/title.scss b/libs/ui/src/lib/title/title.scss
@@ -4,7 +4,7 @@
 
   h1 {
   line-height: 1.2;
-  font-size: 3em;
+  font-size: #{'clamp(1em, 1em + 2vw, 3em)'};
   font-family: LinolschriftHeavy,arial,sans-serif;
   font-weight: normal;
   }

diff --git a/libs/ui/src/lib/video/video.scss b/libs/ui/src/lib/video/video.scss
@@ -10,14 +10,4 @@ video::cue {
 
 .chapter_video {
   position: relative;
-}
-
-.fourth {
-  flex: 1 25%;
-  padding: 5px;
-}
-
-.fifth {
-  flex: 1 20%;
-  padding: 5px;
 }
diff --git a/libs/ui/src/lib/video/video.tsx b/libs/ui/src/lib/video/video.tsx
@@ -1,5 +1,6 @@
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import { SUBTITLE_SUFFIX, VIDEO_SUFFIX } from '@gerdesque/data';
+import { AppContext } from '../chapter/context';
 
 /* eslint-disable-next-line */
 export interface VideoProps {
@@ -9,6 +10,7 @@ export interface VideoProps {
 }
 
 export const Video = (props: VideoProps) => {
+  const [,,language] = useContext(AppContext);
   const [isPlaying, setPlaying] = useState(false);
 
   const playVideo = (playing) => {
@@ -20,7 +22,7 @@ export const Video = (props: VideoProps) => {
       <p>{props.title}</p>
       <video controls onPlaying={() => playVideo(true)} onPause={() => playVideo(false)}>
         <source type='video/mp4' src={"./assets/movies/"+props.value+VIDEO_SUFFIX}></source>
-        <track kind="subtitles" label="English" srcLang="en" src={"./assets/movies/"+props.value+SUBTITLE_SUFFIX} default/>
+        {language === 'en' && <track kind="subtitles" label="English" srcLang="en" src={"./assets/movies/"+props.value+SUBTITLE_SUFFIX} default/>}
         Your browser does not support the video tag.
       </video>
     </div>);