From ade74357b9effb662d6f36c21547add3327e3f4f Mon Sep 17 00:00:00 2001 From: Katherina Marcenko Date: Wed, 20 Nov 2019 11:42:44 +0100 Subject: [PATCH] feat(sidebar): show bullet list in presenter and showcase mode --- .gitignore | 1 + src/scripts/components/slide/slide.styl | 5 ++- src/scripts/components/slide/slide.tsx | 45 ++++++++++++++++--------- src/scripts/types/story.d.ts | 3 +- storage/stories/story1/story1-de.json | 20 +++++------ storage/stories/story1/story1-en.json | 20 +++++------ storage/stories/story2/story2-de.json | 8 ++--- storage/stories/story2/story2-en.json | 8 ++--- storage/stories/story3/story3-de.json | 8 ++--- storage/stories/story3/story3-en.json | 4 --- storage/stories/story4/story4-de.json | 4 --- storage/stories/story4/story4-en.json | 4 --- storage/stories/story5/story5-de.json | 4 --- storage/stories/story5/story5-en.json | 4 --- storage/stories/story6/story6-de.json | 4 --- storage/stories/story6/story6-en.json | 4 --- storage/stories/story7/story7-de.json | 4 --- storage/stories/story7/story7-en.json | 4 --- storage/stories/story8/story8-de.json | 4 --- storage/stories/story8/story8-en.json | 4 --- 20 files changed, 58 insertions(+), 104 deletions(-) diff --git a/.gitignore b/.gitignore index 1d135264e..fffa8a730 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules dist dist-electron +.vscode diff --git a/src/scripts/components/slide/slide.styl b/src/scripts/components/slide/slide.styl index 8e3c72191..2969ad1f3 100644 --- a/src/scripts/components/slide/slide.styl +++ b/src/scripts/components/slide/slide.styl @@ -5,7 +5,10 @@ background-color: #fff .presentSlide - font-size: 1.5em + font-size: 1.7em + +.showcaseSlide + font-size: 1.2em .content display: flex diff --git a/src/scripts/components/slide/slide.tsx b/src/scripts/components/slide/slide.tsx index 8500dfa37..3c456fdd4 100644 --- a/src/scripts/components/slide/slide.tsx +++ b/src/scripts/components/slide/slide.tsx @@ -18,8 +18,10 @@ interface Props { const Slide: FunctionComponent = ({mode, slide}) => { const slideClasses = cx( styles.slide, - mode === StoryMode.Present && styles.presentSlide + mode === StoryMode.Present && styles.presentSlide, + mode === StoryMode.Showcase && styles.showcaseSlide ); + return (
{(slide.images && ( @@ -29,21 +31,34 @@ const Slide: FunctionComponent = ({mode, slide}) => { /> )) || (slide.videoId && )} - {}
- + {mode === StoryMode.Stories ? ( + + ) : ( + + )}
); diff --git a/src/scripts/types/story.d.ts b/src/scripts/types/story.d.ts index f9615a3d5..9d1ee32a4 100644 --- a/src/scripts/types/story.d.ts +++ b/src/scripts/types/story.d.ts @@ -6,9 +6,8 @@ export interface Story { } export interface Slide { - title: string; - subtitle: string; bodytext: string; + bulletList?: string; images?: []; videoId?: string; flyTo: GlobeView; diff --git a/storage/stories/story1/story1-de.json b/storage/stories/story1/story1-de.json index 01385ffb6..31947bd0c 100644 --- a/storage/stories/story1/story1-de.json +++ b/storage/stories/story1/story1-de.json @@ -2,9 +2,8 @@ "id": "story1", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", - "bodytext": "## This is a subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in", + "bodytext": "# Story title\n\n## Das ist ein subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in", + "bulletList": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg", "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story2.jpeg" @@ -23,9 +22,8 @@ } }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", - "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bodytext": "# Story title\n\n## Das ist ein subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bulletList": "- Lorem ipsum", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg" ], @@ -43,15 +41,13 @@ } }, { - "title": "Story slide 3", - "subtitle": "Das ist story slide 3", - "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", + "bodytext": "# Story title\n\n## Das ist ein subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", + "bulletList": "- Lorem ipsum", "videoId": "U1SMPkVCG3o" }, { - "title": "Story slide 4", - "subtitle": "Das ist story slide 4", - "bodytext": "Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bodytext": "# Story title\n\n## Das ist ein subheader\n\nPraesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bulletList": "- Lorem ipsum", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg" ], diff --git a/storage/stories/story1/story1-en.json b/storage/stories/story1/story1-en.json index 481326274..4357e353d 100644 --- a/storage/stories/story1/story1-en.json +++ b/storage/stories/story1/story1-en.json @@ -2,9 +2,8 @@ "id": "story1", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", - "bodytext": "## This is a subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in", + "bodytext": "# Story title\n\n## This is a subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in", + "bulletList": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg", "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story2.jpeg" @@ -23,9 +22,8 @@ } }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", - "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bodytext": "# Story title\n\n## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bulletList": "- Lorem ipsum", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg" ], @@ -43,15 +41,13 @@ } }, { - "title": "Story slide 3", - "subtitle": "This is story slide 3", - "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", + "bodytext": "# Story title\n\n## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", + "bulletList": "- Lorem ipsum", "videoId": "U1SMPkVCG3o" }, { - "title": "Story slide 4", - "subtitle": "This is story slide 4", - "bodytext": "Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bodytext": "# Story title\n\n## This is a subheader\n\nPraesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bulletList": "- Lorem ipsum", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg" ], diff --git a/storage/stories/story2/story2-de.json b/storage/stories/story2/story2-de.json index 141c12d19..4d5740378 100644 --- a/storage/stories/story2/story2-de.json +++ b/storage/stories/story2/story2-de.json @@ -2,17 +2,13 @@ "id": "story2", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", - "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", + "bodytext": "# Story title ## Das ist ein subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", - "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bodytext": "# Story title ## Das ist ein subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg" ] diff --git a/storage/stories/story2/story2-en.json b/storage/stories/story2/story2-en.json index 6d4fbed31..108b8e964 100644 --- a/storage/stories/story2/story2-en.json +++ b/storage/stories/story2/story2-en.json @@ -2,17 +2,13 @@ "id": "story2", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", - "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", + "bodytext": "# Story title ## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", - "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bodytext": "# Story title ## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg" ] diff --git a/storage/stories/story3/story3-de.json b/storage/stories/story3/story3-de.json index 8ce172434..994aaba1b 100644 --- a/storage/stories/story3/story3-de.json +++ b/storage/stories/story3/story3-de.json @@ -2,17 +2,13 @@ "id": "story3", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", - "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", + "bodytext": "# Story title ## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", - "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", + "bodytext": "# Story title ## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg" ] diff --git a/storage/stories/story3/story3-en.json b/storage/stories/story3/story3-en.json index 6e91d9e75..3cb1f1c76 100644 --- a/storage/stories/story3/story3-en.json +++ b/storage/stories/story3/story3-en.json @@ -2,16 +2,12 @@ "id": "story3", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg" diff --git a/storage/stories/story4/story4-de.json b/storage/stories/story4/story4-de.json index 9ac6f0e3d..6d9ec7bd5 100644 --- a/storage/stories/story4/story4-de.json +++ b/storage/stories/story4/story4-de.json @@ -2,16 +2,12 @@ "id": "story4", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg" diff --git a/storage/stories/story4/story4-en.json b/storage/stories/story4/story4-en.json index 64c6064dd..6d9ec7bd5 100644 --- a/storage/stories/story4/story4-en.json +++ b/storage/stories/story4/story4-en.json @@ -2,16 +2,12 @@ "id": "story4", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg" diff --git a/storage/stories/story5/story5-de.json b/storage/stories/story5/story5-de.json index cd6ff9860..e2abec090 100644 --- a/storage/stories/story5/story5-de.json +++ b/storage/stories/story5/story5-de.json @@ -2,16 +2,12 @@ "id": "story5", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg" diff --git a/storage/stories/story5/story5-en.json b/storage/stories/story5/story5-en.json index b515ea62d..e2abec090 100644 --- a/storage/stories/story5/story5-en.json +++ b/storage/stories/story5/story5-en.json @@ -2,16 +2,12 @@ "id": "story5", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg" diff --git a/storage/stories/story6/story6-de.json b/storage/stories/story6/story6-de.json index 488eff192..9836bb6fc 100644 --- a/storage/stories/story6/story6-de.json +++ b/storage/stories/story6/story6-de.json @@ -2,16 +2,12 @@ "id": "story6", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg" diff --git a/storage/stories/story6/story6-en.json b/storage/stories/story6/story6-en.json index fb4369e1d..9836bb6fc 100644 --- a/storage/stories/story6/story6-en.json +++ b/storage/stories/story6/story6-en.json @@ -2,16 +2,12 @@ "id": "story6", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg" diff --git a/storage/stories/story7/story7-de.json b/storage/stories/story7/story7-de.json index eb5121ed9..dd8902e3b 100644 --- a/storage/stories/story7/story7-de.json +++ b/storage/stories/story7/story7-de.json @@ -2,16 +2,12 @@ "id": "story7", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg" diff --git a/storage/stories/story7/story7-en.json b/storage/stories/story7/story7-en.json index f25dc55b4..dd8902e3b 100644 --- a/storage/stories/story7/story7-en.json +++ b/storage/stories/story7/story7-en.json @@ -2,16 +2,12 @@ "id": "story7", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg" diff --git a/storage/stories/story8/story8-de.json b/storage/stories/story8/story8-de.json index 141034ae5..88e0ca81b 100644 --- a/storage/stories/story8/story8-de.json +++ b/storage/stories/story8/story8-de.json @@ -2,16 +2,12 @@ "id": "story8", "slides": [ { - "title": "Story slide 1", - "subtitle": "Das ist story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story8/assets/story8.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "Das ist story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story8/assets/story8.jpeg" diff --git a/storage/stories/story8/story8-en.json b/storage/stories/story8/story8-en.json index e8d1dfd58..88e0ca81b 100644 --- a/storage/stories/story8/story8-en.json +++ b/storage/stories/story8/story8-en.json @@ -2,16 +2,12 @@ "id": "story8", "slides": [ { - "title": "Story slide 1", - "subtitle": "This is story slide 1", "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story8/assets/story8.jpeg" ] }, { - "title": "Story slide 2", - "subtitle": "This is story slide 2", "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.", "images": [ "https://storage.googleapis.com/esa-cfs-storage/stories/story8/assets/story8.jpeg"