Skip to content

GitLab

S
scratch-www
Commit 8c8052c0 authored by Karishma Chadha's avatar Karishma Chadha
Browse files
Options

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

parent 64bdc9eb
Show whitespace changes
Inline Side-by-side
Showing with 223 additions and 68 deletions
src/views/annual-report/annual-report.jsx
View file @ 8c8052c0
......@@ -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,6 +1679,7 @@ class AnnualReport extends React.Component {
<p>
<FormattedMessage id="annualReport.conferencesIntro" />
</p>
<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" />
......@@ -1644,7 +1690,21 @@ class AnnualReport extends React.Component {
}}
/>
</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">
......
src/views/annual-report/annual-report.scss
View file @ 8c8052c0
......@@ -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;
display: flex;
flex-direction: column;
align-items: center;
@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 {
@media #{$big} {
max-width: 620px;
align-items: flex-start;
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;
margin: 0px 0px 20px 0px;
}
.conferences-hero-and-caption {
display: flex;
flex-direction: column;
align-items: center;
width: 540px;
margin-bottom: 24px;
@media #{$medium-and-smaller} {
@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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment