scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 10:58:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix 4-column (mobile) responsiveness of schools and community sub-sections

Browse source
This commit is contained in:
Karishma Chadha 2020-10-20 23:13:40 -04:00
parent 64bdc9eb29
commit 8c8052c052
2 changed files with 223 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/views/annual-report/annual-report.jsx
View file

@ -1125,13 +1125,28 @@ class AnnualReport extends React.Component {
videoWidth="568" videoWidth="568"
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}> <MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobile}
>
<VideoPreview <VideoPreview
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
} }
thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png" thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
thumbnailWidth="400" thumbnailWidth="400"
videoHeight="320"
videoId="r2ctnvb0sy"
videoWidth="568"
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
}
thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
thumbnailWidth="300"
videoHeight="216" videoHeight="216"
videoId="r2ctnvb0sy" videoId="r2ctnvb0sy"
videoWidth="380" videoWidth="380"
@ -1185,10 +1200,9 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.communityTeamIntro2" /> <FormattedMessage id="annualReport.communityTeamIntro2" />
</p> </p>
</div> </div>
<img </div>
className="hero" <div className="community-hero-img" />
src="/images/annual-report/initiatives/community-hero.png" <div className="inner">
/>
<div className="moderation-and-guidelines"> <div className="moderation-and-guidelines">
<div className="community-moderation"> <div className="community-moderation">
<h4> <h4>
@ -1449,13 +1463,28 @@ class AnnualReport extends React.Component {
videoWidth="568" videoWidth="568"
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}> <MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobile}
>
<VideoPreview <VideoPreview
buttonMessage={ buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'}) this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
} }
thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png" thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png"
thumbnailWidth="400" thumbnailWidth="400"
videoHeight="320"
videoId="r1pmlyylye"
videoWidth="568"
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
}
thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png"
thumbnailWidth="300"
videoHeight="216" videoHeight="216"
videoId="r1pmlyylye" videoId="r1pmlyylye"
videoWidth="380" videoWidth="380"
@ -1510,7 +1539,10 @@ class AnnualReport extends React.Component {
videoWidth="568" videoWidth="568"
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}> <MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobile}
>
<VideoPreview <VideoPreview
isYouTube isYouTube
buttonMessage={ buttonMessage={
@ -1523,10 +1555,23 @@ class AnnualReport extends React.Component {
videoWidth="380" videoWidth="380"
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<VideoPreview
isYouTube
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
}
thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
thumbnailWidth="300"
videoHeight="216"
videoId="9QD9IxOinLg"
videoWidth="380"
/>
</MediaQuery>
{/* eslint-enable max-len */} {/* eslint-enable max-len */}
</div> </div>
</div> </div>
<div className="inner family-nights"> <div className="inner schools">
<h4> <h4>
<FormattedMessage id="annualReport.familyCreativeNightsHeader" /> <FormattedMessage id="annualReport.familyCreativeNightsHeader" />
</h4> </h4>
@ -1634,6 +1679,7 @@ class AnnualReport extends React.Component {
<p> <p>
<FormattedMessage id="annualReport.conferencesIntro" /> <FormattedMessage id="annualReport.conferencesIntro" />
</p> </p>
<MediaQuery minWidth={frameless.mobile}>
<div className="conferences-hero-and-caption"> <div className="conferences-hero-and-caption">
{/* eslint-disable-next-line max-len */} {/* eslint-disable-next-line max-len */}
<img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" /> <img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
@ -1644,7 +1690,21 @@ class AnnualReport extends React.Component {
}} }}
/> />
</div> </div>
</MediaQuery>
</div> </div>
</div>
<MediaQuery maxWidth={frameless.mobile - 1}>
<div className="conferences-hero-and-caption">
<div className="conferences-hero" />
<FormattedMessage
id="annualReport.conferencesHeroImageCaption"
values={{
photoCredit: 'Carmelo Presicce'
}}
/>
</div>
</MediaQuery>
<div className="inner schools-conferences">
<div className="schools-conferences-content"> <div className="schools-conferences-content">
<div className="schools-conferences-region"> <div className="schools-conferences-region">
<div className="conference-image-and-caption left"> <div className="conference-image-and-caption left">

183
src/views/annual-report/annual-report.scss
View file

@ -136,7 +136,7 @@ p {
@media #{$medium-and-intermediate} { @media #{$medium-and-intermediate} {
text-align: left; text-align: left;
h2 { h2 {
max-width: 480px; max-width: 460px;
vertical-align: middle; vertical-align: middle;
} }
} }
@ -161,14 +161,23 @@ p {
margin-right: 20px; margin-right: 20px;
} }
@media #{$small} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
} }
@media #{$medium} {
max-width: 460px;
}
} }
.message-from-team { .message-from-team {
max-width: 620px; max-width: 620px;
@media #{$medium} {
max-width: 460px;
}
@media #{$small} { @media #{$small} {
max-width: 300px; max-width: 300px;
} }
@ -178,6 +187,11 @@ p {
margin: 8px 24px 8px 0px; margin: 8px 24px 8px 0px;
vertical-align: middle; vertical-align: middle;
@media #{$medium} {
max-width: 460px;
margin-right: 0px;
}
@media #{$small} { @media #{$small} {
max-width: 300px; max-width: 300px;
margin-right: 0px; margin-right: 0px;
@ -838,16 +852,36 @@ p {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
}
} }
} }
.initiatives-subsection-content { .initiatives-subsection-content {
.inner { .inner {
max-width: 1032px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@media #{$big} {
max-width: 1032px;
padding: 72px; padding: 72px;
}
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
padding-top: 32px;
}
&.abhi { &.abhi {
padding-top: 0; padding-top: 0;
@ -855,29 +889,29 @@ p {
} }
&.schools { &.schools {
max-width: 620px;
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
padding-top: 10px;
padding-bottom: 0px; padding-bottom: 0px;
.subsection-tag { .subsection-tag {
background-color: $ui-purple; background-color: $ui-purple;
} }
@media #{$big} {
max-width: 620px;
} }
&.family-nights { @media #{$small} {
max-width: 620px; align-items: center;
align-items: flex-start; h2 {
line-height: 2.5rem;
padding-top: 0px; }
padding-bottom: 0px; }
text-align: left;
} }
&.four-pictures-container { &.four-pictures-container {
max-width: 1080px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0px;
padding-bottom: 0px; padding-bottom: 0px;
@ -951,6 +985,20 @@ p {
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
@media #{$medium} {
width: 460px;
}
@media #{$small} {
max-width: 300px;
align-items: center;
h2 {
line-height: 2.5rem;
}
}
.subsection-tag { .subsection-tag {
background-color: $ui-purple; background-color: $ui-purple;
margin-bottom: 24px; margin-bottom: 24px;
@ -965,48 +1013,28 @@ p {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
text-align: left;
@media #{$medium-and-smaller} {
flex-direction: column;
align-items: center;
}
p { p {
width: 380px; width: 380px;
margin-top: 0px; margin-top: 0px;
margin-right: 20px; margin-right: 20px;
}
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: column; margin: 0px 0px 20px 0px;
} }
.conferences-hero-and-caption { @media #{$medium} {
display: flex;
flex-direction: column;
align-items: center;
width: 540px;
margin-bottom: 24px;
@media #{$medium-and-smaller} {
width: 460px; width: 460px;
} }
@media #{$small} { @media #{$small} {
width: 80%; width: 300px;
overflow: hidden;
margin: 0px;
padding: 0px;
}
img {
margin-bottom: 22px;
@media #{$small} {
align-items: flex-start;
}
}
span {
font-size: 0.875rem;
line-height: 1.25rem;
} }
} }
} }
@ -1015,6 +1043,14 @@ p {
align-self: center; align-self: center;
max-width: 780px; max-width: 780px;
@media #{$medium} {
width: 460px;
}
@media #{$small} {
width: 300px;
}
.schools-conferences-region { .schools-conferences-region {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -1024,6 +1060,7 @@ p {
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
align-items: center;
} }
.conference-image-and-caption { .conference-image-and-caption {
@ -1039,7 +1076,13 @@ p {
.conference-title-and-description { .conference-title-and-description {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
width: 460px; width: 460px;
@media #{$small} {
width: 300px;
}
} }
.left { .left {
@ -1050,10 +1093,44 @@ p {
} }
} }
.conferences-hero-and-caption {
display: flex;
flex-direction: column;
align-items: center;
max-width: 540px;
margin-bottom: 24px;
img {
margin-bottom: 22px;
@media #{$medium-and-smaller} {
width: 460px;
}
}
span {
font-size: 0.875rem;
line-height: 1.25rem;
}
.conferences-hero {
background-image: url('/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png');
overflow: hidden;
background-position: center center;
height: 320px;
width: 100%;
}
}
.teacher-quote { .teacher-quote {
width: 620px; width: 620px;
text-align: left; text-align: left;
@media #{$medium} {
width: 460px;
padding: 0px;
}
@media #{$small} { @media #{$small} {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
@ -1453,9 +1530,18 @@ p {
} }
.initiatives-community { .initiatives-community {
.hero { .community-hero-img {
width: 100%; width: 100%;
margin: 52px 0; margin: 52px 0;
background-image: url("/images/annual-report/initiatives/community-hero.png");
background-size: cover;
background-position: center center;
overflow: hidden;
@media #{$small} {
height: 244px;
}
} }
.moderation-and-guidelines { .moderation-and-guidelines {
@ -1575,6 +1661,12 @@ p {
max-width: 380px; max-width: 380px;
font-size: .875rem; font-size: .875rem;
text-align: center; text-align: center;
@media #{$small} {
img {
width: 300px;
}
}
} }
.blm-projects { .blm-projects {
@ -2219,7 +2311,10 @@ p {
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin-left: 0px; margin-left: 0px;
text-align: center; text-align: center;
width: 75%; }
@media #{$small} {
width: 300px;
} }