Skip to content

GitLab

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

Merge pull request #1738 from LLK/hotfix/revert-HOC-banners 

[DEVELOP] Hotfix/revert hoc banners
parents a2072288 240606b3
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 549 deletions
src/views/splash/hoc/middle-banner.jsx deleted 100644 → 0
View file @ a2072288
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 deleted 100644 → 0
View file @ a2072288
@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 deleted 100644 → 0
View file @ a2072288
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 deleted 100644 → 0
View file @ a2072288
@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 deleted 100644 → 0
View file @ a2072288
{
"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 @ e0461ca7
...@@ -29,28 +29,6 @@ ...@@ -29,28 +29,6 @@
"teacherbanner.classesButton": "My Classes", "teacherbanner.classesButton": "My Classes",
"teacherbanner.faqButton": "Teacher Account FAQ", "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.welcomeToScratch": "Welcome to Scratch!",
"welcome.learn": "Learn how to make a project in Scratch", "welcome.learn": "Learn how to make a project in Scratch",
"welcome.tryOut": "Try out starter projects", "welcome.tryOut": "Try out starter projects",
......
src/views/splash/presentation.jsx
View file @ e0461ca7
...@@ -11,8 +11,6 @@ var Box = require('../../components/box/box.jsx'); ...@@ -11,8 +11,6 @@ var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx'); var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx'); var Carousel = require('../../components/carousel/carousel.jsx');
var LegacyCarousel = require('../../components/carousel/legacy-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 Intro = require('../../components/intro/intro.jsx');
var IframeModal = require('../../components/modal/iframe/modal.jsx'); var IframeModal = require('../../components/modal/iframe/modal.jsx');
var News = require('../../components/news/news.jsx'); var News = require('../../components/news/news.jsx');
...@@ -224,8 +222,6 @@ var SplashPresentation = injectIntl(React.createClass({ ...@@ -224,8 +222,6 @@ var SplashPresentation = injectIntl(React.createClass({
{this.props.isEducator ? [ {this.props.isEducator ? [
<TeacherBanner key="teacherbanner" messages={messages} /> <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"> <div key="inner" className="inner mod-splash">
{this.props.sessionStatus === sessionActions.Status.FETCHED ? ( {this.props.sessionStatus === sessionActions.Status.FETCHED ? (
Object.keys(this.props.user).length !== 0 ? [ Object.keys(this.props.user).length !== 0 ? [
...@@ -246,12 +242,6 @@ var SplashPresentation = injectIntl(React.createClass({ ...@@ -246,12 +242,6 @@ var SplashPresentation = injectIntl(React.createClass({
]) : [] ]) : []
} }
{featured.shift()}
{featured.shift()}
</div>
<MiddleBanner />
<div key="inner2" className="inner mod-splash">
{featured} {featured}
{this.props.isAdmin ? [ {this.props.isAdmin ? [
......
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