Skip to content

GitLab

S
scratch-www
Unverified Commit ec507b73 authored by chrisgarrity's avatar chrisgarrity Committed by GitHub
Browse files
Options

Merge pull request #1654 from chrisgarrity/feature/hoc-2017 

Top and middle banners for HoC 2017
parents fd6211bc 048d5c13
Show whitespace changes
Inline Side-by-side
Showing with 578 additions and 21 deletions
src/components/ttt-tile/ttt-tile.jsx
View file @ ec507b73
......@@ -47,7 +47,7 @@ var TTTTile = React.createClass({
{this.props.onGuideClick && (
<div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
<FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
<img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
<img className="ttt-tile-open-modal" src="/svgs/modal/open-blue.svg" />
</div>
)}
</div>
......
src/components/ttt-tile/ttt-tile.scss
View file @ ec507b73
......@@ -105,14 +105,15 @@
font-size: .75rem;
font-weight: 500;
&:hover {
background-color: lighten($link-blue, 40%);
}
}
.ttt-tile-see-more {
.ttt-tile-open-modal {
display: inline-block;
padding: 0 .25rem;
vertical-align: middle;
width: 1rem;
height: 1rem;
vertical-align: text-bottom;
}
src/views/splash/hoc/middle-banner.jsx 0 → 100644
View file @ ec507b73
var FormattedMessage = require('react-intl').FormattedMessage;
var injectIntl = require('react-intl').injectIntl;
var MediaQuery = require('react-responsive');
var React = require('react');
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
var TTTModal = require('../../../components/modal/ttt/modal.jsx');
var TTTTile = require('../../../components/ttt-tile/ttt-tile.jsx');
var frameless = require('../../../lib/frameless');
var tiles = require('../../tips/ttt');
require('../../../components/forms/button.scss');
require('./middle-banner.scss');
var MiddleBanner = injectIntl(React.createClass({
getInitialState: function () {
return {
currentTile: tiles[1],
TTTModalOpen: false
};
},
showTTTModal: function (tile) {
return this.setState({
currentTile: tile,
TTTModalOpen: true
});
},
hideTTTModal: function () {
return this.setState({TTTModalOpen: false});
},
renderTTTTiles: function () {
var formatMessage = this.props.intl.formatMessage;
var tileObjects = {
flyTile: {
title: formatMessage({id: tiles[1].title}),
description: formatMessage({id: tiles[1].description}),
tutorialLoc: tiles[1].tutorialLoc,
activityLoc: formatMessage({id: tiles[1].activityLoc}),
guideLoc: formatMessage({id: tiles[1].guideLoc}),
thumbUrl: tiles[1].thumbUrl,
bannerUrl: tiles[1].bannerUrl
},
musicTile: {
title: formatMessage({id: tiles[2].title}),
description: formatMessage({id: tiles[2].description}),
tutorialLoc: tiles[2].tutorialLoc,
activityLoc: formatMessage({id: tiles[2].activityLoc}),
guideLoc: formatMessage({id: tiles[2].guideLoc}),
thumbUrl: tiles[2].thumbUrl,
bannerUrl: tiles[2].bannerUrl
},
pongTile: {
title: formatMessage({id: tiles[7].title}),
description: formatMessage({id: tiles[7].description}),
tutorialLoc: tiles[7].tutorialLoc,
activityLoc: formatMessage({id: tiles[7].activityLoc}),
guideLoc: formatMessage({id: tiles[7].guideLoc}),
thumbUrl: tiles[7].thumbUrl,
bannerUrl: tiles[7].bannerUrl
}
};
return [
<TTTTile
key={1}
className="mod-banner"
onGuideClick={this.showTTTModal.bind(this, tileObjects.flyTile)}
{...tileObjects.flyTile}
/>,
<TTTTile
key={2}
className="mod-banner"
onGuideClick={this.showTTTModal.bind(this, tileObjects.musicTile)}
{...tileObjects.musicTile}
/>,
<TTTTile
key={7}
className="mod-banner mod-last-tile"
onGuideClick={this.showTTTModal.bind(this, tileObjects.pongTile)}
{...tileObjects.pongTile}
/>
];
},
render: function () {
return (
<TitleBanner className="mod-splash-middle">
<div className="middle-banner inner">
<FlexRow className="middle-banner-header">
<h1 className="middle-banner-header-h1">
<FormattedMessage id="middleBanner.header" />
</h1>
<a href="/tips" className="button mod-ttt-try-button">
<FormattedMessage id="middleBanner.ttt" />
</a>
</FlexRow>
<MediaQuery minWidth={frameless.tablet}>
<FlexRow className="middle-banner-tiles">
{this.renderTTTTiles()}
</FlexRow>
<TTTModal
isOpen={this.state.TTTModalOpen}
onRequestClose={this.hideTTTModal}
{...this.state.currentTile}
/>
</MediaQuery>
</div>
</TitleBanner>
);
}
}));
module.exports = MiddleBanner;
src/views/splash/hoc/middle-banner.scss 0 → 100644
View file @ ec507b73
@import "../../../colors";
@import "../../../frameless";
.title-banner.mod-splash-middle {
background: url("/images/blocks-pattern.png");
background-color: $ui-purple;
background-repeat: repeat;
background-size: 180px 180px;
}
.middle-banner-header {
margin-bottom: 1rem;
justify-content: space-between;
align-items: center;
}
.middle-banner-header-h1 {
color: $type-white;
}
.mod-ttt-try-button {
&:link,
&:visited,
&:active
&:hover {
color: $type-white;
}
}
.ttt-tile.mod-banner {
background-color: $background-color;
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.mod-last-tile {
display: none;
}
.middle-banner-header {
flex-direction: column;
align-items: center;
}
}
@media only screen and (max-width: $tablet - 1) {
.title-banner.mod-splash-middle {
display: none;
}
}
src/views/splash/hoc/top-banner.jsx 0 → 100644
View file @ ec507b73
var FormattedMessage = require('react-intl').FormattedMessage;
var injectIntl = require('react-intl').injectIntl;
var React = require('react');
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
var TTTModal = require('../../../components/modal/ttt/modal.jsx');
require('../../../components/forms/button.scss');
require('./top-banner.scss');
var nameTile = {
title: 'ttt.AnimateYourNameTitle',
description: 'ttt.AnimateYourNameDescription',
thumbUrl: '/images/ttt/animate-your-name.jpg',
bannerUrl: '/images/ttt/animate-your-name-banner.jpg',
tutorialLoc: '/projects/editor/?tip_bar=name',
activityLoc: 'cards.nameCardsLink',
guideLoc: 'guides.NameGuideLink'
};
var TopBanner = injectIntl(React.createClass({
type: 'TopBanner',
propTypes: {
loggedIn: React.PropTypes.bool.isRequired
},
getInitialState: function () {
// use translated tile
var formatMessage = this.props.intl.formatMessage;
var translatedTile = {};
translatedTile = {
title: formatMessage({id: nameTile.title}),
description: formatMessage({id: nameTile.description}),
tutorialLoc: nameTile.tutorialLoc,
activityLoc: formatMessage({id: nameTile.activityLoc}),
guideLoc: formatMessage({id: nameTile.guideLoc}),
thumbUrl: nameTile.thumbUrl,
bannerUrl: nameTile.bannerUrl
};
return {currentTile: translatedTile, TTTModalOpen: false};
},
showTTTModal: function () {
this.setState({TTTModalOpen: true});
},
hideTTTModal: function () {
this.setState({TTTModalOpen: false});
},
render: function () {
return (
<TitleBanner className="mod-splash-top">
<FlexRow className="banner-top inner">
<a href="/projects/editor/?tip_bar=name">
<FlexRow className="top-animation">
<img
src="/images/hoc/s.png"
alt=""
className="top-animation-letter mod-letter-s"
/>
<img
src="/images/hoc/c1.png"
alt=""
className="top-animation-letter mod-letter-c1"
/>
<img
src="/images/hoc/r.png"
alt=""
className="top-animation-letter mod-letter-r"
/>
<img
src="/images/hoc/a.png"
alt=""
className="top-animation-letter mod-letter-a"
/>
<img
src="/images/hoc/t.png"
alt=""
className="top-animation-letter mod-letter-t"
/>
<img
src="/images/hoc/c2.png"
alt=""
className="top-animation-letter mod-letter-c2"
/>
<img
src="/images/hoc/h.png"
alt=""
className="top-animation-letter mod-letter-h"
/>
</FlexRow>
</a>
<div className="top-links">
<a href="/projects/editor/?tip_bar=name" className="button mod-top-button">
{ this.props.loggedIn ?
<FormattedMessage id="ttt.AnimateYourNameTitle" /> :
<FormattedMessage id="topBanner.getStarted" />
}
</a>
<div className="mod-guides-link" onClick={this.showTTTModal}>
&nbsp;&nbsp;
<FormattedMessage id="tile.guides" />
<img className="top-open-modal" src="/svgs/modal/open-white.svg" />
<TTTModal
isOpen={this.state.TTTModalOpen}
onRequestClose={this.hideTTTModal}
{...this.state.currentTile}/>
</div>
</div>
</FlexRow>
</TitleBanner>
);
}
}));
module.exports = TopBanner;
src/views/splash/hoc/top-banner.scss 0 → 100644
View file @ ec507b73
@import "../../../colors";
@import "../../../frameless";
.title-banner.mod-splash-top {
background-color: $ui-aqua;
background-image: url("/images/hoc/splash-left.png"), url("/images/hoc/splash-right.png");
background-repeat: no-repeat, no-repeat;
background-position: left bottom, right bottom;
background-size: 40% auto, 40% auto;
}
.banner-top {
background-image: url("/images/hoc/doodads.png");
background-repeat: no-repeat;
background-position: top;
background-size: 70%;
flex-direction: column;
}
.top-banner-header {
justify-content: space-between;
}
.top-banner-header-h1 {
margin-bottom: 1.25rem;
color: $type-white;
}
.banner-image.mod-top {
width: 100%;
}
.top-animation {
margin: auto;
padding-top: 2rem;
padding-bottom: 1rem;
width: 70%;
}
.top-animation-letter {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: both;
width: 100%;
}
@keyframes jump {
from,
to {
transform: translate3d(0, 0, 0);
}
12.5%,
62.5% {
transform: translate3d(0, 10px, 0);
}
37.5%,
87.5% {
transform: translate3d(0, -10px, 0);
}
}
.mod-letter-s {
// width: 16.6%;
animation-name: jump;
width: 13.3%;
}
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.25, 1.25, 1.25);
}
to {
transform: scale3d(1, 1, 1);
}
}
.mod-letter-c1 {
// width: 12.5%;
animation-name: pulse;
width: 10%;
}
@keyframes spin-left {
90% {
transform: rotate3d(0, 0, 1, -360deg);
}
to {
transform: rotate3d(0, 0, 1, -360deg);
}
}
.mod-letter-r {
// width: 14%;
animation-name: spin-left;
width: 11.2%;
}
@keyframes swing {
25% {
transform: rotate3d(0, 0, 1, 40deg);
}
75% {
transform: rotate3d(0, 0, 1, -40deg);
}
from,
to {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.mod-letter-a {
// width: 14.4%;
animation-name: swing;
width: 11.5%;
}
@keyframes shake {
from,
to {
transform: translate3d(0, 0, 0);
}
12.5%,
62.5% {
transform: translate3d(-10px, 0, 0);
}
37.5%,
87.5% {
transform: translate3d(10px, 0, 0);
}
}
.mod-letter-t {
// width: 15.5%;
animation-name: shake;
width: 12.4%;
}
@keyframes spin-right {
90% {
transform: rotate3d(0, 0, 1, 360deg);
}
to {
transform: rotate3d(0, 0, 1, 360deg);
}
}
.mod-letter-c2 {
// width: 12.5%;
animation-name: spin-right;
width: 10%;
}
@keyframes inverse-jump {
from,
to {
transform: translate3d(0, 0, 0);
}
12.5%,
62.5% {
transform: translate3d(0, -10px, 0);
}
37.5%,
87.5% {
transform: translate3d(0, 10px, 0);
}
}
.mod-letter-h {
// width: 14.4%;
animation-name: inverse-jump;
width: 11.5%;
}
.mod-top-button {
&:active &:hover,
&:link,
&:visited {
color: $type-white;
font-size: 1rem;
}
}
.mod-top-button {
border: 1px solid $active-gray;
box-shadow: none;
background-color: $ui-blue;
}
.top-links {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.mod-guides-link {
cursor: pointer;
padding: 1.25rem 0;
color: $ui-white;
font-size: 1rem;
font-weight: 500;
}
.top-open-modal {
display: inline-block;
padding: 0 .25rem;
vertical-align: top;
}
@media only screen and (max-width: $tablet - 1) {
.flex-row.top-animation {
flex-direction: row;
}
}
src/views/splash/l10n-static.json 0 → 100644
View file @ ec507b73
{
"cards.nameCardsLink": "https://resources.scratch.mit.edu/www/cards/en/nameCards.pdf",
"cards.flyCardsLink": "https://resources.scratch.mit.edu/www/cards/en/flyCards.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",
"guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf",
"guides.FlyGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FlyGuide.pdf",
"guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf",
"guides.PongGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PongGuide.pdf"
}
src/views/splash/l10n.json
View file @ ec507b73
......@@ -29,6 +29,28 @@
"teacherbanner.classesButton": "My Classes",
"teacherbanner.faqButton": "Teacher Account FAQ",
"middleBanner.header": "Get Creative with Coding",
"middleBanner.ttt": "See more activities",
"topBanner.getStarted": "Get Started with Coding!",
"ttt.tutorial": "Tutorial",
"ttt.open": "Open",
"ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
"ttt.activityTitle": "Activity Cards",
"ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
"ttt.educatorTitle": "Educator Guide",
"ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
"tile.tryIt": "Try It",
"tile.guides": "See Cards and Guides",
"ttt.download": "Download",
"ttt.AnimateYourNameTitle": "Animate a Name",
"ttt.AnimateYourNameDescription": "Animate the letters of your username, initials, or favorite word.",
"ttt.MakeItFlyTitle": "Make It Fly",
"ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
"ttt.MakeMusicTitle": "Make Music",
"ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
"ttt.PongTitle": "Pong Game",
"ttt.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
"welcome.welcomeToScratch": "Welcome to Scratch!",
"welcome.learn": "Learn how to make a project in Scratch",
"welcome.tryOut": "Try out starter projects",
......
src/views/splash/presentation.jsx
View file @ ec507b73
......@@ -11,6 +11,8 @@ var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
var LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
var TopBanner = require('./hoc/top-banner.jsx');
var MiddleBanner = require('./hoc/middle-banner.jsx');
var Intro = require('../../components/intro/intro.jsx');
var IframeModal = require('../../components/modal/iframe/modal.jsx');
var News = require('../../components/news/news.jsx');
......@@ -253,6 +255,8 @@ var SplashPresentation = injectIntl(React.createClass({
{this.props.isEducator ? [
<TeacherBanner key="teacherbanner" messages={messages} />
] : []}
<TopBanner loggedIn={this.props.sessionStatus === sessionActions.Status.FETCHED
&& Object.keys(this.props.user).length !== 0}/>
<div key="inner" className="inner mod-splash">
{this.props.sessionStatus === sessionActions.Status.FETCHED ? (
Object.keys(this.props.user).length !== 0 ? [
......@@ -273,6 +277,12 @@ var SplashPresentation = injectIntl(React.createClass({
]) : []
}
{featured.shift()}
{featured.shift()}
</div>
<MiddleBanner />
<div key="inner2" className="inner mod-splash">
{featured}
{this.props.isAdmin ? [
......
static/svgs/modal/open-blue.svg 0 → 100644
View file @ ec507b73
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>open-blue</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="open-blue" fill="#4C97FF">
<path d="M16.904265,9.16353035 L15.4298099,7.69520276 L10.2383662,11.6050888 C9.64794591,12.057779 8.79050666,11.9379804 8.33625534,11.3315664 C7.9692373,10.844951 7.97668404,10.1706865 8.33625534,9.70951497 L12.2606889,4.53591307 L10.8213398,3.10151073 C10.4107052,2.6922873 10.7011281,2.00848131 11.2670806,2.00848131 L17.3585163,2 C17.709577,2.00848131 18,2.29896634 18,2.64033925 L18,8.71932149 C18,9.28332892 17.3063891,9.56427246 16.904265,9.16353035 Z M15.3807332,18 L3.03722491,18 C2.46488952,18 2,17.5367082 2,16.9652796 L2,4.66419295 C2,4.09382454 2.46488952,3.62947257 3.03722491,3.62947257 L7.82335296,3.62947257 C8.39781598,3.62947257 8.86164168,4.09382454 8.86164168,4.66419295 C8.86164168,5.23562152 8.39781598,5.69891333 7.82335296,5.69891333 L4.07657745,5.69891333 L4.07657745,15.9305592 L14.3424445,15.9305592 L14.3424445,13.2101776 C14.3424445,12.638749 14.807334,12.1754572 15.3807332,12.1754572 C15.9541324,12.1754572 16.4200857,12.638749 16.4200857,13.2101776 L16.4200857,16.9652796 C16.4200857,17.5367082 15.9541324,18 15.3807332,18 Z" id="open-white"></path>
</g>
</g>
</svg>
\ No newline at end of file
static/svgs/modal/open-white.svg 0 → 100644
View file @ ec507b73
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>open-modal-icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="open-modal-icon" fill="#FFFFFF">
<path d="M16.904265,9.16353035 L15.4298099,7.69520276 L10.2383662,11.6050888 C9.64794591,12.057779 8.79050666,11.9379804 8.33625534,11.3315664 C7.9692373,10.844951 7.97668404,10.1706865 8.33625534,9.70951497 L12.2606889,4.53591307 L10.8213398,3.10151073 C10.4107052,2.6922873 10.7011281,2.00848131 11.2670806,2.00848131 L17.3585163,2 C17.709577,2.00848131 18,2.29896634 18,2.64033925 L18,8.71932149 C18,9.28332892 17.3063891,9.56427246 16.904265,9.16353035 Z M15.3807332,18 L3.03722491,18 C2.46488952,18 2,17.5367082 2,16.9652796 L2,4.66419295 C2,4.09382454 2.46488952,3.62947257 3.03722491,3.62947257 L7.82335296,3.62947257 C8.39781598,3.62947257 8.86164168,4.09382454 8.86164168,4.66419295 C8.86164168,5.23562152 8.39781598,5.69891333 7.82335296,5.69891333 L4.07657745,5.69891333 L4.07657745,15.9305592 L14.3424445,15.9305592 L14.3424445,13.2101776 C14.3424445,12.638749 14.807334,12.1754572 15.3807332,12.1754572 C15.9541324,12.1754572 16.4200857,12.638749 16.4200857,13.2101776 L16.4200857,16.9652796 C16.4200857,17.5367082 15.9541324,18 15.3807332,18 Z"></path>
</g>
</g>
</svg>
\ No newline at end of file
static/svgs/ttt/see-more.svg deleted 100644 → 0
View file @ fd6211bc
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;fill:#4C97FF;stroke:#4C97FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#4C97FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#4C97FF;}
</style>
<path class="st0" d="M13,11H6c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h7c0.6,0,1,0.4,1,1v7C14,10.6,13.6,11,13,11z"/>
<path class="st1" d="M9,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1"/>
<path class="st1" d="M13,11H6c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h7c0.6,0,1,0.4,1,1v7C14,10.6,13.6,11,13,11z"/>
<g>
<path class="st2" d="M12,4.2v2.4c0,0.2-0.3,0.3-0.4,0.2L10.8,6l-3,2.7c-0.1,0.1-0.3,0.1-0.4,0c-0.1-0.1-0.1-0.3,0-0.4L10,5.2
L9.2,4.4C9,4.3,9.1,4,9.4,4h2.4C11.9,4,12,4.1,12,4.2z"/>
</g>
</svg>
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