Merge pull request #1423 from mewtaylor/hotfix/camp-page

Hotfix Scratch Camp 2017 Page

src/_colors.scss

@@ -34,3 +34,6 @@ $link-blue: $ui-blue;
 $splash-green: #9c0;
 $splash-pink: #c2479d;
 $splash-blue: #199ed7;
+
+/* Down Deep */
+$dd-darkblue: hsla(195, 72.4, 17.1, 1);

src/routes.json

@@ -97,6 +97,13 @@
         "view": "dmca/dmca",
         "title": "DMCA"
     },
+    {
+        "name": "camp",
+        "pattern": "^/camp/?$",
+        "routeAlias": "/camp/?$",
+        "view": "camp/camp",
+        "title": "Down Deep"
+    },
     {
         "name": "educator-landing",
         "pattern": "^/educators/?$",

src/views/camp/camp.jsx

+var React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var render = require('../../lib/render.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
+
+var Page = require('../../components/page/www/page.jsx');
+
+require('./camp.scss');
+
+var Camp = injectIntl(React.createClass({
+    type: 'Camp',
+    render: function () {
+        return (
+            <div>
+                <TitleBanner className="masthead mod-blue-bg">
+                    <img src="/images/camp/ocean-top.svg" alt="Top" className="topImg"/>
+                    <div className="inner">
+                        <div className="title-content">
+                            <h1 className="title-banner-h1">
+                                <FormattedMessage id='camp.title' />
+                            </h1>
+                            <h4 className="intro title-banner-p">
+                                <FormattedMessage id='camp.dates' />
+                            </h4>
+                            <img src="/images/camp/bubbles.svg" alt="Bubbles" className="bubbles"/>
+                        </div>
+                    </div>
+                </TitleBanner>
+                <div className="gradient1">
+                    <section id="particpate">
+                        <div className="inner">
+                            <center>
+                                <h2><FormattedMessage id='camp.welcome' /></h2>
+                                <p id="intro">
+                                    <FormattedHTMLMessage id='camp.welcomeIntro' />
+                                </p>
+                            </center>
+                            <center>
+                                <img src="/images/camp/fish-divider.svg" className="fishDivider" />
+                            </center>
+                            <h2>
+                                <center><FormattedMessage id='camp.part1Dates' /></center>
+                            </h2>
+                            <center>
+                            <FlexRow className="sidebar-row">
+                                <div className="body-copy column">
+                                    <h3><FormattedMessage id='camp.detailsTitle' /></h3>
+                                    <p>
+                                        <FormattedMessage id='camp.part1Details' />
+                                    </p>
+                                </div>
+                                <div className="sidebar column">
+                                    <h3><FormattedMessage id='camp.particpateTitle' /></h3>
+                                    <p>
+                                        <FormattedHTMLMessage id='camp.part1Particpate' />
+                                    </p>
+                                </div>
+                            </FlexRow>
+                            <center>
+                                <img src="/images/camp/fish-divider2.svg" className="fishDivider" />
+                            </center>
+                            <h2>
+                                <center><FormattedMessage id='camp.part2Dates' /></center>
+                            </h2>
+                            <FlexRow className="sidebar-row">
+                                <div className="body-copy column">
+                                    <h3><FormattedMessage id='camp.detailsTitle' /></h3>
+                                    <p>
+                                        <FormattedMessage id='camp.part2Details' />
+                                    </p>
+                                </div>
+                                <div className="sidebar column">
+                                    <h3><FormattedMessage id='camp.particpateTitle' /></h3>
+                                    <p>
+                                        <FormattedHTMLMessage id='camp.part2Particpate' />
+                                    </p>
+                                </div>
+                            </FlexRow>
+                            <center>
+                                <img src="/images/camp/fish-divider.svg" className="fishDivider" />
+                            </center>
+                            <h2>
+                                <center><FormattedMessage id='camp.part3Dates' /></center>
+                            </h2>
+                            <FlexRow className="sidebar-row">
+                                <div className="body-copy column">
+                                    <h3><FormattedMessage id='camp.detailsTitle' /></h3>
+                                    <p>
+                                        <FormattedMessage id='camp.part3Details' />
+                                    </p>
+                                </div>
+                                <div className="sidebar column">
+                                    <h3><FormattedMessage id='camp.particpateTitle' /></h3>
+                                    <p>
+                                        <FormattedHTMLMessage id='camp.part3Particpate' />
+                                    </p>
+                                </div>
+                            </FlexRow>
+                            </center>
+                        </div>
+                    </section>
+                    <img src="/images/camp/bubbles.svg" alt="Bubbles" className="bubbles"/>
+                    <section id="info">
+                        <div className="inner">
+                        <center><h2><FormattedMessage id='camp.helpfulInfo' /></h2></center>
+                            <FlexRow className="info-content">
+                                <div>
+                                    <img src="/images/camp/dolphin.svg" alt="Dolphin" className="infoImg" />
+                                    <p>
+                                        <FormattedHTMLMessage id='camp.infoCounselors' />
+                                    </p>
+                                </div>
+                                <div>
+                                    <img src="/images/camp/treasure.svg" className="infoImg" />
+                                    <p>
+                                        <FormattedMessage id='camp.infoPart3' />
+                                    </p>
+                                </div>
+                                <div>
+                                    <img src="/images/camp/map.svg" className="infoImg" />
+                                    <p>
+                                        <FormattedMessage id='camp.infoTime' />
+                                    </p>
+                                </div>
+                            </FlexRow>
+                        </div>
+                    </section>
+                    <img src="/images/camp/ocean-bottom.svg" alt="Top" className="bottomImg"/>
+                </div>
+            </div>
+        );
+    }
+}));
+
+render(<Page><Camp /></Page>, document.getElementById('app'));

src/views/camp/camp.scss

+@import "../../colors";
+@import "../../frameless";
+
+#view {
+    padding: 0;
+}
+.topImg {
+    margin-top: -10px;
+    padding: 0;
+    width: 100%;
+}
+.bubbles {
+    display: block;
+    margin: 0 auto;
+    margin-top: .938em;
+    width: 45%;
+}
+.inner a {
+    text-decoration: underline;
+}
+.inner a:hover {
+    text-decoration: underline;
+    color: $ui-light-gray;
+}
+h3 {
+    border-bottom: 1px solid $ui-border;
+}
+.flex-row {
+    &.sidebar-row {
+        align-items: flex-start;
+
+        .body-copy {
+            width: $cols5;
+        }
+
+        .sidebar {
+            width: $cols5;
+        }
+    }
+}
+#particpate {
+    position: relative;
+    
+    h2, h3, p {
+        color: $ui-white;
+    }
+}
+#info {
+    h2, p {
+        color: $ui-white;
+    }
+}
+.info-content {
+    div {
+        max-width: $cols4;
+        text-align: center;
+    }
+}
+.infoImg {
+    transform: scale(.8);
+    height: 120px;
+    -webkit-transform: scale(.8); /* Saf3.1+, Chrome */
+    -moz-transform: scale(.8); /* FF3.5+ */
+    -ms-transform: scale(.8); /* IE9 */
+    -o-transform: scale(.8); /* Opera 10.5+ */
+}
+.bottomImg {
+    margin-bottom: -5px;
+    margin-left: -4px;
+    padding: 0;
+    width: 102%;
+}
+.title-banner {
+    margin: 0;
+    padding: 0;
+}
+.fishDivider {
+    margin: .875em 0;
+}
+.gradient1 {
+    position: relative;
+    background: $ui-blue; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient($ui-blue, $dd-darkblue); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient($ui-blue, $dd-darkblue); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient($ui-blue, $dd-darkblue); /* For Firefox 3.6 to 15 */
+    background: linear-gradient($ui-blue, $dd-darkblue);
+    .intro {
+        max-width: $cols9;
+    }
+}

