tweak splash to not be terrible on mobile

src/views/splash/splash.jsx

@@ -6,6 +6,7 @@ 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');
@@ -42,6 +43,12 @@ 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) {
@@ -87,6 +94,9 @@ 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'
@@ -439,7 +449,8 @@ var Splash = injectIntl(React.createClass({
 var mapStateToProps = function (state) {
     return {
         session: state.session,
-        permissions: state.permissions
+        permissions: state.permissions,
+        layout: state.layout
     };
 };
 

src/views/splash/splash.scss

@@ -1,3 +1,5 @@
+@import "../../frameless";
+
 .splash {
     .splash-header {
         display: flex;
@@ -24,7 +26,7 @@
 
         .news {
             width: 40%;
-            
+
             img {
                 flex-shrink: 0;
             }
@@ -38,4 +40,33 @@
     .box {
         margin-bottom: 20px;
     }
-}    
+}
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    .splash {
+        .splash-header {
+            flex-wrap: wrap;
+            justify-content: center;
+
+            .box {
+                width: $cols4;
+            }
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .splash {
+        .splash-header {
+            flex-wrap: wrap;
+            justify-content: center;
+
+            .box {
+                width: $cols6;
+                white-space: normal;
+            }
+        }
+    }
+}