Skip to content

GitLab

S
scratch-www
Commit 44a53946 authored by Karishma Chadha's avatar Karishma Chadha
Browse files
Options

More responsiveness updates and replace placeholder image for donate section

parent 67ff3927
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 94 deletions
src/views/annual-report/annual-report.jsx
View file @ 44a53946
...@@ -730,48 +730,48 @@ class AnnualReport extends React.Component { ...@@ -730,48 +730,48 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.reachMapBlurb" /> <FormattedMessage id="annualReport.reachMapBlurb" />
</p> </p>
<div className="map-wrapper"> <div className="map-wrapper">
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.desktop}>
<WorldMap <WorldMap
className="map" className="map"
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={471} mapHeight={471}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
maxWidth={frameless.desktop - 1} maxWidth={frameless.desktop - 1}
minWidth={frameless.tabletPortrait} minWidth={frameless.tabletPortrait}
> >
<WorldMap <WorldMap
className="map" className="map"
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={384} mapHeight={384}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery <MediaQuery
maxWidth={frameless.tabletPortrait - 1} maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobileIntermediate} minWidth={frameless.mobileIntermediate}
> >
<WorldMap <WorldMap
className="map" className="map"
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={320} mapHeight={320}
/> />
</MediaQuery> </MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}> <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
<WorldMap <WorldMap
className="map" className="map"
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={240} mapHeight={240}
/> />
</MediaQuery> </MediaQuery>
</div> </div>
</div> </div>
</div> </div>
...@@ -1705,7 +1705,7 @@ class AnnualReport extends React.Component { ...@@ -1705,7 +1705,7 @@ class AnnualReport extends React.Component {
/> />
</div> </div>
</MediaQuery> </MediaQuery>
<div className="inner schools-conferences"> <div className="inner schools-conferences bottom">
<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">
...@@ -1760,7 +1760,7 @@ class AnnualReport extends React.Component { ...@@ -1760,7 +1760,7 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
</div> </div>
<div className="schools-conferences-region"> <div className="schools-conferences-region europe">
<div className="conference-title-and-description left"> <div className="conference-title-and-description left">
<h4> <h4>
<FormattedMessage id="annualReport.conferencesEuropeTitle" /> <FormattedMessage id="annualReport.conferencesEuropeTitle" />
......
src/views/annual-report/annual-report.scss
View file @ 44a53946
...@@ -657,7 +657,6 @@ p { ...@@ -657,7 +657,6 @@ p {
.scratch-jr-transition-img { .scratch-jr-transition-img {
margin-bottom: -44px; margin-bottom: -44px;
margin-left: 88px; margin-left: 88px;
width: 100%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
...@@ -923,10 +922,14 @@ p { ...@@ -923,10 +922,14 @@ p {
align-items: center; align-items: center;
@media #{$big} { @media #{$big} {
max-width: 1032px; max-width: 940px;
padding: 72px; padding: 72px;
} }
@media #{$medium-and-intermediate} {
padding-top: 72px;
}
@media #{$medium} { @media #{$medium} {
max-width: 460px; max-width: 460px;
} }
...@@ -945,7 +948,6 @@ p { ...@@ -945,7 +948,6 @@ p {
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 {
...@@ -957,7 +959,8 @@ p { ...@@ -957,7 +959,8 @@ p {
} }
@media #{$small} { @media #{$small} {
align-items: center; padding-top: 32px;
align-items: flex-start;
h2 { h2 {
line-height: 2.5rem; line-height: 2.5rem;
} }
...@@ -970,6 +973,13 @@ p { ...@@ -970,6 +973,13 @@ p {
padding-bottom: 0px; padding-bottom: 0px;
position: relative; position: relative;
@media #{$medium} {
max-width: 760px;
padding-top: 10px;
padding-bottom: 10px;
}
.four-pictures { .four-pictures {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -1007,8 +1017,21 @@ p { ...@@ -1007,8 +1017,21 @@ p {
left: 60px; left: 60px;
top: 60px; top: 60px;
@media #{$medium-and-smaller} { @media #{$intermediate} {
left: -20px;
top: -5px;
}
@media #{$medium} {
width: 80px;
left: -90px;
top: -20px;
}
@media #{$small} {
width: 80px; width: 80px;
left: -80px;
top: -10px;
} }
} }
...@@ -1017,8 +1040,18 @@ p { ...@@ -1017,8 +1040,18 @@ p {
right: 80px; right: 80px;
bottom: 40px; bottom: 40px;
@media #{$medium-and-smaller} { @media #{$intermediate} {
right: 0px;
}
@media #{$medium} {
width: 80px;
right: 0px;
}
@media #{$small} {
width: 80px; width: 80px;
right: 0px;
} }
} }
...@@ -1038,6 +1071,14 @@ p { ...@@ -1038,6 +1071,14 @@ p {
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
&.bottom {
padding-top: 0px;
@media #{$intermediate-and-smaller} {
padding-top: 32px;
}
}
@media #{$medium} { @media #{$medium} {
width: 460px; width: 460px;
} }
...@@ -1122,6 +1163,10 @@ p { ...@@ -1122,6 +1163,10 @@ p {
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&.europe {
flex-direction: column-reverse;
}
} }
.conference-image-and-caption { .conference-image-and-caption {
...@@ -1132,6 +1177,10 @@ p { ...@@ -1132,6 +1177,10 @@ p {
img { img {
width: 300px; width: 300px;
} }
@media #{$medium-and-smaller} {
margin-bottom: 32px;
}
} }
.conference-title-and-description { .conference-title-and-description {
...@@ -1232,6 +1281,10 @@ p { ...@@ -1232,6 +1281,10 @@ p {
margin: 20px 0px; margin: 20px 0px;
@media #{$medium-and-smaller} {
flex-direction: column;
}
.icon-and-link { .icon-and-link {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1282,7 +1335,7 @@ p { ...@@ -1282,7 +1335,7 @@ p {
img { img {
&.left { &.left {
@media #{$big} { @media #{$big} {
width: 432px; height: 420px;
} }
@media #{$intermediate} { @media #{$intermediate} {
width: 340px; width: 340px;
...@@ -1297,7 +1350,7 @@ p { ...@@ -1297,7 +1350,7 @@ p {
&.right { &.right {
@media #{$big} { @media #{$big} {
width: 780px; height: 420px;
} }
@media #{$intermediate} { @media #{$intermediate} {
width: 468px; width: 468px;
...@@ -1620,14 +1673,20 @@ p { ...@@ -1620,14 +1673,20 @@ p {
.initiatives-community { .initiatives-community {
.community-hero-img { .community-hero-img {
width: 100%; width: 100%;
height: 545px;
margin: 52px 0; margin: 52px 0;
background-image: url("/images/annual-report/initiatives/community-hero.png"); background-image: url("/images/annual-report/initiatives/community-hero.png");
background-size: cover; background-size: contain;
background-repeat: no-repeat;
background-position: center center; background-position: center center;
overflow: hidden; overflow: hidden;
@media #{$small} { @media #{$intermediate} {
height: 330px;
}
@media #{$medium-and-smaller} {
height: 244px; height: 244px;
} }
} }
...@@ -1869,7 +1928,7 @@ p { ...@@ -1869,7 +1928,7 @@ p {
} }
.video-background { .video-background {
width: 1020px; width: 100%;
height: 500px; height: 500px;
overflow: hidden; overflow: hidden;
...@@ -1881,13 +1940,6 @@ p { ...@@ -1881,13 +1940,6 @@ p {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: 100%;
@media #{$big} {
}
&.blm { &.blm {
background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg"); background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
} }
......
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