Skip to content

GitLab

S
scratch-www
Commit 20e38123 authored by Eric Rosenbaum's avatar Eric Rosenbaum
Browse files
Options

First pass at complete layout

parent 7212436f
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 257 deletions
src/components/modal/ttt/modal.jsx
View file @ 20e38123
const FormattedMessage = require('react-intl').FormattedMessage; const FormattedMessage = require('react-intl').FormattedMessage;
const MediaQuery = require('react-responsive').default;
const omit = require('lodash.omit'); const omit = require('lodash.omit');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
const FlexRow = require('../../flex-row/flex-row.jsx'); const FlexRow = require('../../flex-row/flex-row.jsx');
const frameless = require('../../../lib/frameless');
const Modal = require('../base/modal.jsx'); const Modal = require('../base/modal.jsx');
const TitleBanner = require('../../title-banner/title-banner.jsx');
require('../../forms/button.scss'); require('../../forms/button.scss');
require('./modal.scss'); require('./modal.scss');
...@@ -20,119 +17,74 @@ const TTTModal = props => ( ...@@ -20,119 +17,74 @@ const TTTModal = props => (
[ [
'title', 'title',
'description', 'description',
'tutorialLoc', 'tutorialUrl',
'activityLoc', 'cardsUrl',
'guideLoc', 'guideUrl',
'thumbUrl', 'thumbImage',
'bannerUrl' 'modalImage'
] ]
)} )}
> >
<TitleBanner className="mod-ttt"> <div className="ttt-modal-header modal-header" />
<MediaQuery minWidth={frameless.mobile}> <div className="ttt-modal-body">
<div className="ttt-img-container">
<img <img
alt="" alt=""
className="mod-ttt-img" className="mod-ttt-img"
src={props.bannerUrl} src={props.modalImage}
/> />
</MediaQuery> </div>
<MediaQuery maxWidth={frameless.mobile - 1}> <div className="ttt-content">
<img <div className="ttt-content-chunk">
alt="" <h2>{props.title}</h2>
className="mod-ttt-img" <p className="ttt-description">{props.description}</p>
src={props.thumbUrl} <a
/> className="button ttt-try-tutorial-button"
</MediaQuery> href=""
</TitleBanner> >
<div className="ttt-title"> <img src="/images/ideas/bulb-icon.svg" />
<h2>{props.title}</h2> <FormattedMessage id="ideas.tryTheTutorial" />
<p className="ttt-description">{props.description}</p> </a>
</div>
<ul className="modal-content-ttt">
<FlexRow
as="li"
className="mod-ttt-item"
>
<div className="modal-content-ttt-text">
<div className="modal-content-ttt-title">
<img
alt="tutorial-icon"
className="modal-content-ttt-title-img"
src="/svgs/ttt/tutorial.svg"
/>
<FormattedMessage id="ttt.tutorial" />
</div>
<p className="modal-content-ttt-subtitle">
<FormattedMessage id="ttt.tutorialSubtitle" />
</p>
</div> </div>
<a <div className="ttt-content-chunk">
className="button white mod-ttt-item" <div className="ttt-row">
href={props.tutorialLoc} <div className="ttt-item">
> <img src="/images/ideas/coding-cards-icon.svg" />
<FormattedMessage id="tile.tryIt" /> <FormattedMessage id="ideas.codingCards" />
</a> </div>
</FlexRow> <div className="ttt-item">
<FlexRow <a href="">
as="li" <FormattedMessage id="ideas.downloadPDF" />
className="mod-ttt-item" </a>
> </div>
<div className="modal-content-ttt-text">
<div className="modal-content-ttt-title">
<img
alt="activity-cards-icon"
className="modal-content-ttt-title-img"
src="/svgs/ttt/activity-cards.svg"
/>
<FormattedMessage id="ttt.activityTitle" />
</div> </div>
<p className="modal-content-ttt-subtitle">
<FormattedMessage id="ttt.activitySubtitle" />
</p>
</div> </div>
<a <div className="ttt-content-chunk">
className="button white mod-ttt-item" <div className="ttt-row">
href={props.activityLoc} <div className="ttt-item">
> <img src="/images/ideas/educator-guide-icon.svg" />
<FormattedMessage id="ttt.open" /> <FormattedMessage id="ideas.educatorGuide" />
</a> </div>
</FlexRow> <div className="ttt-item">
<FlexRow <a href="">
as="li" <FormattedMessage id="ideas.downloadPDF" />
className="mod-ttt-item" </a>
> </div>
<div className="modal-content-ttt-text">
<div className="modal-content-ttt-title">
<img
alt="educator-guide-icon"
className="modal-content-ttt-title-img"
src="/svgs/ttt/educator-guide.svg"
/>
<FormattedMessage id="ttt.educatorTitle" />
</div> </div>
<p className="modal-content-ttt-subtitle">
<FormattedMessage id="ttt.educatorSubtitle" />
</p>
</div> </div>
<a </div>
className="button white mod-ttt-item" </div>
href={props.guideLoc}
>
<FormattedMessage id="ttt.open" />
</a>
</FlexRow>
</ul>
</Modal> </Modal>
); );
TTTModal.propTypes = { TTTModal.propTypes = {
activityLoc: PropTypes.string.isRequired, cardsUrl: PropTypes.string.isRequired,
bannerUrl: PropTypes.string.isRequired,
description: PropTypes.string.isRequired, description: PropTypes.string.isRequired,
guideLoc: PropTypes.string.isRequired, guideUrl: PropTypes.string.isRequired,
thumbUrl: PropTypes.string.isRequired, modalImage: PropTypes.string.isRequired,
thumbImage: PropTypes.string.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
tutorialLoc: PropTypes.string.isRequired tutorialUrl: PropTypes.string.isRequired
}; };
module.exports = TTTModal; module.exports = TTTModal;
src/components/modal/ttt/modal.scss
View file @ 20e38123
@import "../../../colors"; @import "../../../colors";
@import "../../../frameless"; @import "../../../frameless";
.modal-content.mod-ttt { .mod-ttt {
overflow: hidden; // Needed to put banner background behind border. overflow: hidden;
} }
.title-banner.mod-ttt { .ttt-modal-header {
margin-bottom: 0; background-color: $ui-blue;
background-color: transparent; height: 3rem;
padding: 0;
} }
.mod-ttt-img { .ttt-modal-body {
padding: 0; margin: 2.5rem 3rem;
width: 100%; display: flex;
}
.ttt-title {
text-align: center;
} }
.ttt-description { .mod-ttt-img {
margin: 0; border-radius: .5rem;
font-size: 1.1rem; overflow: hidden;
} width: 18rem;
height: 18rem;
.modal-content-ttt {
padding: 0 5rem;
list-style: none;
}
.flex-row.mod-ttt-item {
margin: 0;
border-top: 1px dashed $ui-border;
padding: .5rem;
justify-content: space-between;
}
.modal-content-ttt-text {
max-width: 70%;
} }
.modal-content-ttt-title, .ttt-content {
.modal-content-ttt-subtitle { margin-left: 2rem;
margin: 0;
font-size: .875rem;
} }
.modal-content-ttt-title { .ttt-content-chunk + .ttt-content-chunk {
font-weight: 500; margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid $ui-border;
} }
.modal-content-ttt-title-img { .ttt-description {
margin-right: .25rem; margin-top: 0px;
width: 1.25rem;
vertical-align: middle;
} }
.button.white.mod-ttt-item { a.ttt-try-tutorial-button {
border: 1px solid $ui-blue; display: flex;
box-shadow: none; width: fit-content;
align-items: center;
& > span {
color: $type-white;
}
& > img {
margin-right: 0.5rem;
}
} }
@media #{$small} { .ttt-row {
.modal-content.mod-ttt { display: flex;
overflow: scroll; justify-content: space-between;
}
.modal-content-ttt {
padding: 0;
}
.modal-content-ttt {
text-align: center;
}
} }
@media #{$medium} { .ttt-item {
.modal-content.mod-ttt { display: flex;
overflow: scroll; img {
} margin-right: 1rem;
}
.modal-content-ttt {
padding: 0 2.5rem;
}
.flex-row.mod-ttt-item {
flex-direction: row;
}
} }
@media #{$intermediate} { // .ttt-title {
.modal-content.mod-ttt { // text-align: center;
overflow: scroll; // }
} //
} // .ttt-description {
// margin: 0;
// font-size: 1.1rem;
// }
//
// .modal-content-ttt {
// padding: 0 5rem;
// list-style: none;
// }
//
// .flex-row.mod-ttt-item {
// margin: 0;
// border-top: 1px dashed $ui-border;
// padding: .5rem;
// justify-content: space-between;
// }
//
// .modal-content-ttt-text {
// max-width: 70%;
// }
//
// .modal-content-ttt-title,
// .modal-content-ttt-subtitle {
// margin: 0;
// font-size: .875rem;
// }
//
// .modal-content-ttt-title {
// font-weight: 500;
// }
//
// .modal-content-ttt-title-img {
// margin-right: .25rem;
// width: 1.25rem;
// vertical-align: middle;
// }
//
// .button.white.mod-ttt-item {
// border: 1px solid $ui-blue;
// box-shadow: none;
// }
src/components/ttt-tile/ttt-tile.jsx
View file @ 20e38123
const classNames = require('classnames'); const classNames = require('classnames');
const FormattedMessage = require('react-intl').FormattedMessage;
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
......
src/views/ideas/ideas.jsx
View file @ 20e38123
...@@ -85,57 +85,61 @@ class Ideas extends React.Component { ...@@ -85,57 +85,61 @@ class Ideas extends React.Component {
</div> </div>
</TitleBanner> </TitleBanner>
</div> </div>
<div className="inner"> <div className="tips-getting-started">
<FlexRow <div className="inner">
as="section" <FlexRow
className="tips-info-section" as="section"
> className="tips-info-section tips-left"
<div> >
<img src="images/ideas/getting-started-illustration.svg" /> <div className="ideas-image">
</div> <img src="images/ideas/getting-started-illustration.svg" />
<div> </div>
<h2> <div>
<FormattedMessage id="ideas.gettingStartedTitle" /> <h2>
</h2> <FormattedMessage id="ideas.gettingStartedTitle" />
<p> </h2>
<FormattedHTMLMessage id="ideas.gettingStartedText" /> <p>
</p> <FormattedHTMLMessage id="ideas.gettingStartedText" />
<a href=""> </p>
<Button className="ideas-button"> <a href="">
<img src="/images/ideas/try-it-icon.svg" /> <Button className="ideas-button">
<FormattedMessage id="ideas.tryIt" /> <img src="/images/ideas/try-it-icon.svg" />
<FormattedMessage id="ideas.tryIt" />
</Button>
</a>
</div>
</FlexRow>
</div>
</div>
<div className="tips-activity-guides">
<div className="inner">
<section className="ttt-section">
<div className="ttt-head">
<h2>
<FormattedMessage id="ideas.activityGuidesTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.activityGuidesText" />
</p>
</div>
<MasonryGrid >
{this.renderTTTTiles()}
</MasonryGrid>
<TTTModal
isOpen={this.state.TTTModalOpen}
onRequestClose={this.handleHideTTTModal}
{...this.state.currentTile}
/>
<a
className="wide-button"
href=""
>
<Button className="ideas-button wide-button">
<FormattedMessage id="ideas.seeAllTutorials" />
</Button> </Button>
</a> </a>
</div> </section>
</FlexRow> </div>
</div>
<div className="inner">
<section className="ttt-section">
<div className="ttt-head">
<h2>
<FormattedMessage id="ideas.activityGuidesTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.activityGuidesText" />
</p>
</div>
<MasonryGrid >
{this.renderTTTTiles()}
</MasonryGrid>
<TTTModal
isOpen={this.state.TTTModalOpen}
onRequestClose={this.handleHideTTTModal}
{...this.state.currentTile}
/>
<a
className="wide-button"
href=""
>
<Button className="ideas-button wide-button">
<FormattedMessage id="ideas.seeAllTutorials" />
</Button>
</a>
</section>
</div> </div>
<div> <div>
<div className="inner"> <div className="inner">
...@@ -155,7 +159,7 @@ class Ideas extends React.Component { ...@@ -155,7 +159,7 @@ class Ideas extends React.Component {
id: 'cards.ScratchCardsAllLink' id: 'cards.ScratchCardsAllLink'
})} })}
> >
<Button className="tips-button"> <Button className="tips-button ideas-button">
<img src="/images/ideas/download-icon.svg" /> <img src="/images/ideas/download-icon.svg" />
<FormattedMessage id="ideas.downloadPDF" /> <FormattedMessage id="ideas.downloadPDF" />
</Button> </Button>
...@@ -174,11 +178,10 @@ class Ideas extends React.Component { ...@@ -174,11 +178,10 @@ class Ideas extends React.Component {
<div className="inner"> <div className="inner">
<FlexRow <FlexRow
as="section" as="section"
className="tips-info-section" className="tips-info-section tips-left"
> >
<div className="tips-info-body tips-illustration"> <div className="ideas-image">
<img <img
className="mod-flow-left"
src="/images/ideas/starter-projects-illustration.svg" src="/images/ideas/starter-projects-illustration.svg"
/> />
</div> </div>
......
src/views/ideas/ideas.scss
View file @ 20e38123
...@@ -14,6 +14,7 @@ $base-bg: $ui-white; ...@@ -14,6 +14,7 @@ $base-bg: $ui-white;
.ideas-banner { .ideas-banner {
background: bottom left url('/images/ideas/left-juice.png') no-repeat; background: bottom left url('/images/ideas/left-juice.png') no-repeat;
margin-bottom: 0px;
} }
.ttt-section { .ttt-section {
...@@ -42,7 +43,7 @@ $base-bg: $ui-white; ...@@ -42,7 +43,7 @@ $base-bg: $ui-white;
img { img {
margin-right: 1rem; margin-right: 1rem;
height: 1.25rem; height: 1.5rem;
vertical-align: middle; vertical-align: middle;
} }
...@@ -55,6 +56,24 @@ $base-bg: $ui-white; ...@@ -55,6 +56,24 @@ $base-bg: $ui-white;
width: 100%; width: 100%;
} }
.tips-getting-started {
padding-top: 2.5rem;
background-color: #FAFAFF;
}
.tips-left {
justify-content: flex-start;
}
.ideas-image {
margin-right: 2rem;
}
.tips-activity-guides {
padding-bottom: 2rem;
background-color: #FAFAFF;
}
.purchase-button { .purchase-button {
img { img {
margin-right: 0; margin-right: 0;
...@@ -67,7 +86,7 @@ $base-bg: $ui-white; ...@@ -67,7 +86,7 @@ $base-bg: $ui-white;
.tips-info-section { .tips-info-section {
padding: 2.5rem 0; padding: 2.5rem 0;
width: 100%; width: 100%;
justify-content: space-between; flex-wrap: nowrap;
} }
.tips-info-body { .tips-info-body {
...@@ -183,14 +202,6 @@ img.tips-icon { ...@@ -183,14 +202,6 @@ img.tips-icon {
.tips-info-body { .tips-info-body {
max-width: $cols4; max-width: $cols4;
} }
.tips-button {
width: 100%;
}
img.mod-flow-left {
transform: translate(-1*$cols2);
}
} }
// 12 columns // 12 columns
......
src/views/ideas/l10n-static.json
View file @ 20e38123
{ {
"cards.Scratch2CardsLink": "https://resources.scratch.mit.edu/www/cards/en/Scratch2Cards.pdf",
"cards.ScratchCardsAllLink": "https://resources.scratch.mit.edu/www/cards/en/ScratchCardsAll.pdf", "cards.ScratchCardsAllLink": "https://resources.scratch.mit.edu/www/cards/en/ScratchCardsAll.pdf",
"cards.catchCardsLink": "https://resources.scratch.mit.edu/www/cards/en/catchCards.pdf",
"cards.danceCardsLink": "https://resources.scratch.mit.edu/www/cards/en/danceCards.pdf",
"cards.dressupCardsLink": "https://resources.scratch.mit.edu/www/cards/en/dressupCards.pdf",
"cards.fashionCardsLink": "https://resources.scratch.mit.edu/www/cards/en/fashionCards.pdf",
"cards.flyCardsLink": "https://resources.scratch.mit.edu/www/cards/en/flyCards.pdf",
"cards.hide-seekCardsLink": "https://resources.scratch.mit.edu/www/cards/en/hide-seekCards.pdf",
"cards.musicCardsLink": "https://resources.scratch.mit.edu/www/cards/en/musicCards.pdf",
"cards.nameCardsLink": "https://resources.scratch.mit.edu/www/cards/en/nameCards.pdf", "cards.nameCardsLink": "https://resources.scratch.mit.edu/www/cards/en/nameCards.pdf",
"cards.petCardsLink": "https://resources.scratch.mit.edu/www/cards/en/petCards.pdf", "cards.musicCardsLink": "https://resources.scratch.mit.edu/www/cards/en/musicCards.pdf",
"cards.pongCardsLink": "https://resources.scratch.mit.edu/www/cards/en/pongCards.pdf",
"cards.raceCardsLink": "https://resources.scratch.mit.edu/www/cards/en/raceCards.pdf",
"cards.storyCardsLink": "https://resources.scratch.mit.edu/www/cards/en/storyCards.pdf", "cards.storyCardsLink": "https://resources.scratch.mit.edu/www/cards/en/storyCards.pdf",
"guides.CatchGuideLink": "https://resources.scratch.mit.edu/www/guides/en/CatchGuide.pdf",
"guides.DanceGuideLink": "https://resources.scratch.mit.edu/www/guides/en/DanceGuide.pdf",
"guides.FashionGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FashionGuide.pdf",
"guides.FlyGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FlyGuide.pdf",
"guides.Getting-Started-Guide-Scratch2Link": "https://resources.scratch.mit.edu/www/guides/en/Getting-Started-Guide-Scratch2.pdf",
"guides.HideandSeekGuideLink": "https://resources.scratch.mit.edu/www/guides/en/HideandSeekGuide.pdf",
"guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf", "guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf",
"guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf", "guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf",
"guides.PetGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PetGuide.pdf",
"guides.PongGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PongGuide.pdf",
"guides.RaceGuideLink": "https://resources.scratch.mit.edu/www/guides/en/RaceGuide.pdf",
"guides.StoryGuideLink": "https://resources.scratch.mit.edu/www/guides/en/StoryGuide.pdf" "guides.StoryGuideLink": "https://resources.scratch.mit.edu/www/guides/en/StoryGuide.pdf"
} }
src/views/ideas/l10n.json
View file @ 20e38123
...@@ -25,12 +25,14 @@ ...@@ -25,12 +25,14 @@
"ideas.starterProjectsTitle": "Starter Projects", "ideas.starterProjectsTitle": "Starter Projects",
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.", "ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
"ideas.starterProjectsButton": "Explore Starter Projects", "ideas.starterProjectsButton": "Explore Starter Projects",
"ideas.tryTheTutorial": "Try the tutorial",
"ideas.codingCards": "Coding Cards",
"ideas.educatorGuide": "Educator Guide",
"ideas.tttHeader": "Things to Try", "ideas.tttHeader": "Things to Try",
"ideas.tttBody": "What do you want to make with Scratch? For each activity, you can try the <strong>Tutorial</strong>, download a set of <strong>Activity Cards</strong>, or view the <strong>Educator Guide</strong>.", "ideas.tttBody": "What do you want to make with Scratch? For each activity, you can try the <strong>Tutorial</strong>, download a set of <strong>Activity Cards</strong>, or view the <strong>Educator Guide</strong>.",
"ideas.cardsHeader": "Get the Entire Collection of Activity Cards", "ideas.cardsHeader": "Get the Entire Collection of Activity Cards",
"ideas.cardsBody": "With the Scratch Activity Cards, you can learn to create interactive games, stories, music, animations, and more!", "ideas.cardsBody": "With the Scratch Activity Cards, you can learn to create interactive games, stories, music, animations, and more!",
"ideas.cardsDownload": "Download PDF",
"ideas.cardsPurchase": "Purchase Printed Set", "ideas.cardsPurchase": "Purchase Printed Set",
"ideas.starterProjectsHeader": "Starter Projects", "ideas.starterProjectsHeader": "Starter Projects",
"ideas.starterProjectsBody": "You can play with Starter Projects to get ideas for making your own projects.", "ideas.starterProjectsBody": "You can play with Starter Projects to get ideas for making your own projects.",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment