Merge pull request #1301 from LLK/release/10th-anniversary

[Master] Release for 10th anniversary

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 (
+            <TitleBanner className="mod-splash-tenth">
+                <FlexRow className="banner-tenth inner">
+                    <FlexRow className="banner-tenth-content">
+                        <div className="banner-tenth-content-text">
+                            <h2 className="h2 mod-white"><FormattedMessage id='splash.birthdayHeader' /></h2>
+                            <p className="p mod-white"><FormattedMessage id='splash.birthdayMessage' /></p>
+                        </div>
+                        <FlexRow className="banner-tenth-content-buttons">
+                            <a href="/studios/3959153/" className="button white mod-tenth-banner">
+                                <FormattedMessage id='splash.examples' />
+                            </a>
+                            <a href="/projects/editor/?tip_bar=card" className="button white mod-tenth-banner">
+                                <FormattedMessage id='splash.makeCard' />
+                            </a>
+                        </FlexRow>
+                    </FlexRow>
+                    <img
+                        className="banner-image mod-tenth"
+                        src="/images/splash/tenth-party.png"
+                        alt="Balloons"
+                    />
+                </FlexRow>
+            </TitleBanner>
+        );
+    }
+}));
+
+module.exports = AnniversaryBanner;

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;
+    }
+}

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"
 }

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 ? [
                     <TeacherBanner key="teacherbanner" messages={messages} />
                 ] : []}
+                <AnniversaryBanner />
                 <div key="inner" className="inner mod-splash">
                     {this.props.session.status === sessionActions.Status.FETCHED ? (
                         this.props.session.session.user ? [