scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Initial work on responsive middle banner

Browse source
This commit is contained in:
Connor Hudson 2018-07-03 14:48:20 -04:00
parent 0eb12ae469
commit 08178a58e5
2 changed files with 45 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/views/splash/beta/middle-banner.jsx
View file

@ -2,9 +2,13 @@ const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl; const injectIntl = require('react-intl').injectIntl;
const React = require('react'); const React = require('react');
const MediaQuery = require('react-responsive').default;
const FlexRow = require('../../../components/flex-row/flex-row.jsx'); const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx'); const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
const frameless = require('../../../lib/frameless');
require('./middle-banner.scss'); require('./middle-banner.scss');
const MiddleBanner = () => ( const MiddleBanner = () => (
@ -17,8 +21,15 @@ const MiddleBanner = () => (
href="https://beta.scratch.mit.edu/" href="https://beta.scratch.mit.edu/"
>Try it!</a> >Try it!</a>
</FlexRow> </FlexRow>
<div className="beta-banner-image"> <div className="beta-banner-images">
<img src="/images/beta/right-illustration.png" /> <MediaQuery maxWidth={frameless.desktop - 1}>
<div className="beta-banner-image left">
<img src="/images/beta/left-illustration.png" />
</div>
</MediaQuery>
<div className="beta-banner-image right">
<img src="/images/beta/right-illustration.png" />
</div>
</div> </div>
</TitleBanner> </TitleBanner>
); );

38
src/views/splash/beta/middle-banner.scss
View file

@ -10,6 +10,7 @@
background-size: cover; background-size: cover;
padding: 0; padding: 0;
height: 17rem; height: 17rem;
overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
justify-content: center; justify-content: center;
@ -19,15 +20,20 @@
flex-shrink: 0; flex-shrink: 0;
} }
.beta-banner-image { .beta-banner-images {
display: flex; display: flex;
margin-right: 2rem;
min-width: 0;
align-self: flex-end; align-self: flex-end;
img { .beta-banner-image {
max-width: 100%; display: flex;
height: auto; margin-right: 2rem;
min-width: 0;
align-self: flex-end;
img {
max-width: 100%;
height: auto;
}
} }
} }
@ -46,9 +52,29 @@
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.beta-middle-banner { .beta-middle-banner {
height: initial;
flex-direction: column;
.beta-middle-container { .beta-middle-container {
padding-top: 4rem;
padding-left: 0;
align-items: center; align-items: center;
} }
.beta-banner-images {
.beta-banner-image {
margin: 0;
padding: 0;
&.left {
margin-left: -2.5rem;
}
&.right {
margin-right: -2.5rem;
}
}
}
} }
} }