Implement GH-982: Add hoc event row

src/views/splash/hoc-event-row/hoc-event-row.jsx

@@ -0,0 +1,54 @@
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+
+var Button = require('../../../components/forms/button.jsx');
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+
+require('./hoc-event-row.scss');
+
+var HocEventRow = React.createClass({
+    type: 'HocEventRow',
+    propTypes: {
+        onDismiss: React.PropTypes.func
+    },
+    render: function () {
+        return (
+            <div className="hoc-event">
+                <Button
+                    className="mod-hoc-event-dismiss"
+                    onClick={this.props.onDismiss}
+                >
+                    <FormattedMessage id="hocevent.dismiss" />
+                    <img
+                        className="hoc-event-dismiss-icon"
+                        src="/svgs/modal/close-x.svg"
+                        alt="close-icon"
+                    />
+                </Button>
+                <FlexRow className="mod-hoc-event">
+                    <div className="hoc-event-studio">
+                        <h1 className="hoc-event-studio-h1">
+                            <FormattedMessage id="hocevent.title" />
+                        </h1>
+                        <a href="/" className="button white mod-hoc-event">
+                            <FormattedMessage id="hocevent.studioLink" />
+                        </a>
+                    </div>
+                    <div className="hoc-event-video">
+                        <iframe
+                            className="hoc-event-video-iframe"
+                            title="Design a Character Studio"
+                            src=""
+                            frameborder="0"
+                            webkitAllowFullScreen
+                            mozallowfullscreen
+                            allowFullScreen
+                        />
+                    </div>
+                </FlexRow>
+            </div>
+        );
+    }
+});
+
+module.exports = HocEventRow;

src/views/splash/hoc-event-row/hoc-event-row.scss

@@ -0,0 +1,125 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.hoc-event {
+    position: relative;
+    opacity: .9;
+    margin: 0 auto 20px;
+    border-radius: 1rem;
+    background-color: $ui-blue;
+    width: $cols12;
+}
+
+.hoc-event:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: .5;
+    z-index: -1;
+    border-radius: 1rem;
+    background: url("/images/splash/hoc-event-bg.jpg");
+    background-size: cover;
+    content: "";
+}
+
+.flex-row.mod-hoc-event {
+    padding: 3rem 5rem;
+}
+
+.button.mod-hoc-event-dismiss {
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+    margin: 0;
+    border: 1px solid $type-white;
+    border-radius: 2rem;
+    box-shadow: none;
+    background-color: transparent;
+    padding: .25rem .75rem;
+    color: $type-white;
+    font-weight: 300;
+}
+
+.hoc-event-dismiss-icon {
+    margin-left: .25rem;
+    width: .8rem;
+    vertical-align: middle;
+}
+
+.hoc-event-studio-h1 {
+    margin-bottom: 1.5rem;
+    line-height: 2.5rem;
+    color: $type-white;
+}
+
+.button.mod-hoc-event {
+    padding: .75rem 1.75rem;
+}
+
+.hoc-event-studio,
+.hoc-event-video-iframe {
+    width: 23.75rem;
+}
+
+.hoc-event-video-iframe {
+    height: 13.75rem;
+}
+
+@media only screen and (max-width: $mobile - 1) {
+    .hoc-event {
+        width: $cols4;
+    }
+
+    .flex-row.mod-hoc-event {
+        padding: 2.5rem;
+    }
+
+    .hoc-event-studio,
+    .hoc-event-video-iframe {
+        width: 13.75rem;
+    }
+
+    .hoc-event-studio {
+        margin-bottom: 1rem;
+    }
+
+    .hoc-event-video-iframe {
+        height: 8.75rem;
+    }
+}
+
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .hoc-event {
+        width: $cols6;
+    }
+
+    .flex-row.mod-hoc-event {
+        padding: 2.5rem 2.5rem 1.5rem;
+    }
+
+    .hoc-event-studio {
+        margin-bottom: 1rem;
+    }
+}
+
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .hoc-event {
+        width: $cols8;
+    }
+
+    .flex-row.mod-hoc-event {
+        padding: 1.875rem;
+    }
+
+    .hoc-event-studio {
+        width: 14.625rem;
+        text-align: left;
+    }
+
+    .hoc-event-video-iframe {
+        width: 18.375rem;
+        height: 10rem;
+    }
+}

src/views/splash/splash.jsx

@@ -15,6 +15,7 @@ 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');
 var News = require('../../components/news/news.jsx');
@@ -208,6 +209,14 @@ var Splash = injectIntl(React.createClass({
             </Box>
         ];
 
+        if (this.props.session.session.user && this.props.session.session.flags.show_hoc_studio) {
+            rows.push(
+                <HocEventRow
+                    onDismiss={this.handleDismiss.bind(this, 'show_hoc_studio')}
+                />
+            );
+        }
+
         if (this.state.featuredGlobal.curator_top_projects &&
             this.state.featuredGlobal.curator_top_projects.length > 4) {