src/views/camp/l10n.json

+{
+    "camp.title": "Scratch Camp: Down Deep",
+    "camp.dates": "July 24th - August 13th",
+    "camp.welcome": "Welcome to Scratch Camp 2017!",
+    "camp.welcomeIntro": "Come take a dive into the ocean with us and design your very own creation. Your creation can be anything you might find in the ocean - real or made up! <br /> In this year’s camp, dive down deep with us in these three parts:",
+    "camp.part1Dates":"Part 1 (July 24th - July 30th)",
+    "camp.detailsTitle": "Details:",
+    "camp.part1Details": "Create a project introducing us to a character, real or imagined, that lives in the ocean. You could create a monster from the depths, a cute little starfish, a taco eating shark, or anything else you can imagine.",
+    "camp.particpateTitle": "How to Particpate:",
+    "camp.part1Particpate": "Part 1 of camp will take place in the <a href=\"https://scratch.mit.edu/studios/4160302/\">Main Camp Cabin studio</a>. Here you can ask questions, view other Scratchers' creations, and submit your own. Go to the studio to learn more!",
+    "camp.part2Dates": "Part 2 (July 31st - August 6th)",
+    "camp.part2Details": "Now make your character interactive! Does your character have questions to ask us?  What happens when you click on it? Does it have any special powers? And more!",
+    "camp.part2Particpate":"Part 2 of camp will also take place in the <a href=\"https://scratch.mit.edu/studios/4160302/\">Main Camp Cabin studio</a>. Here you can ask questions, view other Scratchers' creations, and submit your own. Go to the studio to learn more!",
+    "camp.part3Dates": "Part 3 (August 7th - August 13th)",
+    "camp.part3Details": "Create a project using your own creation along with other Scratchers’ creations. It could be a game, story, animation, or anything you come up with!",
+    "camp.part3Particpate":"The <a href=\"https://scratch.mit.edu/studios/4160301/\">Final Projects Camp Cabin studio</a> will hold part 3 of this year's Scratch Camp. Here you can submit your final project, give feedback to others, and celebrate Scratch Camp! Swim on over to the studio when part 3 comes out!",
+    "camp.helpfulInfo": "Helpful Information",
+    "camp.infoCounselors": "The <a href=\"https://scratch.mit.edu/studios/4160300/\">Camp Counselors studio</a> offers a variety of examples for your ocean creation. You can also directly communicate with the Counselors there.",
+    "camp.infoPart3":"Remember, in part 3, you must use some other creations made for this Scratch Camp. Use their part 2 project to learn about the character's personality!",
+    "camp.infoTime":"Don't worry if you aren't around the whole time, you can always participate in whatever part you are available for! Just have fun and dive deep!"
+}