mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #8873 from MiroslavDionisiev/UEPR-90
feat: [UEPR-90] Added new section to the ideas page
This commit is contained in:
Miroslav Dionisiev
GitHub
commit
0cc1091e46
8 changed files with 376 additions and 433 deletions
|
|
@ -60,6 +60,7 @@ $active-dark-gray: hsla(0, 0%, 0%, .2);
|
||||||
$box-shadow-gray: hsla(0, 0%, 0%, .25);
|
$box-shadow-gray: hsla(0, 0%, 0%, .25);
|
||||||
$box-shadow-light-gray: hsla(0, 0%, 0%, .15);
|
$box-shadow-light-gray: hsla(0, 0%, 0%, .15);
|
||||||
$overlay-gray: hsla(0, 0%, 0%, .75);
|
$overlay-gray: hsla(0, 0%, 0%, .75);
|
||||||
|
$gray-50: hsla(226, 15%, 97%, 1);
|
||||||
$transparent-light-blue: rgba(229, 240, 254, 0);
|
$transparent-light-blue: rgba(229, 240, 254, 0);
|
||||||
|
|
||||||
/* Typography Colors */
|
/* Typography Colors */
|
||||||
|
|
|
||||||
|
|
@ -1,284 +1,261 @@
|
||||||
const bindAll = require('lodash.bindall');
|
|
||||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||||
const injectIntl = require('react-intl').injectIntl;
|
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
|
|
||||||
const Button = require('../../components/forms/button.jsx');
|
const Button = require('../../components/forms/button.jsx');
|
||||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||||
const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
|
|
||||||
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
||||||
const TTTModal = require('../../components/modal/ttt/modal.jsx');
|
|
||||||
const TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
|
|
||||||
|
|
||||||
const Page = require('../../components/page/www/page.jsx');
|
const Page = require('../../components/page/www/page.jsx');
|
||||||
const intlShape = require('../../lib/intl-shape');
|
|
||||||
const render = require('../../lib/render.jsx');
|
const render = require('../../lib/render.jsx');
|
||||||
|
|
||||||
const Tiles = require('./ttt.json');
|
const {useIntl} = require('react-intl');
|
||||||
|
|
||||||
require('./ideas.scss');
|
require('./ideas.scss');
|
||||||
|
|
||||||
class Ideas extends React.Component {
|
const tipsSectionData = [
|
||||||
constructor (props) {
|
{
|
||||||
super(props);
|
tipImage: {
|
||||||
bindAll(this, [
|
altTextId: 'ideas.gettingStartedImageDescription',
|
||||||
'handleShowTTTModal',
|
imageSrc: '/images/ideas/getting-started-illustration.svg'
|
||||||
'handleHideTTTModal',
|
},
|
||||||
'renderTiles'
|
button: {
|
||||||
]);
|
href: '/projects/editor/?tutorial=getStarted',
|
||||||
this.state = {
|
buttonTextId: 'ideas.gettingStartedButtonText'
|
||||||
currentTile: Tiles[0],
|
}
|
||||||
TTTModalOpen: false
|
},
|
||||||
};
|
{
|
||||||
|
tipImage: {
|
||||||
|
altTextId: 'ideas.seeTutorialsLibraryImageDescription',
|
||||||
|
imageSrc: '/images/ideas/see-tutorials-library.png'
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
href: '/projects/editor/?tutorial=all',
|
||||||
|
buttonTextId: 'ideas.seeTutorialsLibraryButtonText'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tipImage: {
|
||||||
|
altTextId: 'ideas.starterProjectsImageDescription',
|
||||||
|
imageSrc: '/images/ideas/starter-projects-illustration.svg'
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
href: '/starter_projects',
|
||||||
|
buttonTextId: 'ideas.starterProjectsButton'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tipImage: {
|
||||||
|
altTextId: 'ideas.cardsIllustrationDescription',
|
||||||
|
imageSrc: '/images/ideas/cards-illustration.svg'
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
hrefId: 'cards.scratch-cards-allLink',
|
||||||
|
buttonImageSrc: '/images/ideas/download-icon.svg',
|
||||||
|
buttonTextId: 'ideas.codingCards'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
handleShowTTTModal (tile) {
|
];
|
||||||
// expects translated tile
|
|
||||||
this.setState({
|
const physicalIdeasData = [
|
||||||
currentTile: tile,
|
{
|
||||||
TTTModalOpen: true
|
physicalIdeasImage: {
|
||||||
});
|
imageSrc: '/images/ideas/micro-bit.png',
|
||||||
|
imageClass: 'micro-bit'
|
||||||
|
},
|
||||||
|
physicalIdeasDescription: {
|
||||||
|
headerId: 'ideas.microBitHeader',
|
||||||
|
bodyId: 'ideas.microBitBody',
|
||||||
|
hrefId: 'cards.microbit-cardsLink',
|
||||||
|
buttonImageSrc: '/images/ideas/download-icon.svg',
|
||||||
|
buttonTextId: 'ideas.codingCards'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
physicalIdeasImage: {
|
||||||
|
imageSrc: '/images/ideas/make-board.svg',
|
||||||
|
imageClass: 'makey-makey-img'
|
||||||
|
},
|
||||||
|
physicalIdeasDescription: {
|
||||||
|
headerId: 'ideas.makeyMakeyHeader',
|
||||||
|
bodyId: 'ideas.makeyMakeyBody',
|
||||||
|
hrefId: 'cards.makeymakey-cardsLink',
|
||||||
|
buttonImageSrc: '/images/ideas/download-icon.svg',
|
||||||
|
buttonTextId: 'ideas.codingCards'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
handleHideTTTModal () {
|
];
|
||||||
this.setState({
|
|
||||||
TTTModalOpen: false
|
const Ideas = () => {
|
||||||
});
|
const intl = useIntl();
|
||||||
}
|
|
||||||
renderTiles () {
|
return (
|
||||||
return Tiles.map((tile, key) => {
|
<div>
|
||||||
const translatedTile = {
|
<div className="banner-wrapper">
|
||||||
tutorialUrl: `/projects/editor/?tutorial=${tile.tutorialUrl}`,
|
<TitleBanner className="masthead ideas-banner">
|
||||||
modalImage: tile.modalImage,
|
<div className="title-banner-p">
|
||||||
modalImageDescription: this.props.intl.formatMessage({id: tile.modalImageDescription}),
|
<img
|
||||||
description: this.props.intl.formatMessage({id: tile.description}),
|
alt={intl.formatMessage({id: 'ideas.headerImageDescription'})}
|
||||||
guideUrl: this.props.intl.formatMessage({id: tile.guideUrl}),
|
src="/images/ideas/masthead-illustration.svg"
|
||||||
thumbImage: tile.thumbImage,
|
/>
|
||||||
thumbImageDescription: this.props.intl.formatMessage({id: tile.thumbImageDescription}),
|
<h1 className="title-banner-h1">
|
||||||
title: this.props.intl.formatMessage({id: tile.title}),
|
<FormattedMessage id="ideas.headerMessage" />
|
||||||
cardsUrl: this.props.intl.formatMessage({id: tile.cardsUrl})
|
</h1>
|
||||||
};
|
<a href="/projects/editor/?tutorial=all">
|
||||||
return (
|
<Button className="banner-button">
|
||||||
<TTTTile
|
|
||||||
key={key}
|
|
||||||
onClick={() => { // eslint-disable-line react/jsx-no-bind
|
|
||||||
this.handleShowTTTModal(translatedTile);
|
|
||||||
}}
|
|
||||||
{...translatedTile}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="banner-wrapper">
|
|
||||||
<TitleBanner className="masthead ideas-banner">
|
|
||||||
<div className="title-banner-p">
|
|
||||||
<img
|
|
||||||
alt={this.props.intl.formatMessage({id: 'ideas.headerImageDescription'})}
|
|
||||||
src="/images/ideas/masthead-illustration.svg"
|
|
||||||
/>
|
|
||||||
<h1 className="title-banner-h1">
|
|
||||||
<FormattedMessage id="ideas.headerMessage" />
|
|
||||||
</h1>
|
|
||||||
<a href="/projects/editor/?tutorial=all">
|
|
||||||
<Button className="banner-button">
|
|
||||||
<img
|
|
||||||
alt=""
|
|
||||||
src="/images/ideas/bulb-yellow-icon.svg"
|
|
||||||
/>
|
|
||||||
<FormattedMessage id="ideas.headerButtonMessage" />
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</TitleBanner>
|
|
||||||
</div>
|
|
||||||
<div className="tips-getting-started">
|
|
||||||
<div className="inner">
|
|
||||||
<FlexRow
|
|
||||||
as="section"
|
|
||||||
className="tips-info-section tips-left"
|
|
||||||
>
|
|
||||||
<div className="ideas-image">
|
|
||||||
<img
|
<img
|
||||||
alt={this.props.intl.formatMessage({id: 'ideas.gettingStartedImageDescription'})}
|
alt=""
|
||||||
src="/images/ideas/getting-started-illustration.svg"
|
src="/images/ideas/bulb-yellow-icon.svg"
|
||||||
/>
|
/>
|
||||||
</div>
|
<FormattedMessage id="ideas.headerButtonMessage" />
|
||||||
<div>
|
</Button>
|
||||||
<h2>
|
</a>
|
||||||
<FormattedMessage id="ideas.gettingStartedTitle" />
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="ideas.gettingStartedText" />
|
|
||||||
</p>
|
|
||||||
<a href="/projects/editor/?tutorial=getStarted">
|
|
||||||
<Button className="ideas-button">
|
|
||||||
<img
|
|
||||||
alt=""
|
|
||||||
src="/images/ideas/try-it-icon.svg"
|
|
||||||
/>
|
|
||||||
<FormattedMessage id="ideas.tryIt" />
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</TitleBanner>
|
||||||
<div className="tips-activity-guides">
|
</div>
|
||||||
<div className="inner">
|
<div className="tips">
|
||||||
<section className="ttt-section">
|
|
||||||
<div className="ttt-head">
|
|
||||||
<h2>
|
|
||||||
<FormattedMessage id="ideas.activityGuidesTitle" />
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="ideas.activityGuidesText" />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<MasonryGrid >
|
|
||||||
{this.renderTiles()}
|
|
||||||
</MasonryGrid>
|
|
||||||
<TTTModal
|
|
||||||
isOpen={this.state.TTTModalOpen}
|
|
||||||
onRequestClose={this.handleHideTTTModal}
|
|
||||||
{...this.state.currentTile}
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
className="wide-button"
|
|
||||||
href="/projects/editor/?tutorial=all"
|
|
||||||
>
|
|
||||||
<Button className="ideas-button wide-button">
|
|
||||||
<FormattedMessage id="ideas.seeAllTutorials" />
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="inner">
|
|
||||||
<FlexRow
|
|
||||||
as="section"
|
|
||||||
className="tips-info-section cards-info ideas-all-cards"
|
|
||||||
>
|
|
||||||
<div className="tips-info-body">
|
|
||||||
<h2>
|
|
||||||
<FormattedMessage id="ideas.cardsTitle" />
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="ideas.cardsText" />
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={this.props.intl.formatMessage({
|
|
||||||
id: 'cards.scratch-cards-allLink'
|
|
||||||
})}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<Button className="ideas-button">
|
|
||||||
<img
|
|
||||||
alt=""
|
|
||||||
src="/images/ideas/download-icon.svg"
|
|
||||||
/>
|
|
||||||
<FormattedMessage id="general.downloadPDF" />
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="tips-info-body tips-illustration">
|
|
||||||
<img
|
|
||||||
alt={this.props.intl.formatMessage({id: 'ideas.cardsIllustrationDescription'})}
|
|
||||||
src="/images/ideas/cards-illustration.svg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="inner">
|
<div className="inner">
|
||||||
<div className="tips-divider" />
|
<div className="section-header">
|
||||||
</div>
|
<FormattedMessage id="ideas.startHereText" />
|
||||||
<div>
|
|
||||||
<div className="inner">
|
|
||||||
<FlexRow
|
|
||||||
as="section"
|
|
||||||
className="ideas-starter tips-info-section tips-left"
|
|
||||||
>
|
|
||||||
<div className="ideas-image">
|
|
||||||
<img
|
|
||||||
alt={this.props.intl.formatMessage({id: 'ideas.starterProjectsImageDescription'})}
|
|
||||||
src="/images/ideas/starter-projects-illustration.svg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="tips-info-body">
|
|
||||||
<h2>
|
|
||||||
<FormattedMessage id="ideas.starterProjectsTitle" />
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="ideas.starterProjectsText" />
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<a href="/starter_projects">
|
|
||||||
<Button className="ideas-button">
|
|
||||||
<FormattedMessage id="ideas.starterProjectsButton" />
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<FlexRow
|
||||||
<div className="gray-area">
|
as="section"
|
||||||
<div className="inner">
|
className="tips-section"
|
||||||
<FlexRow
|
>
|
||||||
as="section"
|
{tipsSectionData.map((tipData, index) => (
|
||||||
className="tips-info-section mod-align-top"
|
<div
|
||||||
>
|
key={index}
|
||||||
<div className="tips-info-body mod-narrow">
|
className="tip"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
className="tips-icon"
|
alt={intl.formatMessage({
|
||||||
alt=""
|
id: tipData.tipImage.altTextId
|
||||||
src="/images/tips/download-icon.svg"
|
})}
|
||||||
|
src={tipData.tipImage.imageSrc}
|
||||||
|
className="tips-img"
|
||||||
/>
|
/>
|
||||||
<h3>
|
<a
|
||||||
<FormattedMessage id="ideas.desktopEditorHeader" />
|
href={
|
||||||
</h3>
|
tipData.button.href ?
|
||||||
<p>
|
tipData.button.href :
|
||||||
<FormattedMessage
|
intl.formatMessage({
|
||||||
id="ideas.desktopEditorBodyHTML"
|
id: tipData.button.hrefId
|
||||||
values={{a: chunks => <a href="/download">{chunks}</a>}}
|
})
|
||||||
/>
|
}
|
||||||
</p>
|
>
|
||||||
|
<Button className="tips-button">
|
||||||
|
{tipData.button.buttonImageSrc && (
|
||||||
|
<img src={tipData.button.buttonImageSrc} />
|
||||||
|
)}
|
||||||
|
<FormattedMessage id={tipData.button.buttonTextId} />
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="tips-info-body mod-narrow">
|
))}
|
||||||
<img
|
</FlexRow>
|
||||||
className="tips-icon"
|
|
||||||
alt=""
|
|
||||||
src="/images/tips/question-icon.svg"
|
|
||||||
/>
|
|
||||||
<h3>
|
|
||||||
<FormattedMessage id="ideas.questionsHeader" />
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage
|
|
||||||
id="ideas.questionsBodyHTML"
|
|
||||||
values={{
|
|
||||||
faq: chunks => <a href="/info/faq">{chunks}</a>,
|
|
||||||
forum: chunks => <a href="/discuss/7/">{chunks}</a>
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
<div className="physical-ideas">
|
||||||
}
|
<div className="inner">
|
||||||
}
|
<div className="section-header">
|
||||||
|
<FormattedMessage id="ideas.physicalPlayIdeas" />
|
||||||
Ideas.propTypes = {
|
</div>
|
||||||
intl: intlShape
|
<FlexRow
|
||||||
|
as="section"
|
||||||
|
className="physical-ideas-section"
|
||||||
|
>
|
||||||
|
{physicalIdeasData.map((physicalIdea, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="physical-idea"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={physicalIdea.physicalIdeasImage.imageSrc}
|
||||||
|
className={physicalIdea.physicalIdeasImage.imageClass}
|
||||||
|
/>
|
||||||
|
<div className="physical-idea-description">
|
||||||
|
<h3>
|
||||||
|
<FormattedMessage
|
||||||
|
id={physicalIdea.physicalIdeasDescription.headerId}
|
||||||
|
/>
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id={physicalIdea.physicalIdeasDescription.bodyId}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={intl.formatMessage({
|
||||||
|
id: physicalIdea.physicalIdeasDescription.hrefId
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Button className="tips-button">
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
physicalIdea.physicalIdeasDescription.buttonImageSrc
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<FormattedMessage
|
||||||
|
id={physicalIdea.physicalIdeasDescription.buttonTextId}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</FlexRow>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="gray-area">
|
||||||
|
<div className="inner">
|
||||||
|
<FlexRow
|
||||||
|
as="section"
|
||||||
|
className="tips-info-section"
|
||||||
|
>
|
||||||
|
<div className="tips-info-body mod-narrow">
|
||||||
|
<img
|
||||||
|
className="tips-icon"
|
||||||
|
alt=""
|
||||||
|
src="/images/tips/download-icon.svg"
|
||||||
|
/>
|
||||||
|
<h3>
|
||||||
|
<FormattedMessage id="ideas.desktopEditorHeader" />
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id="ideas.desktopEditorBodyHTML"
|
||||||
|
values={{a: chunks => <a href="/download">{chunks}</a>}}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="tips-info-body mod-narrow">
|
||||||
|
<img
|
||||||
|
className="tips-icon"
|
||||||
|
alt=""
|
||||||
|
src="/images/tips/question-icon.svg"
|
||||||
|
/>
|
||||||
|
<h3>
|
||||||
|
<FormattedMessage id="ideas.questionsHeader" />
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id="ideas.questionsBodyHTML"
|
||||||
|
values={{
|
||||||
|
faq: chunks => <a href="/info/faq">{chunks}</a>,
|
||||||
|
forum: chunks => <a href="/discuss/7/">{chunks}</a>
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</FlexRow>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const WrappedIdeas = injectIntl(Ideas);
|
|
||||||
|
|
||||||
render(
|
render(
|
||||||
<Page><WrappedIdeas /></Page>, document.getElementById('app'));
|
<Page>
|
||||||
|
<Ideas />
|
||||||
|
</Page>,
|
||||||
|
document.getElementById('app')
|
||||||
|
);
|
||||||
|
|
|
||||||
|
|
@ -17,127 +17,131 @@ $base-bg: $ui-white;
|
||||||
background: bottom left url("/images/ideas/left-juice.png") no-repeat;
|
background: bottom left url("/images/ideas/left-juice.png") no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ttt-section {
|
.tips {
|
||||||
|
.inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
|
||||||
|
.tips-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.tips-img {
|
||||||
|
width: $cols3;
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.physical-ideas {
|
||||||
|
.inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
|
||||||
|
.physical-ideas-section {
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1.5rem;
|
||||||
|
|
||||||
|
.physical-idea {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
text-align: start;
|
||||||
|
|
||||||
|
.makey-makey-img {
|
||||||
|
height: 6.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.micro-bit {
|
||||||
|
height: 8.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.physical-idea-description {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips-button {
|
||||||
|
width: auto;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.physical-idea:first-child {
|
||||||
|
flex: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.physical-idea:last-child {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips, .physical-ideas {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
padding: 3rem 0;
|
||||||
align-items: center;
|
background-color: $gray-50;
|
||||||
}
|
|
||||||
|
|
||||||
.tips-divider {
|
|
||||||
border-top: 1px solid $ui-gray;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-banner-image {
|
|
||||||
max-width: calc(100% - 2rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-button {
|
|
||||||
background-color: $ui-white;
|
|
||||||
color: $ui-aqua;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-right: 1rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $ui-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ideas-button {
|
|
||||||
margin-right: .75rem;
|
|
||||||
background-color: $ui-purple-dark;
|
|
||||||
color: $ui-white;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-right: 1rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $ui-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wide-button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ideas-all-cards {
|
|
||||||
padding: 5rem 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ideas-starter {
|
|
||||||
padding: 5rem 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-getting-started {
|
|
||||||
background-color: $ui-light-gray;
|
|
||||||
padding-top: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-left {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ideas-image {
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-activity-guides {
|
|
||||||
background-color: $ui-light-gray;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.purchase-button {
|
|
||||||
img {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: .75rem;
|
|
||||||
width: 1rem;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-info-section {
|
|
||||||
padding: 2.5rem 0;
|
|
||||||
width: 100%;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-info-body {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-cards-buttons {
|
|
||||||
a {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gray-area {
|
.gray-area {
|
||||||
background-color: $ui-gray;
|
background-color: $ui-gray;
|
||||||
|
|
||||||
|
.tips-info-section {
|
||||||
|
padding: 2.5rem 0;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
.tips-info-body {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img.tips-icon {
|
||||||
|
height: 1.75rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img.tips-icon {
|
.section-header {
|
||||||
height: 1.75rem;
|
font-size: 2rem;
|
||||||
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tips-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
//4 columns
|
//4 columns
|
||||||
@media #{$small} {
|
@media #{$small} {
|
||||||
|
|
||||||
|
|
@ -151,14 +155,7 @@ img.tips-icon {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ttt-head {
|
// put the image first if in 4-column
|
||||||
|
|
||||||
p {
|
|
||||||
max-width: $cols4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//put the image first if in 4-column
|
|
||||||
.tips-info-body {
|
.tips-info-body {
|
||||||
max-width: $cols4;
|
max-width: $cols4;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -187,19 +184,6 @@ img.tips-icon {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ttt-head {
|
|
||||||
p {
|
|
||||||
max-width: $cols6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-info-body.tips-illustration {
|
|
||||||
order: -1;
|
|
||||||
img {
|
|
||||||
width: $cols4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-info-body {
|
.tips-info-body {
|
||||||
max-width: $cols4;
|
max-width: $cols4;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -219,23 +203,23 @@ img.tips-icon {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ttt-head {
|
|
||||||
p {
|
|
||||||
max-width: $cols6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-info-section {
|
|
||||||
&.mod-align-top {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-info-body {
|
.tips-info-body {
|
||||||
max-width: $cols4;
|
max-width: $cols4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media #{$intermediate-and-smaller}{
|
||||||
|
.physical-ideas {
|
||||||
|
.inner {
|
||||||
|
.physical-ideas-section {
|
||||||
|
.physical-idea:first-child {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 12 columns
|
// 12 columns
|
||||||
@media #{$big} {
|
@media #{$big} {
|
||||||
.title-banner {
|
.title-banner {
|
||||||
|
|
@ -248,12 +232,6 @@ img.tips-icon {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ttt-head {
|
|
||||||
p {
|
|
||||||
max-width: $cols8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-info-section {
|
.tips-info-section {
|
||||||
&.mod-align-top {
|
&.mod-align-top {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
"cards.scratch-cards-allLink": "https://resources.scratch.mit.edu/www/cards/en/scratch-cards-all.pdf",
|
"cards.scratch-cards-allLink": "https://resources.scratch.mit.edu/www/cards/en/scratch-cards-all.pdf",
|
||||||
"cards.name-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/name-cards.pdf",
|
"cards.name-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/name-cards.pdf",
|
||||||
"cards.animation-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/animation-cards.pdf",
|
"cards.animation-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/animation-cards.pdf",
|
||||||
|
"cards.microbit-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/microbit-cards.pdf",
|
||||||
|
"cards.makeymakey-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/makeymakey-cards.pdf",
|
||||||
"cards.music-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/music-cards.pdf",
|
"cards.music-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/music-cards.pdf",
|
||||||
"cards.story-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/story-cards.pdf",
|
"cards.story-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/story-cards.pdf",
|
||||||
"cards.chase-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/chase-cards.pdf",
|
"cards.chase-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/chase-cards.pdf",
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,11 @@
|
||||||
"ideas.headerMessage": "What will you create?",
|
"ideas.headerMessage": "What will you create?",
|
||||||
"ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.",
|
"ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.",
|
||||||
"ideas.headerButtonMessage": "Choose a tutorial",
|
"ideas.headerButtonMessage": "Choose a tutorial",
|
||||||
"ideas.gettingStartedTitle": "Getting Started",
|
"ideas.startHereText": "New to Scratch? Stay here!",
|
||||||
"ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.",
|
"ideas.gettingStartedButtonText": "Try Getting Started Tutorial",
|
||||||
|
"ideas.seeTutorialsLibraryButtonText": "See Tutorials Library",
|
||||||
"ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.",
|
"ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.",
|
||||||
"ideas.tryIt": "Try it!",
|
"ideas.seeTutorialsLibraryImageDescription": "An illustration of three tutorial thumbnails.",
|
||||||
"ideas.activityGuidesTitle": "Activity Guides",
|
|
||||||
"ideas.activityGuidesText": "What do you want to make with Scratch? For each activity, you can try the Tutorial, download a set of Coding Cards, or view the Educator Guide.",
|
|
||||||
"ideas.animateANameTitle": "Animate a Name",
|
"ideas.animateANameTitle": "Animate a Name",
|
||||||
"ideas.animateANameDescription": "Animate the letters of your name, initials, or favorite word.",
|
"ideas.animateANameDescription": "Animate the letters of your name, initials, or favorite word.",
|
||||||
"ideas.animateANameImageDescription": "The name ANYA in all caps and blocked letters is poised to wiggle",
|
"ideas.animateANameImageDescription": "The name ANYA in all caps and blocked letters is poised to wiggle",
|
||||||
|
|
@ -26,43 +25,28 @@
|
||||||
"ideas.videoSensingTitle": "Video Sensing",
|
"ideas.videoSensingTitle": "Video Sensing",
|
||||||
"ideas.videoSensingDescription": "Interact with a project using the Video Sensing extension.",
|
"ideas.videoSensingDescription": "Interact with a project using the Video Sensing extension.",
|
||||||
"ideas.videoSensingImageDescription": "A virtual hand dodges a spurt of flame in an attempt to pet a dragon.",
|
"ideas.videoSensingImageDescription": "A virtual hand dodges a spurt of flame in an attempt to pet a dragon.",
|
||||||
"ideas.seeAllTutorials": "See All Tutorials",
|
|
||||||
"ideas.cardsTitle": "Get the Entire Collection of Coding Cards",
|
|
||||||
"ideas.cardsText": "With the Scratch Coding Cards, you can learn to create interactive games, stories, music, animations, and more!",
|
|
||||||
"ideas.cardsIllustrationDescription": "An assortment of fun, animated characters and objects leap out of a stack of cards.",
|
"ideas.cardsIllustrationDescription": "An assortment of fun, animated characters and objects leap out of a stack of cards.",
|
||||||
"ideas.starterProjectsTitle": "Starter Projects",
|
|
||||||
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
|
|
||||||
"ideas.starterProjectsImageDescription": "An illustration of the Scratch Code Editor.",
|
"ideas.starterProjectsImageDescription": "An illustration of the Scratch Code Editor.",
|
||||||
"ideas.starterProjectsButton": "Explore Starter Projects",
|
"ideas.starterProjectsButton": "Explore Starter Projects",
|
||||||
"ideas.tryTheTutorial": "Try the tutorial",
|
"ideas.tryTheTutorial": "Try the tutorial",
|
||||||
"ideas.codingCards": "Coding Cards",
|
"ideas.codingCards": "Coding Cards",
|
||||||
"ideas.educatorGuide": "Educator Guide",
|
"ideas.educatorGuide": "Educator Guide",
|
||||||
|
"ideas.physicalPlayIdeas": "Physical Play Ideas",
|
||||||
|
"ideas.microBitHeader": "Have a micro:bit?",
|
||||||
|
"ideas.microBitBody": "Connect your Scratch project to the real world.",
|
||||||
|
"ideas.makeyMakeyHeader": "Have a MakeyMakey?",
|
||||||
|
"ideas.makeyMakeyBody": "Turn anything into a key that connects with your Scratch project!",
|
||||||
"ideas.desktopEditorHeader": "Scratch App Download",
|
"ideas.desktopEditorHeader": "Scratch App Download",
|
||||||
"ideas.desktopEditorBody": "To create projects without an Internet connection, you can <a href=\"/download\">download the Scratch app</a>.",
|
|
||||||
"ideas.desktopEditorBodyHTML": "To create projects without an Internet connection, you can <a>download the Scratch app</a>.",
|
"ideas.desktopEditorBodyHTML": "To create projects without an Internet connection, you can <a>download the Scratch app</a>.",
|
||||||
"ideas.questionsHeader": "Questions",
|
"ideas.questionsHeader": "Questions",
|
||||||
"ideas.questionsBody": "Have more questions? See the <a href=\"/info/faq\">Frequently Asked Questions</a> or visit the <a href=\"/discuss/7/\">Help with Scripts Forum</a>.",
|
|
||||||
"ideas.questionsBodyHTML": "Have more questions? See the <faq>Frequently Asked Questions</faq> or visit the <forum>Help with Scripts Forum</forum>.",
|
"ideas.questionsBodyHTML": "Have more questions? See the <faq>Frequently Asked Questions</faq> or visit the <forum>Help with Scripts Forum</forum>.",
|
||||||
"ideas.cardsPurchase": "Purchase Printed Set",
|
|
||||||
"ideas.MakeItFlyTitle": "Make It Fly",
|
"ideas.MakeItFlyTitle": "Make It Fly",
|
||||||
"ideas.MakeItFlyDescription": "Choose any character and make it fly!",
|
"ideas.MakeItFlyDescription": "Choose any character and make it fly!",
|
||||||
"ideas.MakeItFlyImageDescription": "The scratch cat flies over the skyline. Alongside a flying taco.",
|
"ideas.MakeItFlyImageDescription": "The scratch cat flies over the skyline. Alongside a flying taco.",
|
||||||
"ideas.RaceTitle": "Race to the Finish",
|
|
||||||
"ideas.RaceDescription": "Make a game where two characters race each other.",
|
|
||||||
"ideas.HideAndSeekTitle": "Hide and Seek",
|
|
||||||
"ideas.HideAndSeekDescription": "Make a hide-and-seek game with characters that appear and disappear.",
|
|
||||||
"ideas.FashionTitle": "Fashion Game",
|
|
||||||
"ideas.FashionDescription": "Make a game where you dress a character with different clothes and styles.",
|
|
||||||
"ideas.PongTitle": "Pong Game",
|
"ideas.PongTitle": "Pong Game",
|
||||||
"ideas.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
|
"ideas.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
|
||||||
"ideas.PongImageDescription": "A ball bounces off a digital paddle.",
|
"ideas.PongImageDescription": "A ball bounces off a digital paddle.",
|
||||||
"ideas.ImagineTitle": "Imagine a World",
|
"ideas.ImagineTitle": "Imagine a World",
|
||||||
"ideas.ImagineDescription": "Imagine a world where anything is possible.",
|
"ideas.ImagineDescription": "Imagine a world where anything is possible.",
|
||||||
"ideas.ImagineImageDescription": "A girl stands proudly in front of a thought bubble as big as the Earth and as intricate as butterfly wings.",
|
"ideas.ImagineImageDescription": "A girl stands proudly in front of a thought bubble as big as the Earth and as intricate as butterfly wings."
|
||||||
"ideas.DanceTitle": "Let's Dance",
|
|
||||||
"ideas.DanceDescription": "Design an animated dance scene with music and dance moves.",
|
|
||||||
"ideas.CatchTitle": "Catch Game",
|
|
||||||
"ideas.CatchDescription": "Make a game where you catch things falling from the sky.",
|
|
||||||
"ideas.VirtualPetTitle": "Virtual Pet",
|
|
||||||
"ideas.VirtualPetDescription": "Create an interactive pet that can eat, drink, and play."
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
static/images/ideas/make-board.svg
Normal file
1
static/images/ideas/make-board.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 25 KiB |
BIN
static/images/ideas/micro-bit.png
Normal file
BIN
static/images/ideas/micro-bit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
static/images/ideas/see-tutorials-library.png
Normal file
BIN
static/images/ideas/see-tutorials-library.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Loading…
Reference in a new issue