fix(app): adjust navigation item text

gerdesque · Jun 30, 2020 · c94fbba · c94fbba
1 parent c7dcbcb
commit c94fbba
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 16 deletions.
diff --git a/apps/demol/src/app/app.json b/apps/demol/src/app/app.json
@@ -1376,6 +1376,7 @@
           "grouped": true,
           "row": false,
           "character": "Gerda",
+          "info": "Tipp: Manche Dinge werden in der Kinderrepublik dringend benötigt, andere gab es Ende der 1920er Jahre noch gar nicht. Wenn du fertig gepackt hast, kommst du zum nächsten Kapitel.",
           "content": [{
               "type": "text",
               "value": "Nachdem Gerda fertig gepackt hat, ist ihr Rucksack voll und schwer. Sie freut sich riesig, denn nun kann es endlich losgehen. Trotzdem hat sie ein schlechtes Gewissen, wenn sie ihre Mutter für drei Wochen allein mit ihren beiden Geschwistern lässt.",
@@ -2807,7 +2808,7 @@
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "second",
               "value": "02_1455_(91)"
             }
           ]
@@ -2931,7 +2932,6 @@
           "row": false,
           "content": [{
               "type": "text",
-              "layer": "fore",
               "option": "reveal",
               "value": "Gerda hat den beiden Kindern beim Spielen zugeschaut und findet Annas Idee großartig. Sie will das Spiel mit ihrer Ortsgruppe ausprobieren, wenn sie sich auf das nächste Zeltlager vorbereiten."
             },
@@ -2942,7 +2942,6 @@
             },
             {
               "type": "text",
-              "layer": "fore",
               "value": "Da Gerda nur wenige Jahre älter als Anna und Karl ist, hat sie direkt einen guten Draht zu den beiden. Sie hören ihr gespannt zu, wie sie berichtet, wie sie zur Sozialistischen Arbeiterjugend gekommen ist und warum sie Helferin in der Kinderrepublik geworden ist. "
             }
           ]
@@ -2953,7 +2952,6 @@
           "background": "103",
           "content": [{
               "type": "text",
-              "layer": "fore",
               "value": "Vielleicht haben Anna und Karl in ein paar Jahren ja auch Lust, als Helfer*in eine Kinderrepublik zu unterstützen. Genügend Erfahrungen gesammelt haben sie immerhin schon."
             },
             {
@@ -2968,7 +2966,6 @@
           "row": false,
           "content": [{
               "type": "text",
-              "layer": "fore",
               "value": "Bis dahin nehmen sie sich jedoch vor, an einem der nächsten Arbeiterjugendtage teilzunehmen. Dieser findet alle ein bis zwei Jahre statt und wird voraussichtlich 1931 in Frankfurt am Main ausgetragen."
             },
             {
@@ -2978,7 +2975,6 @@
             },
             {
               "type": "text",
-              "layer": "fore",
               "value": "Dort treffen sich Arbeiterkinder aus der ganzen Republik, bekunden ihre Solidarität und schmieden Pläne für eine bessere Zukunft."
             }
           ]
@@ -2988,7 +2984,6 @@
           "row": false,
           "content": [{
               "type": "text",
-              "layer": "fore",
               "value": "Die Kinderrepublik nähert sich langsam dem Ende. Für Anna und Karl ist diese Zeit wie im Flug vergangen."
             },
             {
@@ -2998,17 +2993,16 @@
             },
             {
               "type": "text",
-              "layer": "fore",
               "value": "Sie haben viele neue Freunde gefunden. Viele davon werden, wie die beiden, bald eine Lehre in einer der großen Fabriken anfangen."
             }
           ]
         },
         {
           "grouped": true,
           "row": false,
+          "background": "2_31_s",
           "content": [{
               "type": "text",
-              "layer": "fore",
               "value": "Anna und Karl hoffen, dass sie sich vielleicht Briefe schreiben werden, falls sie nach der Arbeit dann noch Zeit und Kraft dafür finden werden. Auch mit Gerda wollen sie sich gern schreiben."
             },
             {
@@ -3021,14 +3015,12 @@
         {
           "grouped": true,
           "row": false,
-          "background": "2_31_s",
           "content": [{
               "type": "text",
               "value": "Zumindest aber fühlen sich Karl und Anna nicht mehr so allein, denn sie wissen nun, dass es viele Kinder und Jugendliche gibt, denen es ähnlich geht wie ihnen. Und sie alle hoffen auf eine bessere Zukunft für sich und ihre Familien."
             },
             {
               "type": "redirect",
-              "option": "second",
               "value": "ausblick",
               "title": "Doch was ist nach den 1920er Jahren aus den Kindern geworden?"
             }

diff --git a/apps/demol/src/assets/home.webp b/apps/demol/src/assets/home.webp
diff --git a/libs/home/src/lib/home.tsx b/libs/home/src/lib/home.tsx
@@ -5,6 +5,7 @@ import './home.scss';
 
 const home:ChapterProps = {
   link: "home",
+  name: "Demokratie erLeben",
   groups: [
   {
     "grouped": false,

diff --git a/libs/ui/src/lib/chapter/chapter.tsx b/libs/ui/src/lib/chapter/chapter.tsx
@@ -14,6 +14,7 @@ export const Chapter = (props: ChapterProps) => {
   const [character, setCharacter] = useContext(AppContext);
 
   const audio = new Audio(`./assets/sounds/${props.link}.mp3`);
+  audio.loop = true;
   const startAudio = (inView) => {
     inView ? audio.play() : audio.pause();  
   };

diff --git a/libs/ui/src/lib/info/info.scss b/libs/ui/src/lib/info/info.scss
@@ -6,6 +6,7 @@
   width: 1em;
   height: 1em;
   opacity: 1;
+  z-index: 11;
   transition: opacity .6s ease, margin-top .6s ease;
 
   .infoText {
@@ -15,7 +16,6 @@
     margin: 50px;
     opacity: 0;
     overflow: hidden;
-    z-index: 11;
     background-color: rgba(0,0,0,.7);
     color: var(--color-link);
     font-size: 1.1rem;

diff --git a/libs/ui/src/lib/nav/nav.scss b/libs/ui/src/lib/nav/nav.scss
@@ -31,12 +31,15 @@
 	height: 100%;
 	left: 0;
 	outline: none;
-	text-indent: -999em;
+	text-indent: -15em;
 	top: 0;
 	transition: background 0.3s ease;
 	width: 100%;
-	overflow: hidden;
+	//overflow: hidden;
 	position: absolute;
+	font-size: 1.7rem;
+	color: var(--color-title);
+	font-weight: bold;
 }
 
 .navigation--item a:focus {
@@ -48,6 +51,10 @@
 	background-color: rgba(0, 0, 0, 0.2);
 }
 
+.navigation--item a:not(:hover){
+  overflow: hidden;
+}
+
 .navigation--item a::after {
 	content: '';
 	position: absolute;

diff --git a/libs/ui/src/lib/nav/nav.tsx b/libs/ui/src/lib/nav/nav.tsx
@@ -10,14 +10,18 @@ export interface NavProps {
 export const Nav = (props: NavProps) => {
 
   const renderChapterNav = () => {
-    return props.chapters.map((chapter, index) => <li className='navigation--item' key={index}><NavLink to = {`/chapter/${chapter.link}`} /></li> )
+    return props.chapters.map((chapter, index) => <li className='navigation--item' key={index}>
+        <NavLink to = {`/chapter/${chapter.link}`}>
+          <p>{chapter.name}</p>
+        </NavLink>
+      </li> )
 }
 
   return (
     <nav className="app-nav">
       <ul className='navigation'>
         <li className='navigation--item'>
-          <NavLink exact to="/" />
+          <NavLink exact to="/">Demokratie erLeben</NavLink>
         </li>
         {renderChapterNav()}
     </ul>