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 @@ + + + + + + + + + + + + + + + + + + + + +