From 0b6d87fa91e31d111c497d298347a43bf872e799 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Mon, 7 Nov 2016 12:07:22 -0500 Subject: [PATCH 01/11] Update pattern so rewrite accepts querystring too --- src/routes.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes.json b/src/routes.json index 4fed9d38c..53d5f3b55 100644 --- a/src/routes.json +++ b/src/routes.json @@ -121,7 +121,7 @@ }, { "name": "hoc", - "pattern": "^/hoc/?$", + "pattern": "^/hoc/?(\\?.*)?$", "routeAlias": "/hoc/?\\??", "view": "hoc/hoc", "title": "Hour of Code" From 9ca54e83cef7e1653d81128e2b8a7c1b47c3a725 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Mon, 14 Nov 2016 10:09:00 -0500 Subject: [PATCH 02/11] Merge pull request #1008 from mewtaylor/issue/gh-980 Implement GH-980: add new TTT modal component --- package.json | 2 +- src/components/intro/intro.jsx | 25 +--- src/components/intro/intro.scss | 10 ++ src/components/microworld/microworld.jsx | 17 +-- src/components/microworld/microworld.scss | 13 ++ src/components/modal/base/modal.jsx | 56 ++++++++ src/components/modal/base/modal.scss | 61 +++++++++ src/components/modal/iframe/modal.jsx | 34 +++++ src/components/modal/iframe/modal.scss | 5 + src/components/modal/modal.jsx | 64 --------- src/components/modal/modal.scss | 34 ----- src/components/modal/ttt/modal.jsx | 121 ++++++++++++++++++ src/components/modal/ttt/modal.scss | 97 ++++++++++++++ .../{container => base}/navigation.jsx | 0 .../{container => base}/navigation.scss | 0 .../navigation/conference/navigation.jsx | 2 +- src/components/navigation/www/navigation.jsx | 6 +- src/components/registration/registration.jsx | 30 ++--- src/components/registration/registration.scss | 21 ++- src/views/splash/splash.jsx | 35 ++--- src/views/splash/splash.scss | 29 +++++ static/svgs/modal/close-x.svg | 17 +++ static/svgs/ttt/activity-cards.svg | 18 +++ static/svgs/ttt/educator-guide.svg | 15 +++ static/svgs/ttt/tutorial.svg | 16 +++ 25 files changed, 561 insertions(+), 167 deletions(-) create mode 100644 src/components/modal/base/modal.jsx create mode 100644 src/components/modal/base/modal.scss create mode 100644 src/components/modal/iframe/modal.jsx create mode 100644 src/components/modal/iframe/modal.scss delete mode 100644 src/components/modal/modal.jsx delete mode 100644 src/components/modal/modal.scss create mode 100644 src/components/modal/ttt/modal.jsx create mode 100644 src/components/modal/ttt/modal.scss rename src/components/navigation/{container => base}/navigation.jsx (100%) rename src/components/navigation/{container => base}/navigation.scss (100%) create mode 100644 static/svgs/modal/close-x.svg create mode 100644 static/svgs/ttt/activity-cards.svg create mode 100644 static/svgs/ttt/educator-guide.svg create mode 100644 static/svgs/ttt/tutorial.svg diff --git a/package.json b/package.json index 18d507095..e77cf7d64 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "react": "15.1.0", "react-dom": "15.0.1", "react-intl": "2.1.2", - "react-modal": "1.3.0", + "react-modal": "1.5.2", "react-onclickoutside": "4.1.1", "react-redux": "4.4.5", "react-responsive": "1.1.4", diff --git a/src/components/intro/intro.jsx b/src/components/intro/intro.jsx index acc1de4a7..b9372adbf 100644 --- a/src/components/intro/intro.jsx +++ b/src/components/intro/intro.jsx @@ -1,16 +1,13 @@ var connect = require('react-redux').connect; -var omit = require('lodash.omit'); var React = require('react'); var sessionActions = require('../../redux/session.js'); -var Modal = require('../modal/modal.jsx'); +var IframeModal = require('../modal/iframe/modal.jsx'); var Registration = require('../registration/registration.jsx'); require('./intro.scss'); -Modal.setAppElement(document.getElementById('view')); - var Intro = React.createClass({ type: 'Intro', getDefaultProps: function () { @@ -52,11 +49,6 @@ var Intro = React.createClass({ this.closeRegistration(); }, render: function () { - var frameProps = { - width: 570, - height: 357, - padding: 15 - }; return (
@@ -130,15 +122,12 @@ var Intro = React.createClass({ Intro Video
- - - + src={video.link} + />
); }, diff --git a/src/components/microworld/microworld.scss b/src/components/microworld/microworld.scss index 6b692d6ef..399ee141a 100644 --- a/src/components/microworld/microworld.scss +++ b/src/components/microworld/microworld.scss @@ -8,6 +8,19 @@ $base-bg: $ui-white; 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 { .sectionheader { margin: 0 auto; diff --git a/src/components/modal/base/modal.jsx b/src/components/modal/base/modal.jsx new file mode 100644 index 000000000..0c0647144 --- /dev/null +++ b/src/components/modal/base/modal.jsx @@ -0,0 +1,56 @@ +var classNames = require('classnames'); +var omit = require('lodash.omit'); +var React = require('react'); +var ReactModal = require('react-modal'); + +require('./modal.scss'); + +ReactModal.setAppElement(document.getElementById('view')); + +/** + * Container for pop up windows (See: registration window) + */ +var Modal = React.createClass({ + type: 'Modal', + propTypes: { + className: React.PropTypes.string, + overlayClassName: React.PropTypes.string + }, + requestClose: function () { + return this.modal.portal.requestClose(); + }, + render: function () { + var modalClasses = classNames( + 'modal-content', + this.props.className + ); + var overlayClasses = classNames( + 'modal-overlay', + this.props.overlayClassName + ); + + return ( + +
+ close-icon +
+ {this.props.children} + + ); + } +}); + +module.exports = Modal; diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss new file mode 100644 index 000000000..3d01d683f --- /dev/null +++ b/src/components/modal/base/modal.scss @@ -0,0 +1,61 @@ +@import "../../../colors"; +@import "../../../frameless"; + +.modal-content { + position: relative; + margin: 3.75rem auto; + border-radius: 1rem; + box-shadow: 0 0 0 1px $active-gray; + background-color: $ui-white; + padding: 0; + width: 48.75rem; +} + +.modal-overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 100; + background-color: transparentize($ui-blue, .3); +} + +.ReactModal__Content:focus { + outline: none; +} + +$modal-close-size: 1rem; +.modal-content-close { + position: absolute; + top: $modal-close-size / 2; + right: $modal-close-size / 2; + border-radius: $modal-close-size; + background-color: $active-dark-gray; + cursor: pointer; + width: $modal-close-size * 2; + height: $modal-close-size * 2; + text-align: center; + line-height: $modal-close-size * 2; +} + +.modal-content-close-img { + padding-top: $modal-close-size / 2; +} + +@media only screen and (max-width: $desktop - 1) { + .modal-content { + top: 0; + left: 0; + margin-top: 0; + border-radius: 0; + box-shadow: none; + width: 100%; + height: 100%; + overflow: scroll; + } + + .modal-content-close { + position: fixed; + } +} diff --git a/src/components/modal/iframe/modal.jsx b/src/components/modal/iframe/modal.jsx new file mode 100644 index 000000000..6bff74ee5 --- /dev/null +++ b/src/components/modal/iframe/modal.jsx @@ -0,0 +1,34 @@ +var classNames = require('classnames'); +var omit = require('lodash.omit'); +var React = require('react'); + +var Modal = require('../base/modal.jsx'); + +require('./modal.scss'); + +var IframeModal = React.createClass({ + propTypes: { + isOpen: React.PropTypes.bool, + onRequestClose: React.PropTypes.func, + className: React.PropTypes.string, + componentRef: React.PropTypes.func, + src: React.PropTypes.string + }, + render: function () { + var iframeClasses = classNames( + 'modal-content-iframe', + this.props.className + ); + return ( + +