feat(ui): adjust scss styling for first chapter

gerdesque · Jun 14, 2020 · ab15273 · ab15273
1 parent f42e872
commit ab15273
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 64 deletions.
diff --git a/apps/demol/src/app/app.json b/apps/demol/src/app/app.json
@@ -37,7 +37,7 @@
             },
             {
               "type": "image",
-              "layer": "first",
+              "layer": "third",
               "value": "daheim_kinder"
             },
             {
@@ -74,7 +74,7 @@
           ]
         },
         {
-          "grouped": false,
+          "grouped": true,
           "row": false,
           "content": [
             {
@@ -84,14 +84,15 @@
             },
             {
               "type": "image",
-              "layer": "first",
+              "layer": "primary",
               "value": "daheim_familie"
             }
           ]
         },
         {
           "grouped": true,
           "row": true,
+          "background": "daheim_familie2",
           "content": [
             {
               "value": "Worüber möchtest du mehr erfahren?",
@@ -108,7 +109,7 @@
               "type": "video",
               "layer": "fourth",
               "value": "4_Annas_Zuhause",
-              "title": "Annas Lebensumfeld"
+              "title": "Annas Umfeld"
             },
             {
               "type": "video",
@@ -123,8 +124,8 @@
               "title": "Annas Großvater"
             },
             {
-              "type": "text",
-              "layer": "fore",
+              "type": "redirect",
+              "layer": "republic",
               "value": "Interessiert mich nicht, ich will wissen, wie sie zur Kinderrepublik kommt."
             }
           ]
@@ -140,7 +141,7 @@
             },
             {
               "type": "image",
-              "layer": "first",
+              "layer": "third",
               "value": "daheim_werbung"
             },
             {
@@ -170,8 +171,8 @@
               "value": "puzzle"
             },
             {
-              "type": "text",
-              "layer": "fore",
+              "type": "redirect",
+              "layer": "family",
               "value": "Du kennst eine Abkürzung und gehst direkt mit Anna zur Ortsgruppe"
             }
           ]

diff --git a/apps/demol/src/app/app.tsx b/apps/demol/src/app/app.tsx
@@ -2,16 +2,17 @@ import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Home } from '@gerdesque/home';
 import { Nav, ChapterComponent } from '@gerdesque/ui';  
-
+import { Chapter } from '@gerdesque/data';
 import './app.scss';
 
 import app from './app.json';
 
+
 export const App = () => {
 
   const renderChapter = (routerProps) => {
     const chapterId = parseInt(routerProps.match.params.id)
-    const chapter = app.chapters.find(chapterObj => chapterObj.id === chapterId)
+    const chapter: Chapter = app.chapters.find(chapterObj => chapterObj.id === chapterId)
     return (chapter && <ChapterComponent {...chapter} />)
   }
 

diff --git a/libs/home/src/lib/home.tsx b/libs/home/src/lib/home.tsx
@@ -1,24 +1,32 @@
 import React from 'react';
 import { ChapterComponent } from '@gerdesque/ui';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
-import { ContentType } from '@gerdesque/data';
+import { Chapter } from '@gerdesque/data';
 import './home.scss';
 
 /* eslint-disable-next-line */
 export interface HomeProps {}
 
-const home = {
+const home:Chapter = {
   link: "home",
-  content: [
+  groups: [
   {
-    "type": ContentType.Text,
-    "value": "Natürlich besteht die Kinderrepublik nicht nur aus Karl, Anna und Gerda. Damit ihr mit den beiden dieses Abenteuer erleben könnt, hat Florian eine Website entworfen, die Gerd umgesetzt hat. Anne hat dafür unter dem Einsatz von Felix‘ Sprecherstimme Trickfilme produziert."
-  },
-  {
-    "type": ContentType.Text,
-    "value": "Unsere Website richtet sich an all jene, die sich spielerisch mit dem Thema „Kinderrepublik“ und partizipativer Jugendarbeit in der ersten Hälfte des 20. Jahrhunderts beschäftigen wollen und erfahren möchten, wie solche Zeltlager als Form früher und praktischer Demokratiebildung funktioniert haben. In Zeiten wie jetzt, wo mehr und mehr Menschen sich von den demokratischen Institutionen abwenden, lohnt es sich, einen Blick zurückzuwerfen und zu schauen, wie Demokratiebildung insbesondere für bildungsfernere Schichten in der Vergangenheit funktioniert hat und inwiefern wir dafür etwas für unsere heutige Zeit lernen können."
+    "grouped": false,
+    "row": false,
+    "content": [
+      {
+        "type": "text",
+        "value": "Natürlich besteht die Kinderrepublik nicht nur aus Karl, Anna und Gerda. Damit ihr mit den beiden dieses Abenteuer erleben könnt, hat Florian eine Website entworfen, die Gerd umgesetzt hat. Anne hat dafür unter dem Einsatz von Felix‘ Sprecherstimme Trickfilme produziert.",
+        "layer": "fore"
+      },
+      {
+        "type": "text",
+        "value": "Unsere Website richtet sich an all jene, die sich spielerisch mit dem Thema „Kinderrepublik“ und partizipativer Jugendarbeit in der ersten Hälfte des 20. Jahrhunderts beschäftigen wollen und erfahren möchten, wie solche Zeltlager als Form früher und praktischer Demokratiebildung funktioniert haben. In Zeiten wie jetzt, wo mehr und mehr Menschen sich von den demokratischen Institutionen abwenden, lohnt es sich, einen Blick zurückzuwerfen und zu schauen, wie Demokratiebildung insbesondere für bildungsfernere Schichten in der Vergangenheit funktioniert hat und inwiefern wir dafür etwas für unsere heutige Zeit lernen können.",
+        "layer": "back"
+      }
+    ]
   }
-]
+  ]
 };
 
 export const Home = (props: HomeProps) => {

diff --git a/libs/ui/src/lib/chapter/chapter.scss b/libs/ui/src/lib/chapter/chapter.scss
@@ -29,6 +29,7 @@
     &--fore {
       transform: translateZ(90px) scale(.7);
       z-index: 1;
+      align-content: baseline;
     }
 
     &--base {
@@ -41,6 +42,7 @@
     &--back {
       transform: translateZ(-300px) scale(2);
       z-index: 3;
+      align-content: baseline;
     }
 
     &--deep {

diff --git a/libs/ui/src/lib/chapter/chapter.spec.tsx b/libs/ui/src/lib/chapter/chapter.spec.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Chapter from './chapter';
+import { ChapterComponent } from './chapter'; 
 
 describe(' Chapter', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Chapter />);
+    const { baseElement } = render(<ChapterComponent link="home" />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/libs/ui/src/lib/chapter/chapter.stories.tsx b/libs/ui/src/lib/chapter/chapter.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { text } from '@storybook/addon-knobs';
 import { ChapterComponent } from './chapter';
 
 export default { title: 'Design System/Chapter' };
 
-export const intro = () => <ChapterComponent link="intro" />;
+export const intro = () => <ChapterComponent link="home" />;
diff --git a/libs/ui/src/lib/chapter/chapter.tsx b/libs/ui/src/lib/chapter/chapter.tsx
@@ -7,7 +7,9 @@ import Decission from '../decission/decission';
 import Smokingpit from '../smokingpit/smokingpit';
 import Puzzle from '../puzzle/puzzle';
 import Scrollicon from '../scrollicon/scrollicon';
+import Redirect from '../redirect/redirect';
 import { makeStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { Chapter, ContentType } from '@gerdesque/data';
 import { IMAGE_SUFFIX } from '@gerdesque/data';
@@ -19,10 +21,19 @@ export const ChapterComponent = (props: Chapter) => {
     chapter: {
       backgroundImage: `url(${"./assets/"+ props.link+IMAGE_SUFFIX})`,
       boxShadow: '0 0 8px 8px #dcd5cc inset',
+      flexDirection: 'column',
       },
   }));
   const classes = useStyles();
 
+  const [volume, setVolume] = React.useState(false);
+
+  const audio = new Audio(`./assets/sounds/${props.link}.mp3`)
+  const startAudio = () => {
+    setVolume(!volume);
+    volume ? audio.pause() : audio.play();
+  }
+
   const renderChapterGroups = () => {
     return props.groups.map((group, index) => 
     <div key={index} className='parallax__group'>
@@ -33,6 +44,7 @@ export const ChapterComponent = (props: Chapter) => {
   const renderContent = (content, index) => {
     return <Fragment key={index}>
       {content.type === ContentType.Text && <Text value={content.value} />}
+      {content.type === ContentType.Redirect && <Redirect value={content.value} />}
       {content.type === ContentType.Video && <Video value={content.value} width={content.layer} title={content.title} />}
       {content.type === ContentType.Image && <Image value={content.value} width={content.layer}/>}
       {content.type === ContentType.Decission && <Decission value={content.value} />}
@@ -64,13 +76,12 @@ export const ChapterComponent = (props: Chapter) => {
       <div className='parallax__group parallax__header'>
         <div className={`parallax__layer parallax__layer--base ${classes.chapter}`}>
           <Title text={props.name} />
-          <audio controls loop>
-            <source src={"./assets/sounds/daheim.mp3"} type='audio/mpeg' />
-          </audio>
+          <Chip onClick={() => startAudio()} label={volume ? "Ton aus" : "Ton an"} />
           <Scrollicon/>
         </div>
       </div>
       {props.groups && renderChapterGroups()}
       </div>
   );
 };
+export default ChapterComponent;
diff --git a/libs/ui/src/lib/image/image.scss b/libs/ui/src/lib/image/image.scss
@@ -5,8 +5,8 @@
   opacity: .9;
 }
 
-.first {
-  width: 75%;
+.primary {
+  width: 66%;
 }
 
 .third {

diff --git a/libs/ui/src/lib/image/image.tsx b/libs/ui/src/lib/image/image.tsx
@@ -16,6 +16,9 @@ export const Image = (props: ImageProps) => {
       <img draggable="false" src={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.value} />
     </picture>
   )
+
+  // <button type='button' className='link-button' key={avatar} onMouseOut={() => this.setState({ isHover: false })} onMouseOver={() => this.setState({ isHover: avatar })} onClick={() => this.setState({ avatar: avatar })}>{avatar}</button>)}
+
 };
 
 export default Image;
diff --git a/libs/ui/src/lib/puzzle/puzzle.scss b/libs/ui/src/lib/puzzle/puzzle.scss
@@ -1,24 +1,6 @@
-// .puzzleBox {
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   justify-content: center;
-// }
-
-// .puzzleBox .description {
-//   width: 75vw;
-//   margin: auto;
-//   text-align: center;
-// }
-
-// .puzzle{
-//   display: flex;
-//   flex-flow: row wrap;
-// }
-
-// .puzzle > * {
-//   flex: 1 50%;
-// }
+.puzzle {
+  display: flex;
+}
 
 .puzzle__solved-board{
   position: relative;

diff --git a/libs/ui/src/lib/puzzle/puzzle.tsx b/libs/ui/src/lib/puzzle/puzzle.tsx
@@ -47,15 +47,13 @@ class Puzzle extends Component {
 
   render() {
     return (
-      <div className='puzzleBox'>
-        <div className='puzzle'>
-          <ul className='puzzle__shuffled-board'>
-            {this.state.shuffled.map((piece, i) => this.renderPieceContainer(piece, i, "shuffled"))}
-          </ul>
-          <ol className='puzzle__solved-board' style={{ backgroundImage: `url(./assets/daheim_puzzle.webp)` }}>
-            {this.state.solved.map((piece, i) => this.renderPieceContainer(piece, i, "solved"))}
-          </ol>
-        </div>
+      <div className='puzzle'>
+        <ul className='puzzle__shuffled-board'>
+          {this.state.shuffled.map((piece, i) => this.renderPieceContainer(piece, i, "shuffled"))}
+        </ul>
+        <ol className='puzzle__solved-board' style={{ backgroundImage: `url(./assets/daheim_puzzle.webp)` }}>
+          {this.state.solved.map((piece, i) => this.renderPieceContainer(piece, i, "solved"))}
+        </ol>
       </div>
     );
   }

diff --git a/libs/ui/src/lib/smokingpit/smokingpit.scss b/libs/ui/src/lib/smokingpit/smokingpit.scss
@@ -1,6 +1,7 @@
 .smokingPit {
   width: 100%;
   position: relative;
+  margin-top: 15%;
 }
 
 .smokingPit img {
@@ -11,7 +12,7 @@
   position: absolute;
   margin-left: -17.5px;
   margin-top: 17.5px;
-  bottom: 51%;
+  bottom: 88%;
   left: 89.5%;
 }
 

diff --git a/libs/ui/src/lib/text/text.scss b/libs/ui/src/lib/text/text.scss
@@ -1,8 +1,11 @@
 .box {
-  text-align: center;
-  width: 75%;
+  width: 80%;
 }
 
 .column {
   flex-flow: column nowrap;
+}
+
+p {
+  text-align: center;
 }
diff --git a/libs/ui/src/lib/video/video.scss b/libs/ui/src/lib/video/video.scss
@@ -8,7 +8,8 @@ video {
 }
 
 .fourth {
-  width: 25%;
+  flex: 1 25%;
+  padding: 5px;
 }
 
 .play {