scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 08:31:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

tweak splash to not be terrible on mobile

Browse source
This commit is contained in:
Technoboy10 2016-07-22 14:53:39 -04:00
parent b88b8c83b1
commit a9def9c1ae
2 changed files with 45 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/views/splash/splash.jsx
View file

@ -6,6 +6,7 @@ var React = require('react');
var api = require('../../lib/api'); var api = require('../../lib/api');
var render = require('../../lib/render.jsx'); var render = require('../../lib/render.jsx');
var sessionActions = require('../../redux/session.js'); var sessionActions = require('../../redux/session.js');
var layout = require('../../redux/layout.js');
var shuffle = require('../../lib/shuffle.js').shuffle; var shuffle = require('../../lib/shuffle.js').shuffle;
var Activity = require('../../components/activity/activity.jsx'); var Activity = require('../../components/activity/activity.jsx');
@ -42,6 +43,12 @@ var Splash = injectIntl(React.createClass({
permissions: {} permissions: {}
}; };
}, },
componentWillMount: function () {
this.props.dispatch(layout.getLayout());
for (var query in layout.mediaQueries) {
layout.mediaQueries[query].addListener(this.onResize);
}
},
componentDidUpdate: function (prevProps) { componentDidUpdate: function (prevProps) {
if (this.props.session.session.user != prevProps.session.session.user) { if (this.props.session.session.user != prevProps.session.session.user) {
if (this.props.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 () { getActivity: function () {
api({ api({
uri: '/proxy/users/' + this.props.session.session.user.username + '/activity?limit=5' 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) { var mapStateToProps = function (state) {
return { return {
session: state.session, session: state.session,
permissions: state.permissions permissions: state.permissions,
layout: state.layout
}; };
}; };

35
src/views/splash/splash.scss
View file

@ -1,3 +1,5 @@
@import "../../frameless";
.splash { .splash {
.splash-header { .splash-header {
display: flex; display: flex;
@ -24,7 +26,7 @@
.news { .news {
width: 40%; width: 40%;
img { img {
flex-shrink: 0; flex-shrink: 0;
} }
@ -38,4 +40,33 @@
.box { .box {
margin-bottom: 20px; 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;
}
}
}
}