scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Update microworld iframe modal

Browse source
This commit is contained in:
Matthew Taylor 2016-11-10 09:39:23 -05:00
parent 5af05466f6
commit cbaab105f1
2 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ require('./microworld.scss');
var Box = require('../box/box.jsx'); var Box = require('../box/box.jsx');
var Carousel = require('../carousel/carousel.jsx'); var Carousel = require('../carousel/carousel.jsx');
var Modal = require('../modal/modal.jsx'); var IframeModal = require('../modal/iframe/modal.jsx');
var NestedCarousel = require('../nestedcarousel/nestedcarousel.jsx'); var NestedCarousel = require('../nestedcarousel/nestedcarousel.jsx');
var Microworld = React.createClass({ var Microworld = React.createClass({
@ -50,11 +50,6 @@ var Microworld = React.createClass({
); );
}, },
renderVideo: function (video, key) { renderVideo: function (video, key) {
var frameProps = {
width: 570,
height: 357,
padding: 15
};
return ( return (
<div> <div>
<div className="video"> <div className="video">
@ -62,14 +57,12 @@ var Microworld = React.createClass({
</div> </div>
<img src={video.image} /> <img src={video.image} />
</div> </div>
<Modal <IframeModal
className="video-modal" className="mod-microworld-video"
isOpen={this.state.videoOpen[key]} isOpen={this.state.videoOpen[key]}
onRequestClose={this.markVideoClosed.bind(this, key)} onRequestClose={this.markVideoClosed.bind(this, key)}
style={{content:frameProps}}> src={video.link}
<iframe src={video.link} width="560" height="315" frameBorder="0" />
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</Modal>
</div> </div>
); );
}, },

13
src/components/microworld/microworld.scss
View file

@ -8,6 +8,19 @@ $base-bg: $ui-white;
padding: 0; padding: 0;
} }
.modal-content.mod-microworld-video,
.modal-content-iframe.mod-microworld-video {
width: 35.625rem;
}
.modal-content.mod-microworld-video {
padding: 2.5rem;
}
.modal-content-iframe.mod-microworld-video {
height: 22.3125rem;
}
.microworld { .microworld {
.sectionheader { .sectionheader {
margin: 0 auto; margin: 0 auto;