fix(demol): adjust option attribute for styling

gerdesque · Jun 27, 2020 · ac1f376 · ac1f376
1 parent 206f82d
commit ac1f376
Show file tree

Hide file tree

Showing 8 changed files with 1,638 additions and 1,831 deletions.
diff --git a/apps/demol/src/app/app.json b/apps/demol/src/app/app.json
diff --git a/libs/data/src/lib/data.tsx b/libs/data/src/lib/data.tsx
@@ -25,9 +25,10 @@ export enum ContentType {
 
 export interface Content {
   type: string
-  layer: string
   value: string
+  layer?: string
   title?: string
+  option?: string
 }
 
 export interface GroupProps {

diff --git a/libs/home/src/lib/home.tsx b/libs/home/src/lib/home.tsx
@@ -24,32 +24,32 @@ const home:ChapterProps = {
       {
         "type": "text",
         "value": "Anne Mühlich",
-        "layer": "avatar second"
+        "option": "avatar second"
       },
       {
         "type": "text",
         "value": "Gerd Müller",
-        "layer": "avatar second"
+        "option": "avatar second"
       },
       {
         "type": "text",
         "value": "Julia Kothe",
-        "layer": "avatar"
+        "option": "avatar"
       },
       {
         "type": "text",
         "value": "Lars Tunçay",
-        "layer": "avatar"
+        "option": "avatar"
       },
       {
         "type": "text",
         "value": "Nina Heinke",
-        "layer": "avatar"
+        "option": "avatar"
       },
       {
         "type": "text",
         "value": "Felix Werthschulte",
-        "layer": "avatar"
+        "option": "avatar"
       }
     ]
   },

diff --git a/libs/ui/src/lib/group/group.tsx b/libs/ui/src/lib/group/group.tsx
@@ -40,7 +40,7 @@ export const Group = ({
 
   const renderBackground = () => {
     return <div className={`parallax__layer parallax__layer--back`}>
-      <Image value={background} layer={'bg'}/>
+      <Image value={background} option={'bg'}/>
     </div>
   }
 

diff --git a/libs/ui/src/lib/image/image.tsx b/libs/ui/src/lib/image/image.tsx
@@ -5,8 +5,8 @@ import './image.scss';
 
 export interface ImageProps {
   value: string
-  layer?: string
   title?: string
+  option?: string
 }
 
 export const Image = (props: ImageProps) => {
@@ -17,7 +17,7 @@ export const Image = (props: ImageProps) => {
   }
 
   return (
-    <picture className={`chapter_picture ${props.layer}`} onClick={() => chooseCharacter()}>
+    <picture className={`chapter_picture ${props.option}`} onClick={() => chooseCharacter()}>
       <source srcSet={"./assets/"+props.value+IMAGE_SUFFIX} type='image/webp' />
       <source srcSet={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} type='image/png' />
       <img draggable="false" src={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.title || props.value} />

diff --git a/libs/ui/src/lib/redirect/redirect.tsx b/libs/ui/src/lib/redirect/redirect.tsx
@@ -4,16 +4,19 @@ import './redirect.scss';
 
 /* eslint-disable-next-line */
 export interface RedirectProps {
+  type: string
   value: string
-  layer: string
+  layer?: string
+  title?: string
+  option?: string
 }
 
 export const RedirectComponent = (props: RedirectProps) => {
   const [redirect, setRedirect] = useState(false);
   return (
     <>
-      <button type='button' className='link-button redirect' onClick={() => setRedirect(true)}>{props.value}</button>
-      {redirect && <Redirect exact to={props.layer} />}
+      <button type='button' className={`link-button redirect ${props.option}`} onClick={() => setRedirect(true)}>{props.title}</button>
+      {redirect && <Redirect exact to={props.value} />}
     </>
   );
 };

diff --git a/libs/ui/src/lib/text/text.tsx b/libs/ui/src/lib/text/text.tsx
@@ -4,13 +4,12 @@ import Fade from 'react-reveal/Fade';
 import './text.scss';
 
 export interface TextProps {
-  value: string,
-  title: string,
-  layer: string
+  value: string
+  option?: string
 }
 
 export const Text = (props: TextProps) => {
-  const isRevealing = props.title === 'reveal';
+  const isRevealing = props.option === 'reveal';
   if (isRevealing) {
     return (
       <div className='box'>
@@ -25,7 +24,7 @@ export const Text = (props: TextProps) => {
     );
   }
   return (
-    <div className={`box ${props.layer}`}>
+    <div className={`box ${props.option}`}>
       <Fade bottom duration={5000}>
         <p>{props.value}</p>
       </Fade>

diff --git a/libs/ui/src/lib/video/video.tsx b/libs/ui/src/lib/video/video.tsx
@@ -5,9 +5,9 @@ import './video.scss';
 
 /* eslint-disable-next-line */
 export interface VideoProps {
-  value: string,
-  layer: string
-  title: string
+  value: string
+  title?: string
+  option?: string
 }
 
 export const Video = (props: VideoProps) => {
@@ -19,7 +19,7 @@ export const Video = (props: VideoProps) => {
   };
 
   return (
-    <div className={`chapter_video ${props.layer} ${isPlaying ? 'theater' : ''}` }>
+    <div className={`chapter_video ${props.option} ${isPlaying ? 'theater' : ''}` }>
       <p>{props.title}</p>
       <video controls onPlaying={() => playVideo(true)} onPause={() => playVideo(false)}>
         <source type='video/mp4' src={"./assets/movies/"+props.value+VIDEO_SUFFIX}></source>