mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -05:00
Fix 4-column (mobile) responsiveness of schools and community sub-sections
This commit is contained in:
Karishma Chadha
parent
64bdc9eb29
commit
8c8052c052
2 changed files with 223 additions and 68 deletions
|
|
@ -1125,13 +1125,28 @@ class AnnualReport extends React.Component {
|
|||
videoWidth="568"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
|
||||
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"
|
||||
videoId="r2ctnvb0sy"
|
||||
videoWidth="380"
|
||||
|
|
@ -1185,10 +1200,9 @@ class AnnualReport extends React.Component {
|
|||
<FormattedMessage id="annualReport.communityTeamIntro2" />
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
className="hero"
|
||||
src="/images/annual-report/initiatives/community-hero.png"
|
||||
/>
|
||||
</div>
|
||||
<div className="community-hero-img" />
|
||||
<div className="inner">
|
||||
<div className="moderation-and-guidelines">
|
||||
<div className="community-moderation">
|
||||
<h4>
|
||||
|
|
@ -1449,13 +1463,28 @@ class AnnualReport extends React.Component {
|
|||
videoWidth="568"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png"
|
||||
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"
|
||||
videoId="r1pmlyylye"
|
||||
videoWidth="380"
|
||||
|
|
@ -1510,7 +1539,10 @@ class AnnualReport extends React.Component {
|
|||
videoWidth="568"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
isYouTube
|
||||
buttonMessage={
|
||||
|
|
@ -1523,10 +1555,23 @@ class AnnualReport extends React.Component {
|
|||
videoWidth="380"
|
||||
/>
|
||||
</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 */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="inner family-nights">
|
||||
<div className="inner schools">
|
||||
<h4>
|
||||
<FormattedMessage id="annualReport.familyCreativeNightsHeader" />
|
||||
</h4>
|
||||
|
|
@ -1634,17 +1679,32 @@ class AnnualReport extends React.Component {
|
|||
<p>
|
||||
<FormattedMessage id="annualReport.conferencesIntro" />
|
||||
</p>
|
||||
<div className="conferences-hero-and-caption">
|
||||
{/* eslint-disable-next-line max-len */}
|
||||
<img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
|
||||
<FormattedMessage
|
||||
id="annualReport.conferencesHeroImageCaption"
|
||||
values={{
|
||||
photoCredit: 'Carmelo Presicce'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<MediaQuery minWidth={frameless.mobile}>
|
||||
<div className="conferences-hero-and-caption">
|
||||
{/* eslint-disable-next-line max-len */}
|
||||
<img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
|
||||
<FormattedMessage
|
||||
id="annualReport.conferencesHeroImageCaption"
|
||||
values={{
|
||||
photoCredit: 'Carmelo Presicce'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
</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-region">
|
||||
<div className="conference-image-and-caption left">
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ p {
|
|||
@media #{$medium-and-intermediate} {
|
||||
text-align: left;
|
||||
h2 {
|
||||
max-width: 480px;
|
||||
max-width: 460px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -161,14 +161,23 @@ p {
|
|||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
@media #{$medium-and-smaller} {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.message-from-team {
|
||||
max-width: 620px;
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
@ -178,6 +187,11 @@ p {
|
|||
margin: 8px 24px 8px 0px;
|
||||
vertical-align: middle;
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
margin-right: 0px;
|
||||
|
|
@ -838,16 +852,36 @@ p {
|
|||
font-size: 1.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.initiatives-subsection-content {
|
||||
.inner {
|
||||
max-width: 1032px;
|
||||
.inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 72px;
|
||||
|
||||
@media #{$big} {
|
||||
max-width: 1032px;
|
||||
padding: 72px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
&.abhi {
|
||||
padding-top: 0;
|
||||
|
|
@ -855,29 +889,29 @@ p {
|
|||
}
|
||||
|
||||
&.schools {
|
||||
max-width: 620px;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
|
||||
padding-top: 10px;
|
||||
padding-bottom: 0px;
|
||||
|
||||
.subsection-tag {
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
}
|
||||
|
||||
&.family-nights {
|
||||
max-width: 620px;
|
||||
align-items: flex-start;
|
||||
@media #{$big} {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
|
||||
text-align: left;
|
||||
@media #{$small} {
|
||||
align-items: center;
|
||||
h2 {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.four-pictures-container {
|
||||
max-width: 1080px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
|
|
@ -951,6 +985,20 @@ p {
|
|||
align-items: flex-start;
|
||||
text-align: left;
|
||||
|
||||
@media #{$medium} {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
max-width: 300px;
|
||||
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subsection-tag {
|
||||
background-color: $ui-purple;
|
||||
margin-bottom: 24px;
|
||||
|
|
@ -965,48 +1013,28 @@ p {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 380px;
|
||||
margin-top: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.conferences-hero-and-caption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 540px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
margin: 0px 0px 20px 0px;
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
|
||||
@media #{$small} {
|
||||
width: 80%;
|
||||
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;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1015,6 +1043,14 @@ p {
|
|||
align-self: center;
|
||||
max-width: 780px;
|
||||
|
||||
@media #{$medium} {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.schools-conferences-region {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -1024,6 +1060,7 @@ p {
|
|||
|
||||
@media #{$medium-and-smaller} {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.conference-image-and-caption {
|
||||
|
|
@ -1039,7 +1076,13 @@ p {
|
|||
.conference-title-and-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 460px;
|
||||
|
||||
@media #{$small} {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 620px;
|
||||
text-align: left;
|
||||
|
||||
@media #{$medium} {
|
||||
width: 460px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
|
|
@ -1453,9 +1530,18 @@ p {
|
|||
}
|
||||
|
||||
.initiatives-community {
|
||||
.hero {
|
||||
.community-hero-img {
|
||||
width: 100%;
|
||||
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 {
|
||||
|
|
@ -1575,6 +1661,12 @@ p {
|
|||
max-width: 380px;
|
||||
font-size: .875rem;
|
||||
text-align: center;
|
||||
|
||||
@media #{$small} {
|
||||
img {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blm-projects {
|
||||
|
|
@ -2219,7 +2311,10 @@ p {
|
|||
@media #{$medium-and-smaller} {
|
||||
margin-left: 0px;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue