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 MediaQuery = require('react-responsive').default;
const omit = require('lodash.omit');
const PropTypes = require('prop-types');
const React = require('react');
const FlexRow = require('../../flex-row/flex-row.jsx');
const frameless = require('../../../lib/frameless');
const Modal = require('../base/modal.jsx');
const TitleBanner = require('../../title-banner/title-banner.jsx');
require('../../forms/button.scss');
require('./modal.scss');
......@@ -20,119 +17,74 @@ const TTTModal = props => (
[
'title',
'description',
'tutorialLoc',
'activityLoc',
'guideLoc',
'thumbUrl',
'bannerUrl'
'tutorialUrl',
'cardsUrl',
'guideUrl',
'thumbImage',
'modalImage'
]
)}
>
<TitleBanner className="mod-ttt">
<MediaQuery minWidth={frameless.mobile}>
<div className="ttt-modal-header modal-header" />
<div className="ttt-modal-body">
<div className="ttt-img-container">
<img
alt=""
className="mod-ttt-img"
src={props.bannerUrl}
src={props.modalImage}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<img
alt=""
className="mod-ttt-img"
src={props.thumbUrl}
/>
</MediaQuery>
</TitleBanner>
<div className="ttt-title">
<h2>{props.title}</h2>
<p className="ttt-description">{props.description}</p>
</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 className="ttt-content">
<div className="ttt-content-chunk">
<h2>{props.title}</h2>
<p className="ttt-description">{props.description}</p>
<a
className="button ttt-try-tutorial-button"
href=""
>
<img src="/images/ideas/bulb-icon.svg" />
<FormattedMessage id="ideas.tryTheTutorial" />
</a>
</div>
<a
className="button white mod-ttt-item"
href={props.tutorialLoc}
>
<FormattedMessage id="tile.tryIt" />
</a>
</FlexRow>
<FlexRow
as="li"
className="mod-ttt-item"
>
<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 className="ttt-content-chunk">
<div className="ttt-row">
<div className="ttt-item">
<img src="/images/ideas/coding-cards-icon.svg" />
<FormattedMessage id="ideas.codingCards" />
</div>
<div className="ttt-item">
<a href="">
<FormattedMessage id="ideas.downloadPDF" />
</a>
</div>
</div>
<p className="modal-content-ttt-subtitle">
<FormattedMessage id="ttt.activitySubtitle" />
</p>
</div>
<a
className="button white mod-ttt-item"
href={props.activityLoc}
>
<FormattedMessage id="ttt.open" />
</a>
</FlexRow>
<FlexRow
as="li"
className="mod-ttt-item"
>
<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 className="ttt-content-chunk">
<div className="ttt-row">
<div className="ttt-item">
<img src="/images/ideas/educator-guide-icon.svg" />
<FormattedMessage id="ideas.educatorGuide" />
</div>
<div className="ttt-item">
<a href="">
<FormattedMessage id="ideas.downloadPDF" />
</a>
</div>
</div>
<p className="modal-content-ttt-subtitle">
<FormattedMessage id="ttt.educatorSubtitle" />
</p>
</div>
<a
className="button white mod-ttt-item"
href={props.guideLoc}
>
<FormattedMessage id="ttt.open" />
</a>
</FlexRow>
</ul>
</div>
</div>
</Modal>
);
TTTModal.propTypes = {
activityLoc: PropTypes.string.isRequired,
bannerUrl: PropTypes.string.isRequired,
cardsUrl: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
guideLoc: PropTypes.string.isRequired,
thumbUrl: PropTypes.string.isRequired,
guideUrl: PropTypes.string.isRequired,
modalImage: PropTypes.string.isRequired,
thumbImage: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
tutorialLoc: PropTypes.string.isRequired
tutorialUrl: PropTypes.string.isRequired
};
module.exports = TTTModal;
src/components/modal/ttt/modal.scss
View file @ 20e38123
@import "../../../colors";
@import "../../../frameless";
.modal-content.mod-ttt {
overflow: hidden; // Needed to put banner background behind border.
.mod-ttt {
overflow: hidden;
}
.title-banner.mod-ttt {
margin-bottom: 0;
background-color: transparent;
padding: 0;
.ttt-modal-header {
background-color: $ui-blue;
height: 3rem;
}
.mod-ttt-img {
padding: 0;
width: 100%;
}
.ttt-title {
text-align: center;
.ttt-modal-body {
margin: 2.5rem 3rem;
display: flex;
}
.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%;
.mod-ttt-img {
border-radius: .5rem;
overflow: hidden;
width: 18rem;
height: 18rem;
}
.modal-content-ttt-title,
.modal-content-ttt-subtitle {
margin: 0;
font-size: .875rem;
.ttt-content {
margin-left: 2rem;
}
.modal-content-ttt-title {
font-weight: 500;
.ttt-content-chunk + .ttt-content-chunk {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid $ui-border;
}
.modal-content-ttt-title-img {
margin-right: .25rem;
width: 1.25rem;
vertical-align: middle;
.ttt-description {
margin-top: 0px;
}
.button.white.mod-ttt-item {
border: 1px solid $ui-blue;
box-shadow: none;
a.ttt-try-tutorial-button {
display: flex;
width: fit-content;
align-items: center;
& > span {
color: $type-white;
}
& > img {
margin-right: 0.5rem;
}
}
@media #{$small} {
.modal-content.mod-ttt {
overflow: scroll;
}
.modal-content-ttt {
padding: 0;
}
.modal-content-ttt {
text-align: center;
}
.ttt-row {
display: flex;
justify-content: space-between;
}
@media #{$medium} {
.modal-content.mod-ttt {
overflow: scroll;
}
.modal-content-ttt {
padding: 0 2.5rem;
}
.flex-row.mod-ttt-item {
flex-direction: row;
}
.ttt-item {
display: flex;
img {
margin-right: 1rem;
}
}
@media #{$intermediate} {
.modal-content.mod-ttt {
overflow: scroll;
}
}
// .ttt-title {
// text-align: center;
// }
//
// .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 FormattedMessage = require('react-intl').FormattedMessage;
const PropTypes = require('prop-types');
const React = require('react');
......
src/views/ideas/ideas.jsx
View file @ 20e38123
......@@ -85,57 +85,61 @@ class Ideas extends React.Component {
</div>
</TitleBanner>
</div>
<div className="inner">
<FlexRow
as="section"
className="tips-info-section"
>
<div>
<img src="images/ideas/getting-started-illustration.svg" />
</div>
<div>
<h2>
<FormattedMessage id="ideas.gettingStartedTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.gettingStartedText" />
</p>
<a href="">
<Button className="ideas-button">
<img src="/images/ideas/try-it-icon.svg" />
<FormattedMessage id="ideas.tryIt" />
<div className="tips-getting-started">
<div className="inner">
<FlexRow
as="section"
className="tips-info-section tips-left"
>
<div className="ideas-image">
<img src="images/ideas/getting-started-illustration.svg" />
</div>
<div>
<h2>
<FormattedMessage id="ideas.gettingStartedTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.gettingStartedText" />
</p>
<a href="">
<Button className="ideas-button">
<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>
</a>
</div>
</FlexRow>
</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>
</section>
</div>
</div>
<div>
<div className="inner">
......@@ -155,7 +159,7 @@ class Ideas extends React.Component {
id: 'cards.ScratchCardsAllLink'
})}
>
<Button className="tips-button">
<Button className="tips-button ideas-button">
<img src="/images/ideas/download-icon.svg" />
<FormattedMessage id="ideas.downloadPDF" />
</Button>
......@@ -174,11 +178,10 @@ class Ideas extends React.Component {
<div className="inner">
<FlexRow
as="section"
className="tips-info-section"
className="tips-info-section tips-left"
>
<div className="tips-info-body tips-illustration">
<div className="ideas-image">
<img
className="mod-flow-left"
src="/images/ideas/starter-projects-illustration.svg"
/>
</div>
......
src/views/ideas/ideas.scss
View file @ 20e38123
......@@ -14,6 +14,7 @@ $base-bg: $ui-white;
.ideas-banner {
background: bottom left url('/images/ideas/left-juice.png') no-repeat;
margin-bottom: 0px;
}
.ttt-section {
......@@ -42,7 +43,7 @@ $base-bg: $ui-white;
img {
margin-right: 1rem;
height: 1.25rem;
height: 1.5rem;
vertical-align: middle;
}
......@@ -55,6 +56,24 @@ $base-bg: $ui-white;
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 {
img {
margin-right: 0;
......@@ -67,7 +86,7 @@ $base-bg: $ui-white;
.tips-info-section {
padding: 2.5rem 0;
width: 100%;
justify-content: space-between;
flex-wrap: nowrap;
}
.tips-info-body {
......@@ -183,14 +202,6 @@ img.tips-icon {
.tips-info-body {
max-width: $cols4;
}
.tips-button {
width: 100%;
}
img.mod-flow-left {
transform: translate(-1*$cols2);
}
}
// 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.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.petCardsLink": "https://resources.scratch.mit.edu/www/cards/en/petCards.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.musicCardsLink": "https://resources.scratch.mit.edu/www/cards/en/musicCards.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.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"
}
src/views/ideas/l10n.json
View file @ 20e38123
......@@ -25,12 +25,14 @@
"ideas.starterProjectsTitle": "Starter Projects",
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
"ideas.starterProjectsButton": "Explore Starter Projects",
"ideas.tryTheTutorial": "Try the tutorial",
"ideas.codingCards": "Coding Cards",
"ideas.educatorGuide": "Educator Guide",
"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.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.cardsDownload": "Download PDF",
"ideas.cardsPurchase": "Purchase Printed Set",
"ideas.starterProjectsHeader": "Starter 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