mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Merge pull request #2186 from apple502j/add-parents
Migrate Parents Page
This commit is contained in:
chrisgarrity
GitHub
commit
bef5e615f7
5 changed files with 579 additions and 0 deletions
|
|
@ -172,3 +172,8 @@ type = KEYVALUEJSON
|
|||
source_file = src/views/wedo2-legacy/l10n.json
|
||||
source_lang = en
|
||||
type = KEYVALUEJSON
|
||||
|
||||
[scratch-website.parents-l10njson]
|
||||
source_file = src/views/parents/l10n.json
|
||||
source_lang = en
|
||||
type = KEYVALUEJSON
|
||||
|
|
|
|||
|
|
@ -211,6 +211,13 @@
|
|||
"view": "preview-faq/preview-faq",
|
||||
"title": "Scratch 3.0 FAQ"
|
||||
},
|
||||
{
|
||||
"name": "parents",
|
||||
"pattern": "^/parents/?$",
|
||||
"routeAlias": "/parents/",
|
||||
"view": "parents/parents",
|
||||
"title": "For Parents"
|
||||
},
|
||||
{
|
||||
"name": "preview-faq-redirect",
|
||||
"pattern": "^/preview-faq/?$",
|
||||
|
|
|
|||
39
src/views/parents/l10n.json
Normal file
39
src/views/parents/l10n.json
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"parents.title": "For Parents",
|
||||
"parents.intro": "Scratch is a programming language and an online community where children\n can program and share interactive media such as stories, games, and \nanimation with people from all over the world. As children create with \nScratch, they learn to think creatively, work collaboratively, and \nreason systematically. Scratch is designed and maintained by the \nLifelong Kindergarten group at the MIT Media Lab. ",
|
||||
"parents.overview": "How it works",
|
||||
"parents.faq": "FAQ",
|
||||
"parents.overviewTitle": "How does Scratch work for children?",
|
||||
"parents.overviewLearningTitle": "Learning",
|
||||
"parents.overviewLearningBody": "For a one-page overview of what young people learn with Scratch, see {learningWithScratch}.\nRead an article on the {creativeLearningApproach}.",
|
||||
"parents.learningWithScratchLinkText": "Learning with Scratch",
|
||||
"parents.creativeLearningApproachLinkText": "Creative Learning Approach",
|
||||
"parents.overviewCommunityTitle": "Community",
|
||||
"parents.overviewCommunityBody": "We ask all participants on the site to follow the {communityGuidelines}.\nWe do not make private account information available to anyone. For more information, please see the {privacyPolicy}.",
|
||||
"parents.communityGuidelinesLinkText": "Community Guidelines",
|
||||
"parents.privacyPolicyLinkText": "Privacy Policy",
|
||||
"parents.faqMoreAndAsk": "To find out more about Scratch, please see {faqPage}.\nYou can also ask questions in the {discussionForums}.\nIf you need to contact our staff team directly, click {contactUs} at the bottom of any page.",
|
||||
"parents.faqLinkText": "Frequently Asked Questions",
|
||||
"parents.faqDiscussionForumsLinkText": "Discussion Forums",
|
||||
"parents.faqContactUsLinkText": "Contact Us",
|
||||
"parents.faqAgeRangeTitle": "What is the age range for Scratch?",
|
||||
"parents.faqAgeRangeBody": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents. ",
|
||||
"parents.faqResourcesTitle": "What resources are available for learning Scratch?",
|
||||
"parents.faqResourcesBody": "If you’re just getting started, there’s a {stepByStepGuide} available inside Scratch, or you can download the {gettingStartedGuide}. The {scratchCards} provide a fun way to learn more. For an overview of Scratch resources, see {tips}.",
|
||||
"parents.faqStepByStepGuideLinkText": "step-by-step guide",
|
||||
"parents.faqGettingStartedGuideLinkText": "Getting Started guide (PDF)",
|
||||
"parents.faqScratchCardsLinkText": "Scratch Cards",
|
||||
"parents.faqTipsLinkText": "Tips",
|
||||
"parents.faqCommunityTitle": "What is the Scratch online community?",
|
||||
"parents.faqCommunityBody": "When participating in the Scratch online community, members can explore and experiment in an open learning community with other Scratch members from all backgrounds, ages, and interests. Members can share their work, get feedback, and learn from each other.",
|
||||
"parents.faqGuidelinesTitle": "What are the guidelines for the Scratch online community?",
|
||||
"parents.faqGuidelinesBody": "The MIT Scratch Team works with the community to maintain a friendly and respectful environment for people of all ages, races, ethnicities, religions, sexual orientations, and gender identities. You can help your child learn how to participate by reviewing the {communityGuidelines} together. Members are asked to comment constructively and to help keep the website friendly by reporting any content that does not follow the community guidelines. The Scratch Team works each day to manage activity on the site and respond to reports, with the help of tools such as the {CleanSpeak} profanity filter.",
|
||||
"parents.faqCommunityGuidelinesLinkText": "community guidelines",
|
||||
"parents.faqPrivacyPolicyTitle": "What is your privacy policy?",
|
||||
"parents.faqPrivacyPolicyBody": "To protect children's online privacy, we limit what we collect during the signup process, and what we make public on the website. We don't sell or rent account information to anyone. You can find out more about our privacy policy on our {faqPage} page.",
|
||||
"parents.faqFAQLinkText": "frequently asked questions page",
|
||||
"parents.faqOfflineTitle": "Is there a way to use Scratch without participating online?",
|
||||
"parents.faqOfflineBody": "Yes, the Scratch offline editor lets you create projects without joining or accessing the online community. Visit the {offline2} download page for instructions on how to install it on your computer. (If your computer does not support the latest version, try the {offline14}.) ",
|
||||
"parents.faqOffline2LinkText": "Scratch 2.0 offline editor",
|
||||
"parents.faqOffline14LinkText": "Scratch 1.4 offline editor"
|
||||
}
|
||||
259
src/views/parents/parents.jsx
Normal file
259
src/views/parents/parents.jsx
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
||||
|
||||
const Page = require('../../components/page/www/page.jsx');
|
||||
const render = require('../../lib/render.jsx');
|
||||
|
||||
require('./parents.scss');
|
||||
|
||||
const Landing = () => (
|
||||
<div className="parents">
|
||||
<TitleBanner className="masthead">
|
||||
<div className="inner">
|
||||
<h1 className="title-banner-h1">
|
||||
<FormattedMessage id="parents.title" />
|
||||
</h1>
|
||||
<FlexRow className="masthead-info">
|
||||
<p className="title-banner-p intro">
|
||||
<FormattedMessage id="parents.intro" />
|
||||
</p>
|
||||
<div className="ted-talk">
|
||||
<iframe
|
||||
allowFullScreen
|
||||
frameBorder="0"
|
||||
src="https://www.youtube.com/embed/3dciD9FO9mc"
|
||||
/>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="band">
|
||||
<SubNavigation className="inner">
|
||||
<a href="#overview">
|
||||
<li>
|
||||
<FormattedMessage id="parents.overview" />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#faq">
|
||||
<li>
|
||||
<FormattedMessage id="parents.faq" />
|
||||
</li>
|
||||
</a>
|
||||
</SubNavigation>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
|
||||
<div className="inner">
|
||||
<section id="overview">
|
||||
<span className="nav-spacer" />
|
||||
<h2>
|
||||
<FormattedMessage id="parents.overviewTitle" />
|
||||
</h2>
|
||||
<FlexRow className="general-usage">
|
||||
<div>
|
||||
<h3><FormattedMessage id="parents.overviewLearningTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="parents.overviewLearningBody"
|
||||
values={{
|
||||
learningWithScratch: (
|
||||
<a href="http://llk.media.mit.edu/scratch/Learning-with-Scratch.pdf">
|
||||
<FormattedMessage
|
||||
id="parents.learningWithScratchLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
creativeLearningApproach: (
|
||||
<a href="http://www.edutopia.org/kindergarten-creativity-collaboration-lifelong-learning">
|
||||
<FormattedMessage
|
||||
id="parents.creativeLearningApproachLinkText"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3><FormattedMessage id="parents.overviewCommunityTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="parents.overviewCommunityBody"
|
||||
values={{
|
||||
communityGuidelines: (
|
||||
<a href="/community_guidelines">
|
||||
<FormattedMessage
|
||||
id="parents.communityGuidelinesLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
privacyPolicy: (
|
||||
<a href="/privacy_policy">
|
||||
<FormattedMessage
|
||||
id="parents.privacyPolicyLinkText"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
</div>
|
||||
<TitleBanner className="faq-banner">
|
||||
<div className="inner">
|
||||
<section id="faq">
|
||||
<span className="nav-spacer" />
|
||||
<h2><FormattedMessage id="parents.faq" /></h2>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="parents.faqMoreAndAsk"
|
||||
values={{
|
||||
faqPage: (
|
||||
<a href="/info/faq">
|
||||
<FormattedMessage
|
||||
id="parents.faqLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
discussionForums: (
|
||||
<a href="/discuss">
|
||||
<FormattedMessage
|
||||
id="parents.faqDiscussionForumsLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
contactUs: (
|
||||
<a href="/contact-us">
|
||||
<FormattedMessage
|
||||
id="parents.faqContactUsLinkText"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<FlexRow className="three-col-row">
|
||||
<div className="faq column">
|
||||
<h3><FormattedMessage id="parents.faqAgeRangeTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="parents.faqAgeRangeBody" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h3><FormattedMessage id="parents.faqResourcesTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="parents.faqResourcesBody"
|
||||
values={{
|
||||
stepByStepGuide: (
|
||||
<a href="/projects/editor/?tip_bar=getStarted">
|
||||
<FormattedMessage
|
||||
id="parents.faqStepByStepGuideLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
gettingStartedGuide: (
|
||||
<a href="https://cdn.scratch.mit.edu/scratchr2/static/__edf64cc2d5d5da51528c169e65053195__//pdfs/help/Getting-Started-Guide-Scratch2.pdf">
|
||||
<FormattedMessage
|
||||
id="parents.faqGettingStartedGuideLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
scratchCards: (
|
||||
<a href="/info/cards">
|
||||
<FormattedMessage
|
||||
id="parents.faqScratchCardsLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
tips: (
|
||||
<a href="/tips">
|
||||
<FormattedMessage
|
||||
id="parents.faqTipsLinkText"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h3><FormattedMessage id="parents.faqCommunityTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="parents.faqCommunityBody" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h3><FormattedMessage id="parents.faqGuidelinesTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="parents.faqGuidelinesBody"
|
||||
values={{
|
||||
communityGuidelines: (
|
||||
<a href="/community_guidelines">
|
||||
<FormattedMessage
|
||||
id="parents.faqCommunityGuidelinesLinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
CleanSpeak: (
|
||||
<a href="http://www.inversoft.com/features/profanity-filter/">CleanSpeak</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h3><FormattedMessage id="parents.faqPrivacyPolicyTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="parents.faqPrivacyPolicyBody"
|
||||
values={{
|
||||
faqPage: (
|
||||
<a href="/info/faq">
|
||||
<FormattedMessage
|
||||
id="parents.faqFAQLinkText"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="faq column">
|
||||
<h3><FormattedMessage id="parents.faqOfflineTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="parents.faqOfflineBody"
|
||||
values={{
|
||||
offline2: (
|
||||
<a href="/scratch2download">
|
||||
<FormattedMessage
|
||||
id="parents.faqOffline2LinkText"
|
||||
/>
|
||||
</a>
|
||||
),
|
||||
offline14: (
|
||||
<a href="/scratch_1.4">
|
||||
<FormattedMessage
|
||||
id="parents.faqOffline14LinkText"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</section>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
</div>
|
||||
);
|
||||
|
||||
render(<Page><Landing /></Page>, document.getElementById('app'));
|
||||
269
src/views/parents/parents.scss
Normal file
269
src/views/parents/parents.scss
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
$parents-spot: $ui-blue-dark;
|
||||
$story-width: $cols3;
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.parents {
|
||||
.intro {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
background-color: $parents-spot;
|
||||
padding-bottom: 0;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
|
||||
.masthead-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
max-width: $cols6;
|
||||
text-align: left;
|
||||
color: $ui-white;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $ui-white;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ted-talk {
|
||||
position: relative;
|
||||
margin-bottom: $gutter;
|
||||
border: 2px solid $ui-border;
|
||||
border-radius: 10px;
|
||||
width: $cols4;
|
||||
height: $cols4 * .5625;
|
||||
overflow: hidden;
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.band {
|
||||
$band-color: hsla(360, 100, 100, .15);
|
||||
|
||||
margin-top: 2rem;
|
||||
background-color: $band-color;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.faq-banner {
|
||||
margin-bottom: 0;
|
||||
background-color: $ui-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.general-usage {
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
max-width: $cols5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#overview,
|
||||
#faq {
|
||||
.nav-spacer {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
margin-top: -50px; // height of nav bar
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.band {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
&.sidebar-row {
|
||||
|
||||
.body-copy {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.overview {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.general-usage {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.flex-row {
|
||||
&.sidebar-row {
|
||||
|
||||
.body-copy {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overview {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.general-usage {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
.masthead {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subnav {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.masthead-info {
|
||||
p {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: $cols4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
#view {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
&.sidebar-row {
|
||||
|
||||
.body-copy {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#overview {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.general-usage {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
p {
|
||||
margin: .25em 0;
|
||||
max-width: $cols8;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#left {
|
||||
width: $cols4;
|
||||
}
|
||||
}
|
||||
|
||||
// 12 columns
|
||||
@media only screen and (min-width: $desktop) {
|
||||
.masthead {
|
||||
h1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.general-usage {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue