mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #1116 from mewtaylor/issue/remove-hoc-banner
Remove HOC Banner
This commit is contained in:
Matthew Taylor
GitHub
commit
34ff8fc50f
5 changed files with 0 additions and 190 deletions
|
|
@ -1,115 +0,0 @@
|
|||
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('../../thingstotry/ttt');
|
||||
|
||||
require('../../../components/forms/button.scss');
|
||||
require('./hoc-banner.scss');
|
||||
|
||||
var HocBanner = 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 = {
|
||||
nameTile: {
|
||||
title: formatMessage({id: tiles[0].title}),
|
||||
description: formatMessage({id: tiles[0].description}),
|
||||
tutorialLoc: tiles[0].tutorialLoc,
|
||||
activityLoc: formatMessage({id: tiles[0].activityLoc}),
|
||||
guideLoc: formatMessage({id: tiles[0].guideLoc}),
|
||||
thumbUrl: tiles[0].thumbUrl,
|
||||
bannerUrl: tiles[0].bannerUrl
|
||||
},
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
return [
|
||||
<TTTTile
|
||||
key={0}
|
||||
className="mod-banner"
|
||||
onGuideClick={this.showTTTModal.bind(this, tileObjects.nameTile)}
|
||||
{...tileObjects.nameTile}
|
||||
/>,
|
||||
<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}
|
||||
/>
|
||||
];
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<TitleBanner className="mod-splash-hoc">
|
||||
<div className="hoc-banner inner">
|
||||
<FlexRow className="mod-hoc-banner-header">
|
||||
<h1 className="hoc-banner-header-h1">
|
||||
<FormattedMessage id="hoc-banner.header" />
|
||||
</h1>
|
||||
<a href="/go" className="button mod-ttt-try-button">
|
||||
<FormattedMessage id="hoc-banner.ttt" />
|
||||
</a>
|
||||
</FlexRow>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<FlexRow className="mod-hoc-banner-tiles">
|
||||
{this.renderTTTTiles()}
|
||||
</FlexRow>
|
||||
<TTTModal
|
||||
isOpen={this.state.TTTModalOpen}
|
||||
onRequestClose={this.hideTTTModal}
|
||||
{...this.state.currentTile}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
);
|
||||
}
|
||||
}));
|
||||
|
||||
module.exports = HocBanner;
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
|
||||
.title-banner.mod-splash-hoc {
|
||||
background: url("/images/blocks-pattern.png");
|
||||
background-color: $ui-blue;
|
||||
background-repeat: repeat;
|
||||
background-size: 180px 180px;
|
||||
}
|
||||
|
||||
.flex-row.mod-hoc-banner-header,
|
||||
.flex-row.mod-hoc-banner-tiles {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-row.mod-hoc-banner-header {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.hoc-banner-header-h1 {
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
.button.mod-ttt-try-button {
|
||||
padding: .75rem 2rem;
|
||||
}
|
||||
|
||||
.button.mod-ttt-try-button,
|
||||
.button.mod-ttt-try-button:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button.mod-ttt-try-button:link,
|
||||
.button.mod-ttt-try-button:visited,
|
||||
.button.mod-ttt-try-button:active
|
||||
.button.mod-ttt-try-button:hover {
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
.ttt-tile.mod-banner {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
.flex-row.mod-hoc-banner-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"ttt.MakeItFlyActivityLoc": "/pdfs/cards/FlyCards.pdf",
|
||||
"ttt.MakeItFlyGuideLoc": "/pdfs/guides/FlyGuide.pdf",
|
||||
"ttt.AnimateYourNameActivityLoc": "/pdfs/cards/AnimateYourNameCards.pdf",
|
||||
"ttt.AnimateYourNameGuideLoc": "/pdfs/guides/NameGuide.pdf",
|
||||
"ttt.MakeMusicActivityLoc": "/pdfs/cards/MusicCards.pdf",
|
||||
"ttt.MakeMusicGuideLoc": "/pdfs/guides/MusicGuide.pdf"
|
||||
}
|
||||
|
|
@ -28,23 +28,6 @@
|
|||
"teacherbanner.classesButton": "My Classes",
|
||||
"teacherbanner.faqButton": "Teacher Account FAQ",
|
||||
|
||||
"hoc-banner.header": "Get Creative with Coding",
|
||||
"hoc-banner.ttt": "See things to try",
|
||||
"ttt.tutorialTitle": "Tutorial",
|
||||
"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.",
|
||||
"ttt.tryIt": "Try It",
|
||||
"ttt.open": "Open",
|
||||
"ttt.download": "Download",
|
||||
"ttt.MakeItFlyTitle": "Make It Fly",
|
||||
"ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
|
||||
"ttt.AnimateYourNameTitle": "Animate Your Name",
|
||||
"ttt.AnimateYourNameDescription": "Animate the letters of your name, initials, or favorite word.",
|
||||
"ttt.MakeMusicTitle": "Make Music",
|
||||
"ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
|
||||
"hocevent.dismiss": "Dismiss",
|
||||
"hocevent.title": "Design and share your own character",
|
||||
"hocevent.studioLink": "See the studio",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ var DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
|
|||
var Box = require('../../components/box/box.jsx');
|
||||
var Button = require('../../components/forms/button.jsx');
|
||||
var Carousel = require('../../components/carousel/carousel.jsx');
|
||||
var HocBanner = require('./hoc-banner/hoc-banner.jsx');
|
||||
var HocEventRow = require('./hoc-event-row/hoc-event-row.jsx');
|
||||
var Intro = require('../../components/intro/intro.jsx');
|
||||
var IframeModal = require('../../components/modal/iframe/modal.jsx');
|
||||
|
|
@ -376,7 +375,6 @@ var Splash = injectIntl(React.createClass({
|
|||
{this.props.permissions.educator ? [
|
||||
<TeacherBanner key="teacherbanner" messages={messages} />
|
||||
] : []}
|
||||
<HocBanner />
|
||||
<div key="inner" className="inner mod-splash">
|
||||
{this.props.session.status === sessionActions.Status.FETCHED ? (
|
||||
this.props.session.session.user ? [
|
||||
|
|
|
|||
Loading…
Reference in a new issue