experiment with the react-responsive library

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",

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 (
             <FooterBox>
-                {this.props.layout == 'COLS4' || this.props.layout == 'COLS6' ? [
+                <MediaQuery maxWidth={639}>
                     <div className="lists">
                         <dl>
                             <dd>
@@ -48,7 +49,8 @@ var Footer = React.createClass({
                             </dd>
                         </dl>
                     </div>
-                ] : [
+                </MediaQuery>
+                <MediaQuery minWidth={640}>
                     <div className="lists">
                         <dl>
                             <dt>
@@ -199,7 +201,7 @@ var Footer = React.createClass({
                             </dd>
                         </dl>
                     </div>
-                ]}
+                </MediaQuery>
                 <LanguageChooser />
 
                 <div className="copyright">

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({
                                 <a className={dropdownClasses}
                                     href="#" onClick={this.handleAccountNavClick}>
                                     <Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
-                                    {this.props.layout == 'COLS8' || this.props.layout == 'COLS12' ?
-                                        this.props.session.session.user.username : ''}
+                                    <MediaQuery minWidth={640} component='span'>
+                                        {this.props.session.session.user.username}
+                                    </MediaQuery>
                                 </a>
                                 <Dropdown
                                         as="ul"

src/components/page/www/page.jsx

 var React = require('react');
-var connect = require('react-redux').connect;
 var classNames = require('classnames');
 
 var Navigation = require('../../navigation/www/navigation.jsx');
@@ -14,24 +13,17 @@ var Page = React.createClass({
         return (
             <div className="page">
                 <div id="navigation" className={classes}>
-                    <Navigation layout={this.props.layout}/>
+                    <Navigation/>
                 </div>
                 <div id="view">
                     {this.props.children}
                 </div>
                 <div id="footer">
-                    <Footer layout={this.props.layout}/>
+                    <Footer/>
                 </div>
             </div>
         );
     }
 });
 
-var mapStateToProps = function (state) {
-    return {
-        layout: state.layout
-    };
-};
-
-var ConnectedPage = connect(mapStateToProps)(Page);
-module.exports = ConnectedPage;
+module.exports = Page;

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

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
     };
 };
 

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;
+        }
+    }
+}