Skip to content

Commit

Permalink
Merge pull request #1081 from mewtaylor/feature/gh-982
Browse files Browse the repository at this point in the history
Implement GH-982: Add hoc event row
mewtaylor authored Nov 29, 2016

Verified

This commit was signed with the committer’s verified signature.
kenjis kenjis
2 parents 0c28c5c + 7e167cc commit eb21456
Showing 4 changed files with 190 additions and 0 deletions.
54 changes: 54 additions & 0 deletions src/views/splash/hoc-event-row/hoc-event-row.jsx
Original file line number Diff line number Diff line change
@@ -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="/studios/3600717/" 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="https://www.youtube.com/embed/y0Z5_wipT2o"
frameborder="0"
webkitAllowFullScreen
mozallowfullscreen
allowFullScreen
/>
</div>
</FlexRow>
</div>
);
}
});

module.exports = HocEventRow;
127 changes: 127 additions & 0 deletions src/views/splash/hoc-event-row/hoc-event-row.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
@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 {
border: 3px solid $ui-border;
border-radius: 5px;
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;
}
}
9 changes: 9 additions & 0 deletions src/views/splash/splash.jsx
Original file line number Diff line number Diff line change
@@ -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) {

Binary file added static/images/splash/hoc-event-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit eb21456

Please sign in to comment.