diff --git a/src/views/splash/birthday-banner/birthday-banner.jsx b/src/views/splash/birthday-banner/birthday-banner.jsx new file mode 100644 index 000000000..8eef1b372 --- /dev/null +++ b/src/views/splash/birthday-banner/birthday-banner.jsx @@ -0,0 +1,41 @@ +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'); + +require('../../../components/forms/button.scss'); +require('./birthday-banner.scss'); + +var AnniversaryBanner = injectIntl(React.createClass({ + render: function () { + return ( + + + +
+

+

+
+ + + + + + + + +
+ Balloons +
+
+ ); + } +})); + +module.exports = AnniversaryBanner; diff --git a/src/views/splash/birthday-banner/birthday-banner.scss b/src/views/splash/birthday-banner/birthday-banner.scss new file mode 100644 index 000000000..508e92c59 --- /dev/null +++ b/src/views/splash/birthday-banner/birthday-banner.scss @@ -0,0 +1,101 @@ +@import "../../../colors"; +@import "../../../frameless"; + +.flex-row.banner-tenth { + justify-content: space-between; +} + +.h2.mod-white, +.p.mod-white { + color: $type-white; +} + +.banner-tenth-content, +.banner-image.mod-tenth { + width: 28.75rem; // 6-col +} + +.banner-tenth-content { + text-align: left; + justify-content: space-between; +} + +.banner-tenth-content-buttons, +.banner-tenth-content-text { + width: 100%; +} + +.banner-tenth-content-buttons { + justify-content: flex-start; +} + +.button.mod-tenth-banner { + margin: 0 1.25rem 0 0; // 1-gutter + padding: .75rem 1rem; + width: 6.75rem; // 2-col (minus padding) + text-align: center; +} + +@media only screen and (max-width: $mobile - 1) { + .banner-tenth-content, + .banner-image.mod-tenth { + width: 18.75rem; // 6-col + } + + .flex-row.banner-tenth { + flex-direction: column; + justify-content: center; + } + + .banner-tenth-content { + text-align: center; + justify-content: center; + } + + .banner-tenth-content-buttons { + flex-direction: row; + justify-content: space-between; + } + + .button.mod-tenth-banner { + margin: 0; + } +} + +@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { + .flex-row.banner-tenth { + flex-direction: column; + justify-content: center; + } + + .banner-tenth-content { + text-align: center; + justify-content: center; + } + + .p.mod-white { + margin: 1rem auto; + width: 18.75rem; // 4-col + } + + .banner-tenth-content-buttons { + flex-direction: row; + justify-content: center; + } +} + +@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { + .flex-row.banner-tenth { + flex-direction: column; + justify-content: center; + } + + .banner-tenth-content { + text-align: center; + justify-content: center; + } + + .banner-tenth-content-buttons { + justify-content: center; + } +} diff --git a/src/views/splash/l10n.json b/src/views/splash/l10n.json index f63a65bb8..2da1492b9 100644 --- a/src/views/splash/l10n.json +++ b/src/views/splash/l10n.json @@ -31,5 +31,10 @@ "welcome.welcomeToScratch": "Welcome to Scratch!", "welcome.learn": "Learn how to make a project in Scratch", "welcome.tryOut": "Try out starter projects", - "welcome.connect": "Connect with other Scratchers" + "welcome.connect": "Connect with other Scratchers", + + "splash.birthdayHeader": "Happy Birthday, Scratch!", + "splash.birthdayMessage": "Scratch is ten years old! Join the celebration by making a birthday card.", + "splash.examples": "See Examples", + "splash.makeCard": "Make a Card" } diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 5578e7199..4cbab2883 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -10,6 +10,7 @@ var shuffle = require('../../lib/shuffle.js').shuffle; var Activity = require('../../components/activity/activity.jsx'); var AdminPanel = require('../../components/adminpanel/adminpanel.jsx'); +var AnniversaryBanner = require('./birthday-banner/birthday-banner.jsx'); var DropdownBanner = require('../../components/dropdown-banner/banner.jsx'); var Box = require('../../components/box/box.jsx'); var Button = require('../../components/forms/button.jsx'); @@ -366,6 +367,7 @@ var Splash = injectIntl(React.createClass({ {this.props.permissions.educator ? [ ] : []} +
{this.props.session.status === sessionActions.Status.FETCHED ? ( this.props.session.session.user ? [ diff --git a/static/images/splash/tenth-party.png b/static/images/splash/tenth-party.png new file mode 100644 index 000000000..662482997 Binary files /dev/null and b/static/images/splash/tenth-party.png differ