mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-30 02:56:20 -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.classesButton": "My Classes",
|
||||||
"teacherbanner.faqButton": "Teacher Account FAQ",
|
"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.dismiss": "Dismiss",
|
||||||
"hocevent.title": "Design and share your own character",
|
"hocevent.title": "Design and share your own character",
|
||||||
"hocevent.studioLink": "See the studio",
|
"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 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 HocBanner = require('./hoc-banner/hoc-banner.jsx');
|
|
||||||
var HocEventRow = require('./hoc-event-row/hoc-event-row.jsx');
|
var HocEventRow = require('./hoc-event-row/hoc-event-row.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');
|
||||||
|
|
@ -376,7 +375,6 @@ var Splash = injectIntl(React.createClass({
|
||||||
{this.props.permissions.educator ? [
|
{this.props.permissions.educator ? [
|
||||||
<TeacherBanner key="teacherbanner" messages={messages} />
|
<TeacherBanner key="teacherbanner" messages={messages} />
|
||||||
] : []}
|
] : []}
|
||||||
<HocBanner />
|
|
||||||
<div key="inner" className="inner mod-splash">
|
<div key="inner" className="inner mod-splash">
|
||||||
{this.props.session.status === sessionActions.Status.FETCHED ? (
|
{this.props.session.status === sessionActions.Status.FETCHED ? (
|
||||||
this.props.session.session.user ? [
|
this.props.session.session.user ? [
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue