From fc97fa63096d4fff51a0c9d6796bb2ad8917972f Mon Sep 17 00:00:00 2001 From: MiroslavDionisiev Date: Wed, 30 Oct 2024 10:46:18 +0200 Subject: [PATCH] feat: [UEPR-67] added learn more section --- src/views/guidelines/guidelines.jsx | 105 ++++++++++++------ src/views/guidelines/guidelines.scss | 7 +- src/views/guidelines/l10n.json | 5 +- .../guidelines/illustration_learn_more.svg | 21 ++++ 4 files changed, 101 insertions(+), 37 deletions(-) create mode 100644 static/svgs/guidelines/illustration_learn_more.svg diff --git a/src/views/guidelines/guidelines.jsx b/src/views/guidelines/guidelines.jsx index d399f47fc..1cc5eb690 100644 --- a/src/views/guidelines/guidelines.jsx +++ b/src/views/guidelines/guidelines.jsx @@ -10,9 +10,9 @@ const pageSections = [ { id: 'respect', headerTextId: 'guidelines.respectheader', - contentTextIds: [ - 'guidelines.respectbody1', - 'guidelines.respectbody2' + contentTexts: [ + {id: 'guidelines.respectbody1'}, + {id: 'guidelines.respectbody2'} ], sectionImgSrc: '/svgs/guidelines/illustration_respect.svg', buttonImgSrc: '/svgs/guidelines/blobblue_respect.svg' @@ -20,9 +20,9 @@ const pageSections = [ { id: 'privacy', headerTextId: 'guidelines.privacyheader', - contentTextIds: [ - 'guidelines.privacybody1', - 'guidelines.privacybody2' + contentTexts: [ + {id: 'guidelines.privacybody1'}, + {id: 'guidelines.privacybody2'} ], sectionImgSrc: '/svgs/guidelines/illustration_safe.svg', buttonImgSrc: '/svgs/guidelines/blobyellow_safe.svg' @@ -30,9 +30,9 @@ const pageSections = [ { id: 'helpful', headerTextId: 'guidelines.helpfulheader', - contentTextIds: [ - 'guidelines.privacybody1', - 'guidelines.privacybody2' + contentTexts: [ + {id: 'guidelines.privacybody1'}, + {id: 'guidelines.privacybody2'} ], sectionImgSrc: '/svgs/guidelines/illustration_feedback.svg', buttonImgSrc: '/svgs/guidelines/blobmagenta_feedback.svg' @@ -40,9 +40,9 @@ const pageSections = [ { id: 'remix', headerTextId: 'guidelines.remixheader', - contentTextIds: [ - 'guidelines.remixbody1', - 'guidelines.remixbody2' + contentTexts: [ + {id: 'guidelines.remixbody1'}, + {id: 'guidelines.remixbody2'} ], sectionImgSrc: '/svgs/guidelines/illustration_remix.svg', buttonImgSrc: '/svgs/guidelines/blobgreen_remix.svg' @@ -50,9 +50,9 @@ const pageSections = [ { id: 'honesty', headerTextId: 'guidelines.honestyheader', - contentTextIds: [ - 'guidelines.honestybody1', - 'guidelines.honestybody2' + contentTexts: [ + {id: 'guidelines.honestybody1'}, + {id: 'guidelines.honestybody2'} ], sectionImgSrc: '/svgs/guidelines/illustration_honest.svg', buttonImgSrc: '/svgs/guidelines/blobpurple_honest.svg' @@ -60,27 +60,54 @@ const pageSections = [ { id: 'friendly', headerTextId: 'guidelines.friendlyheader', - contentTextIds: [ - 'guidelines.friendlybody1', - 'guidelines.friendlybody2' + contentTexts: [ + {id: 'guidelines.friendlybody1'}, + {id: 'guidelines.friendlybody2'} ], sectionImgSrc: '/svgs/guidelines/illustration_friendly.svg', buttonImgSrc: '/svgs/guidelines/blobpink_friendly.svg' + }, + { + id: 'learn-more', + headerTextId: 'guidelines.learnMoreheader', + contentTexts: [ + { + id: 'guidelines.learnMorebody1', + values: { + a: chunks => ( + + {chunks} + + ) + } + }, + {id: 'guidelines.learnMorebody2'} + ], + sectionImgSrc: '/svgs/guidelines/illustration_learn_more.svg' } ]; const Guidelines = () => (
-
-
-
+
+ +
+
+ +
+
+ +
-
+
+ +
- { - pageSections.map(({id, headerTextId, buttonImgSrc}) => ( + {pageSections + .filter(guide => guide.buttonImgSrc) + .map(({id, headerTextId, buttonImgSrc}) => ( ( - )) - } + ))}
- { - pageSections.map(({id, headerTextId, contentTextIds, sectionImgSrc}, index) => ( + {pageSections.map( + ({id, headerTextId, contentTexts, sectionImgSrc}, index) => (
-
+
+ +

- +

- +

- )) - } + ) + )}
); -render(, document.getElementById('app')); +render( + + + , + document.getElementById('app') +); diff --git a/src/views/guidelines/guidelines.scss b/src/views/guidelines/guidelines.scss index 1b3bb426c..f6906334d 100644 --- a/src/views/guidelines/guidelines.scss +++ b/src/views/guidelines/guidelines.scss @@ -128,6 +128,10 @@ img { width: $cols4; } + + a { + text-decoration: underline; + } } .content-first { @@ -143,7 +147,8 @@ .guidelines { .guideline { flex-direction: column-reverse; - margin: 6rem 10%; + gap: 2.25rem; + margin: 0 10%; } } } diff --git a/src/views/guidelines/l10n.json b/src/views/guidelines/l10n.json index c9c3beb25..97cea2103 100644 --- a/src/views/guidelines/l10n.json +++ b/src/views/guidelines/l10n.json @@ -20,5 +20,8 @@ "guidelines.honestybody2": "Spreading rumors, impersonating other Scratchers or celebrities, or pretending to be seriously ill is not respectful to the Scratch Community.", "guidelines.friendlyheader": "Help keep the site friendly.", "guidelines.friendlybody1": "It’s important to keep your creations and conversations friendly and appropriate for all ages.", - "guidelines.friendlybody2": "If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action." + "guidelines.friendlybody2": "If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action.", + "guidelines.learnMoreheader": "Want to learn more?", + "guidelines.learnMorebody1": "Download the guide for more details!", + "guidelines.learnMorebody2": "Discover the limitless potential of the Scratch online community with our guides! These valuable resources are designed to help you navigate and thrive as a Scratcher, revealing everything from setting up your profile to connecting with like-minded individuals. Learn how to connect with others, share your unique creations, and find inspiration for your next project." } diff --git a/static/svgs/guidelines/illustration_learn_more.svg b/static/svgs/guidelines/illustration_learn_more.svg new file mode 100644 index 000000000..bd1a1682b --- /dev/null +++ b/static/svgs/guidelines/illustration_learn_more.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +