fix: adjust flexbox handling

gerdesque · Jun 13, 2020 · 4c86b83 · 4c86b83
1 parent 83b6769
commit 4c86b83
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 34 deletions.
diff --git a/apps/demol/src/app/app.json b/apps/demol/src/app/app.json
@@ -20,7 +20,7 @@
               "value": "daheim_karte"
             },
             {
-              "type": "misc",
+              "type": "smokingpit",
               "layer": "base",
               "value": "smokingpit"
             }
@@ -37,7 +37,7 @@
             },
             {
               "type": "image",
-              "layer": "fore",
+              "layer": "first",
               "value": "daheim_kinder"
             },
             {
@@ -58,17 +58,17 @@
             },
             {
               "type": "image",
-              "layer": "fore",
+              "layer": "third",
               "value": "daheim_karl"
             },
             {
-              "layer": "fore",
               "type": "image",
+              "layer": "third",
               "value": "daheim_gerda"
             },
             {
               "type": "image",
-              "layer": "fore",
+              "layer": "third",
               "value": "daheim_anna"
             }
           ]
@@ -84,7 +84,7 @@
             },
             {
               "type": "image",
-              "layer": "base",
+              "layer": "first",
               "value": "daheim_familie"
             }
           ]
@@ -100,33 +100,28 @@
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "3_Annas_Alltag",
               "title": "Annas Alltag"
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "4_Annas_Zuhause",
               "title": "Annas Lebensumfeld"
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "2_Anna_Familie",
               "title": "Annas Familie"
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "1_Anna_Großvater",
               "title": "Annas Großvater"
             },
-            {
-              "type": "image",
-              "layer": "back",
-              "value": "daheim_familie2"
-            },
             {
               "type": "text",
               "layer": "fore",
@@ -145,7 +140,7 @@
             },
             {
               "type": "image",
-              "layer": "base",
+              "layer": "first",
               "value": "daheim_werbung"
             },
             {
@@ -170,7 +165,7 @@
               "value": "Hilf Anna, ihn wieder zusammenzufügen, um zum Treffpunkt der Ortsgruppe zu gelangen. Ziehe dazu die durcheinandergewürfelten Kartenausschnitte in das entsprechende vorgezeichnete Feld. Wenn du das Puzzle richtig gelöst hast, kommst du zum nächsten Kapitel."
             },
             {
-              "type": "game",
+              "type": "puzzle",
               "layer": "base",
               "value": "puzzle"
             },

diff --git a/libs/data/src/lib/data.tsx b/libs/data/src/lib/data.tsx
@@ -14,7 +14,8 @@ export enum ContentType {
   Video = "video",
   Image = "image",
   Game = "game",
-  Misc = "misc",
+  SmokingPit = "smokingpit",
+  Puzzle = "puzzle",
   Decission = "decission"
 }
 

diff --git a/libs/ui/src/lib/chapter/chapter.scss b/libs/ui/src/lib/chapter/chapter.scss
@@ -24,19 +24,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-flow: row wrap;
 
     &--fore {
       transform: translateZ(90px) scale(.7);
       z-index: 1;
-
-      picture {
-        width: 75%;
-        display: flex;
-      }
-
-      &.row > * {
-        width: 25%;
-      }
     }
 
     &--base {
@@ -46,7 +38,6 @@
       filter: saturate(.8);
 
       picture {
-        display: flex;
         margin-top: 50%;
       }
     }
@@ -56,7 +47,6 @@
       z-index: 3;
 
       picture {
-        display: flex;
         margin-top: -25%;
       }
     }

diff --git a/libs/ui/src/lib/image/image.scss b/libs/ui/src/lib/image/image.scss
@@ -4,3 +4,16 @@
   filter: saturate(.8);
   opacity: .9;
 }
+
+.first {
+  width: 75%;
+}
+
+.third {
+  width: 33%;
+}
+
+img {
+  height:auto;
+  width: 100%;
+}
diff --git a/libs/ui/src/lib/image/image.tsx b/libs/ui/src/lib/image/image.tsx
@@ -5,11 +5,12 @@ import './image.scss';
 /* eslint-disable-next-line */
 export interface ImageProps {
   value: string
+  width?: string
 }
 
 export const Image = (props: ImageProps) => {
   return (
-    <picture className="chapter_picture">
+    <picture className={`chapter_picture ${props.width}`}>
       <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.value} />

diff --git a/libs/ui/src/lib/smokingpit/smokingpit.tsx b/libs/ui/src/lib/smokingpit/smokingpit.tsx
@@ -11,7 +11,7 @@ export interface SmokingpitProps {
 export const Smokingpit = (props: SmokingpitProps) => {
   return (
     <div className='smokingPit'>
-      <Image value='daheim_arbeiterschaft' />
+      <Image value='daheim_arbeiterschaft'/>
       <div className='smoke'>
         <span className='s0'></span>
         <span className='s1'></span>

diff --git a/libs/ui/src/lib/text/text.scss b/libs/ui/src/lib/text/text.scss
@@ -4,5 +4,5 @@
 }
 
 .column {
-  flex-direction: column;
+  flex-flow: column nowrap;
 }
diff --git a/libs/ui/src/lib/video/video.scss b/libs/ui/src/lib/video/video.scss
@@ -3,10 +3,14 @@ video {
   height: auto;
 }
 
-.video {
+.chapter_video {
   position: relative;
 }
 
+.fourth {
+  width: 25%;
+}
+
 .play {
   position: absolute;
   top: 50%;

diff --git a/libs/ui/src/lib/video/video.tsx b/libs/ui/src/lib/video/video.tsx
@@ -6,6 +6,7 @@ import './video.scss';
 /* eslint-disable-next-line */
 export interface VideoProps {
   value: string,
+  width: string
   title: string
 }
 
@@ -16,7 +17,7 @@ export const Video = (props: VideoProps) => {
   // };
 
   return (
-    <div className="video">
+    <div className={`chapter_video ${props.width}`}>
       <p>{props.title}</p>
       <video>
         <source type='video/mp4' src={"./assets/movies/"+props.value+VIDEO_SUFFIX}></source>