scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-22 19:05:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions2

Merge pull request from rschamp/bugfix/fix-joining

Browse source 
Fix registration, fix upgraded react-modal
This commit is contained in:
Ray Schamp 2015-10-20 19:45:29 -04:00
commit 737a53294d
9 changed files with 71 additions and 61 deletions

1
package.json
View file

@ -44,6 +44,7 @@
"json-loader": "0.5.2",
"json2po-stream": "1.0.3",
"jsx-loader": "0.13.2",
"lodash.omit": "3.1.0",
"minilog": "2.0.8",
"node-sass": "3.3.3",
"po2icu": "git://github.com/LLK/po2icu.git#develop",

19
src/_mixins.scss
View file

@ -1,19 +0,0 @@
@mixin modal-iframe($iframe-width, $iframe-height, $padding: 0) {
&.ReactModal__Content {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
margin-top: -($iframe-height + $padding * 2)/2;
margin-left: -($iframe-width + $padding * 2)/2;
padding: $padding;
width: $iframe-width;
height: $iframe-height;
iframe {
border: 0;
width: $iframe-width;
height: $iframe-height;
}
}
}

17
src/components/intro/intro.jsx
View file

@ -1,3 +1,4 @@
var omit = require('lodash.omit');
var React = require('react');
var ReactIntl = require('react-intl');
var FormattedMessage = ReactIntl.FormattedMessage;
@ -30,6 +31,11 @@ var Intro = React.createClass({
this.setState({videoOpen: false});
},
render: function () {
var frameSettings = {
width: 570,
height: 357,
padding: 15
};
return (
<div className="intro">
<div className="content">
@ -114,10 +120,13 @@ var Intro = React.createClass({
<img src="//cdn.scratch.mit.edu/scratchr2/static/images/hp-video-screenshot.png" />
</div>
<Modal
className="video-modal"
isOpen={this.state.videoOpen}
onRequestClose={this.closeVideo}>
<iframe src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0" />
className="video-modal"
isOpen={this.state.videoOpen}
onRequestClose={this.closeVideo}
frameSettings={frameSettings}>
<iframe
src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0"
{...omit(frameSettings, 'padding')} />
</Modal>
</div>
);

5
src/components/intro/intro.scss
View file

@ -1,5 +1,4 @@
@import "../../colors";
@import "../../mixins";
.intro {
display: flex;
@ -223,7 +222,3 @@
}
}
}
.video-modal {
@include modal-iframe(570px, 357px, 15px);
}

41
src/components/modal/modal.jsx
View file

@ -1,20 +1,57 @@
var defaults = require('lodash.defaults');
var omit = require('lodash.omit');
var React = require('react');
var ReactModal = require('react-modal');
require('./modal.scss');
var Modal = React.createClass({
type: 'Modal',
statics: {
setAppElement: ReactModal.setAppElement
},
getDefaultProps: function () {
return {
frameSettings: null,
style: {
overlay: {
zIndex: 100,
backgroundColor: 'rgba(0, 0, 0, .75)'
},
content: {
overflow: 'visible',
borderRadius: '6px'
}
}
};
},
requestClose: function () {
return this.refs.modal.portal.requestClose();
},
render: function () {
var frameSettings = this.props.frameSettings;
var style = this.props.style;
var modalProps = omit(this.props, ['frameSettings', 'style']);
if (frameSettings) {
defaults(frameSettings, {
width: 500,
height: 250,
padding: 0
});
defaults(style.content, {
top: '50%',
right: 'auto',
bottom: 'auto',
left: '50%',
marginTop: (frameSettings.height + 2*frameSettings.padding) / -2,
marginLeft: (frameSettings.width + 2*frameSettings.padding) / -2,
height: frameSettings.height,
width: frameSettings.width,
padding: frameSettings.padding
});
}
return (
<ReactModal ref="modal" {... this.props}>
<ReactModal ref="modal" style={style} {...modalProps}>
<div className="modal-close" onClick={this.requestClose}></div>
{this.props.children}
</ReactModal>

25
src/components/modal/modal.scss
View file

@ -1,26 +1,9 @@
@import "../../colors";
$base-bg: $ui-white;
/* Copied from the un-styleable react-modal */
.ReactModal__Overlay {
z-index: 100;
background-color: $overlay-gray;
}
.ReactModal__Content {
position: absolute;
top: 40px;
right: 40px;
bottom: 40px;
left: 40px;
outline: none;
border-radius: 6px;
background: $base-bg;
padding: 20px;
overflow: visible;
-webkit-overflow-scrolling: touch;
&.ReactModal__Content {
iframe {
border: 0;
}
}
.modal-close {

12
src/components/navigation/navigation.jsx
View file

@ -268,11 +268,13 @@ var Navigation = React.createClass({
</Dropdown>
</li>
] : [
<li className="link right join" key="join"><a href="/join">
<FormattedMessage
id='general.joinScratch'
defaultMessage={'Join Scratch'} />
</a></li>,
<li className="link right join" key="join">
<a href="#" onClick={this.handleJoinClick}>
<FormattedMessage
id='general.joinScratch'
defaultMessage={'Join Scratch'} />
</a>
</li>,
<Registration
key="registration"
isOpen={this.state.registrationOpen}

9
src/components/registration/registration.jsx
View file

@ -22,12 +22,17 @@ var Registration = React.createClass({
window.removeEventListener('message', this.onMessage);
},
render: function () {
var frameSettings = {
width: 610,
height: 438
};
return (
<Modal
isOpen={this.props.isOpen}
onRequestClose={this.props.onRequestClose}
className="registration">
<iframe src="/accounts/standalone-registration/" />
className="registration"
frameSettings={frameSettings}>
<iframe src="/accounts/standalone-registration/" {...frameSettings} />
</Modal>
);
}

3
src/components/registration/registration.scss
View file

@ -1,6 +1,3 @@
@import "../../mixins";
.registration {
@include modal-iframe(610px, 438px);
overflow: hidden;
}