Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UEPR-67] restyle community guidelines page #8865

Merged
merged 5 commits into from
Nov 14, 2024
Merged

[UEPR-67] restyle community guidelines page #8865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9134f6a
feat: [UEPR-67] restyle community guidelines page
MiroslavDionisiev Oct 28, 2024
fc97fa6
feat: [UEPR-67] added learn more section
MiroslavDionisiev Oct 30, 2024
de60f74
refactor: [UEPR-67] Changed title text
MiroslavDionisiev Nov 5, 2024
6eda196
feat: [UEPR-67] Added alternative texts for images on guidelines page
MiroslavDionisiev Nov 7, 2024
05f053f
refactor: [UEPR-67] removed top border
MiroslavDionisiev Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ $ui-purple-10percent: hsla(260, 60%, 60%, .1);
$ui-purple-25percent: hsla(260, 60%, 60%, .25);
$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
$ui-magenta-dark: hsla(300, 48%, 50%, 1); /* #BD42BD Sounds Tertiary */
$ui-light-grayish-blue: hsla(215, 76%, 95%, 1);

$ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
$ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
Expand Down
211 changes: 170 additions & 41 deletions src/views/guidelines/guidelines.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,179 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');

const Box = require('../../components/box/box.jsx');

const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
const {useIntl} = require('react-intl');

require('./guidelines.scss');

const Guidelines = () => (
<div className="inner guidelines">
<Box
title={
<FormattedMessage id="guidelines.title" />
}
>
<p>
<FormattedMessage id="guidelines.header1" />&nbsp;
<strong><FormattedMessage id="guidelines.header2" /></strong>&nbsp;
<FormattedMessage id="guidelines.header3" />
</p>
<dl>
<dt><FormattedMessage id="guidelines.respectheader" /></dt>
<dd><FormattedMessage id="guidelines.respectbody" /></dd>
<dt><FormattedMessage id="guidelines.privacyheader" /></dt>
<dd><FormattedMessage id="guidelines.privacybody" /></dd>
<dt><FormattedMessage id="guidelines.helpfulheader" /></dt>
<dd><FormattedMessage id="guidelines.helpfulbody" /></dd>
<dt><FormattedMessage id="guidelines.remixheader" /></dt>
<dd>
<em><FormattedMessage id="guidelines.remixbody1" /></em><br />
<FormattedMessage id="guidelines.remixbody2" />
</dd>
<dt><FormattedMessage id="guidelines.honestyheader" /></dt>
<dd><FormattedMessage id="guidelines.honestybody" /></dd>
<dt><FormattedMessage id="guidelines.friendlyheader" /></dt>
<dd><FormattedMessage id="guidelines.friendlybody" /></dd>
</dl>
<div className="guidelines-footer">
<img
alt="sprites"
src="//cdn.scratch.mit.edu/scratchr2/static/images/help/spritesforcommunityguid.png"
/>
</div>
</Box>
</div>
);
const pageSections = [
{
id: 'respect',
headerTextId: 'guidelines.respectheader',
contentTexts: [
{id: 'guidelines.respectbody1'},
{id: 'guidelines.respectbody2'}
],
sectionImgSrc: '/svgs/guidelines/illustration_respect.svg',
sectionImgAltTextId: 'guidelines.respectSectionImageDescription',
buttonImgSrc: '/svgs/guidelines/blobblue_respect.svg',
buttonImgAltTextId: 'guidelines.respectButtonImageDescription'
},
{
id: 'privacy',
headerTextId: 'guidelines.privacyheader',
contentTexts: [
{id: 'guidelines.privacybody1'},
{id: 'guidelines.privacybody2'}
],
sectionImgSrc: '/svgs/guidelines/illustration_safe.svg',
sectionImgAltTextId: 'guidelines.privacySectionImageDescription',
buttonImgSrc: '/svgs/guidelines/blobyellow_safe.svg',
buttonImgAltTextId: 'guidelines.privacyButtonImageDescription'
},
{
id: 'helpful',
headerTextId: 'guidelines.helpfulheader',
contentTexts: [
{id: 'guidelines.helpfulbody1'},
{id: 'guidelines.helpfulbody2'}
],
sectionImgSrc: '/svgs/guidelines/illustration_feedback.svg',
sectionImgAltTextId: 'guidelines.helpfulSectionImageDescription',
buttonImgSrc: '/svgs/guidelines/blobmagenta_feedback.svg',
buttonImgAltTextId: 'guidelines.helpfulButtonImageDescription'
},
{
id: 'remix',
headerTextId: 'guidelines.remixheader',
contentTexts: [
{id: 'guidelines.remixbody1'},
{id: 'guidelines.remixbody2'}
],
sectionImgSrc: '/svgs/guidelines/illustration_remix.svg',
sectionImgAltTextId: 'guidelines.remixSectionImageDescription',
buttonImgSrc: '/svgs/guidelines/blobgreen_remix.svg',
buttonImgAltTextId: 'guidelines.remixButtonImageDescription'
},
{
id: 'honesty',
headerTextId: 'guidelines.honestyheader',
contentTexts: [
{id: 'guidelines.honestybody1'},
{id: 'guidelines.honestybody2'}
],
sectionImgSrc: '/svgs/guidelines/illustration_honest.svg',
sectionImgAltTextId: 'guidelines.honestySectionImageDescription',
buttonImgSrc: '/svgs/guidelines/blobpurple_honest.svg',
buttonImgAltTextId: 'guidelines.honestyButtonImageDescription'
},
{
id: 'friendly',
headerTextId: 'guidelines.friendlyheader',
contentTexts: [
{id: 'guidelines.friendlybody1'},
{id: 'guidelines.friendlybody2'}
],
sectionImgSrc: '/svgs/guidelines/illustration_friendly.svg',
sectionImgAltTextId: 'guidelines.friendlySectionImageDescription',
buttonImgSrc: '/svgs/guidelines/blobpink_friendly.svg',
buttonImgAltTextId: 'guidelines.friendlyButtonImageDescription'
},
{
id: 'learn-more',
headerTextId: 'guidelines.learnMoreheader',
contentTexts: [
{
id: 'guidelines.learnMorebody1',
values: {
a: chunks => (
<a href="https://resources.scratch.mit.edu/www/guides/en/scratch-community-guide.pdf">
{chunks}
</a>
)
}
},
{id: 'guidelines.learnMorebody2'}
],
sectionImgSrc: '/svgs/guidelines/illustration_learn_more.svg',
sectionImgAltTextId: 'guidelines.learnMoreSectionImageDescription'
}
];

const Guidelines = () => {
const intl = useIntl();

render(<Page><Guidelines /></Page>, document.getElementById('app'));
return (
<div className="guidelines-page">
<header>
<div className="title">
<FormattedMessage id="guidelines.title" />
</div>
<div className="header1">
<FormattedMessage id="guidelines.header1" />
</div>
<div className="header2">
<FormattedMessage id="guidelines.header2" />
</div>
</header>
<section className="navigation">
<div className="header3">
<FormattedMessage id="guidelines.header3" />
</div>
<section className="navigation-buttons">
{pageSections
.filter(guide => guide.buttonImgSrc)
.map(({id, headerTextId, buttonImgSrc, buttonImgAltTextId}) => (
<a
key={id}
href={`#${id}`}
>
<img
alt={intl.formatMessage({id: buttonImgAltTextId})}
src={buttonImgSrc}
/>
<FormattedMessage id={headerTextId} />
</a>
))}
</section>
</section>
<section className="inner guidelines">
{pageSections.map(
({id, headerTextId, contentTexts, sectionImgSrc, sectionImgAltTextId}, index) => (
<div
id={id}
key={id}
className={`guideline ${
index % 2 === 0 ? 'content-first' : 'image-first'
}`}
>
<div>
<div className="guideline-title">
<FormattedMessage id={headerTextId} />
</div>
<p className="first-paragraph">
<FormattedMessage {...contentTexts[0]} />
</p>
<p className="second-paragraph">
<FormattedMessage {...contentTexts[1]} />
</p>
</div>
<img
alt={intl.formatMessage({id: sectionImgAltTextId})}
src={sectionImgSrc}
/>
</div>
)
)}
</section>
</div>
);
};

render(
<Page>
<Guidelines />
</Page>,
document.getElementById('app')
);
Loading