From daf803d4a33bfdd82df063dbc2bc56bf142eadfa Mon Sep 17 00:00:00 2001 From: Technoboy10 Date: Mon, 25 Jul 2016 10:53:57 -0400 Subject: [PATCH] experiment with the react-responsive library --- package.json | 2 ++ src/components/footer/www/footer.jsx | 8 +++++--- src/components/navigation/www/navigation.jsx | 6 ++++-- src/components/page/www/page.jsx | 14 +++----------- src/redux/reducer.js | 3 +-- src/views/splash/splash.jsx | 13 +------------ src/views/splash/splash.scss | 11 ++++++++++- 7 files changed, 26 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 433dc50f1..a583a712d 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "lodash.defaultsdeep": "3.10.0", "lodash.merge": "3.3.2", "lodash.omit": "3.1.0", + "lodash.pickby": "^4.4.0", "lodash.range": "3.0.1", "minilog": "2.0.8", "node-sass": "3.3.3", @@ -73,6 +74,7 @@ "react-modal": "1.3.0", "react-onclickoutside": "4.1.1", "react-redux": "4.4.5", + "react-responsive": "^1.1.4", "react-slick": "0.12.2", "react-telephone-input": "3.4.5", "redux": "3.5.2", diff --git a/src/components/footer/www/footer.jsx b/src/components/footer/www/footer.jsx index 600e2dbd9..cd2689207 100644 --- a/src/components/footer/www/footer.jsx +++ b/src/components/footer/www/footer.jsx @@ -3,6 +3,7 @@ var FormattedMessage = require('react-intl').FormattedMessage; var FooterBox = require('../container/footer.jsx'); var LanguageChooser = require('../../languagechooser/languagechooser.jsx'); +var MediaQuery = require('react-responsive'); require('./footer.scss'); @@ -11,7 +12,7 @@ var Footer = React.createClass({ render: function () { return ( - {this.props.layout == 'COLS4' || this.props.layout == 'COLS6' ? [ +
@@ -48,7 +49,8 @@ var Footer = React.createClass({
- ] : [ + +
@@ -199,7 +201,7 @@ var Footer = React.createClass({
- ]} +
diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx index ce2888ab1..32fbe3587 100644 --- a/src/components/navigation/www/navigation.jsx +++ b/src/components/navigation/www/navigation.jsx @@ -17,6 +17,7 @@ var Login = require('../../login/login.jsx'); var Modal = require('../../modal/modal.jsx'); var NavigationBox = require('../container/navigation.jsx'); var Registration = require('../../registration/registration.jsx'); +var MediaQuery = require('react-responsive'); require('./navigation.scss'); @@ -248,8 +249,9 @@ var Navigation = React.createClass({ - {this.props.layout == 'COLS8' || this.props.layout == 'COLS12' ? - this.props.session.session.user.username : ''} + + {this.props.session.session.user.username} +
{this.props.children}
); } }); -var mapStateToProps = function (state) { - return { - layout: state.layout - }; -}; - -var ConnectedPage = connect(mapStateToProps)(Page); -module.exports = ConnectedPage; +module.exports = Page; diff --git a/src/redux/reducer.js b/src/redux/reducer.js index e54baf0dc..7824793b0 100644 --- a/src/redux/reducer.js +++ b/src/redux/reducer.js @@ -5,12 +5,11 @@ var detailsReducer = require('./conference-details.js').detailsReducer; var permissionsReducer = require('./permissions.js').permissionsReducer; var sessionReducer = require('./session.js').sessionReducer; var tokenReducer = require('./token.js').tokenReducer; -var layout = require('./layout.js'); +// var layout = require('./layout.js'); var appReducer = combineReducers({ session: sessionReducer, token: tokenReducer, - layout: layout, permissions: permissionsReducer, conferenceSchedule: scheduleReducer, conferenceDetails: detailsReducer diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 368b03396..574e4af35 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -6,7 +6,6 @@ var React = require('react'); var api = require('../../lib/api'); var render = require('../../lib/render.jsx'); var sessionActions = require('../../redux/session.js'); -var layout = require('../../redux/layout.js'); var shuffle = require('../../lib/shuffle.js').shuffle; var Activity = require('../../components/activity/activity.jsx'); @@ -43,12 +42,6 @@ var Splash = injectIntl(React.createClass({ permissions: {} }; }, - componentWillMount: function () { - this.props.dispatch(layout.getLayout()); - for (var query in layout.mediaQueries) { - layout.mediaQueries[query].addListener(this.onResize); - } - }, componentDidUpdate: function (prevProps) { if (this.props.session.session.user != prevProps.session.session.user) { if (this.props.session.session.user) { @@ -94,9 +87,6 @@ var Splash = injectIntl(React.createClass({ } } }, - onResize: function () { - this.props.dispatch(layout.getLayout()); - }, getActivity: function () { api({ uri: '/proxy/users/' + this.props.session.session.user.username + '/activity?limit=5' @@ -449,8 +439,7 @@ var Splash = injectIntl(React.createClass({ var mapStateToProps = function (state) { return { session: state.session, - permissions: state.permissions, - layout: state.layout + permissions: state.permissions }; }; diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss index 9739992cf..841b2c73a 100644 --- a/src/views/splash/splash.scss +++ b/src/views/splash/splash.scss @@ -65,8 +65,17 @@ .box { width: $cols6; - white-space: normal; } } } } + +//6 columns +@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { + .splash { + .splash-header { + margin: 0 auto; + width: $cols8; + } + } +}