Skip to content

GitLab

S
scratch-www
Commit 240fd5e5 authored by Karishma Chadha's avatar Karishma Chadha
Browse files
Options

Make 4Ps more consistent with design sketch for all screen sizes.

parent 8cf04fe7
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 43 deletions
src/views/annual-report/annual-report.jsx
View file @ 240fd5e5
...@@ -409,29 +409,91 @@ class AnnualReport extends React.Component { ...@@ -409,29 +409,91 @@ class AnnualReport extends React.Component {
/> />
</p> </p>
</div> </div>
<div className="four-ps-wrapper"> <div className="four-ps">
<div className="four-ps"> <MediaQuery minWidth={frameless.tabletPortrait}>
<div className="one-p four-ps-projects"> <div className="one-p four-ps-projects">
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3>
<p><FormattedMessage id="annualReport.missionProjectsDescription" /></p>
</div>
<img src="/images/annual-report/mission/Projects Illustration.svg" />
</div>
</MediaQuery>
<MediaQuery
className="one-p top"
maxWidth={frameless.tabletPortrait - 1}
>
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3> <h3><FormattedMessage id="annualReport.missionProjectsTitle" /></h3>
<p><FormattedMessage id="annualReport.missionProjectsDescription" /></p> <p><FormattedMessage id="annualReport.missionProjectsDescription" /></p>
</div>
<div className="small-p four-ps-projects">
<img src="/images/annual-report/mission/Projects Illustration.svg" /> <img src="/images/annual-report/mission/Projects Illustration.svg" />
</div> </div>
</MediaQuery>
<MediaQuery minWidth={frameless.tabletPortrait}>
<div className="one-p four-ps-passion"> <div className="one-p four-ps-passion">
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
<p><FormattedMessage id="annualReport.missionPassionDescription" /></p>
</div>
<img src="/images/annual-report/mission/Passion Illustration.svg" />
</div>
</MediaQuery>
<MediaQuery
className="one-p"
maxWidth={frameless.tabletPortrait - 1}
>
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3> <h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
<p><FormattedMessage id="annualReport.missionPassionDescription" /></p> <p className="no-margin-bottom"><FormattedMessage id="annualReport.missionPassionDescription" /></p>
</div>
<div className="small-p four-ps-passion">
<img src="/images/annual-report/mission/Passion Illustration.svg" /> <img src="/images/annual-report/mission/Passion Illustration.svg" />
</div> </div>
</MediaQuery>
<MediaQuery minWidth={frameless.tabletPortrait}>
<div className="one-p four-ps-peers"> <div className="one-p four-ps-peers">
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3>
<p><FormattedMessage id="annualReport.missionPeersDescription" /></p>
</div>
<img src="/images/annual-report/mission/Peers Illustration.svg" />
</div>
</MediaQuery>
<MediaQuery
className="one-p"
maxWidth={frameless.tabletPortrait - 1}
>
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3> <h3><FormattedMessage id="annualReport.missionPeersTitle" /></h3>
<p><FormattedMessage id="annualReport.missionPeersDescription" /></p> <p><FormattedMessage id="annualReport.missionPeersDescription" /></p>
</div>
<div className="small-p four-ps-peers">
<img src="/images/annual-report/mission/Peers Illustration.svg" /> <img src="/images/annual-report/mission/Peers Illustration.svg" />
</div> </div>
</MediaQuery>
<MediaQuery minWidth={frameless.tabletPortrait}>
<div className="one-p four-ps-play"> <div className="one-p four-ps-play">
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3>
<p><FormattedMessage id="annualReport.missionPlayDescription" /></p>
</div>
<img src="/images/annual-report/mission/Play Illustration.svg" />
</div>
</MediaQuery>
<MediaQuery
className="one-p"
maxWidth={frameless.tabletPortrait - 1}
>
<div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3> <h3><FormattedMessage id="annualReport.missionPlayTitle" /></h3>
<p><FormattedMessage id="annualReport.missionPlayDescription" /></p> <p><FormattedMessage id="annualReport.missionPlayDescription" /></p>
</div>
<div className="small-p four-ps-play">
<img src="/images/annual-report/mission/Play Illustration.svg" /> <img src="/images/annual-report/mission/Play Illustration.svg" />
</div> </div>
</div> </MediaQuery>
</div> </div>
</div> </div>
<div <div
......
src/views/annual-report/annual-report.scss
View file @ 240fd5e5
...@@ -280,25 +280,37 @@ p { ...@@ -280,25 +280,37 @@ p {
text-align: left; text-align: left;
} }
.inner { .inner {
padding-top: 124px; padding-top: 124px;
width: 620px; width: 620px;
} }
.four-ps-wrapper { .four-ps {
padding: 124px 0; margin: 56px 0 124px 0;
width: 940px; width: 940px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
@media #{$intermediate} {
margin-top: 96px 0 108px 0;
}
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
padding-top: 20px; justify-content: center;
}
@media #{$medium-and-smaller} {
margin-top: 76px;
align-items: center;
} }
} }
.inner, .four-ps-wrapper { .inner, .four-ps {
@media #{$intermediate} { @media #{$intermediate} {
width: 620px; width: 620px;
} }
@media #{$medium} { @media #{$medium} {
width: 460px; width: 460px;
} }
...@@ -307,77 +319,147 @@ p { ...@@ -307,77 +319,147 @@ p {
} }
} }
.four-ps {
height: 940px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
@media #{$intermediate-and-smaller} {
height: auto;
align-items: center;
justify-content: center;
}
}
.one-p { .one-p {
width: 300px; width: 460px;
height: 370px; height: 493px;
padding: 20px 80px;
background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
margin-top: 20px;
margin-right: 20px; margin-right: 20px;
p {
font-size: 1.25rem; img {
margin-top: 1.5rem; width: 460px;
}
&.top {
margin-top: 0px;
} }
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
padding: 0; padding: 0;
width: 300px;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
img {
width: 300px;
}
}
@media #{$intermediate} {
height: 370px;
}
@media #{$medium-and-smaller} {
margin-top: 62px;
height: 398px;
} }
@media #{$medium} { @media #{$medium} {
margin-right: 0; margin-right: 0;
} }
.title-and-description {
width: 300px;
margin: 16px auto 0 auto;
p {
font-size: 1.25rem;
line-height: 2rem;
margin-top: 16px;
}
.no-margin-bottom {
margin-bottom: 0;
}
@media #{$intermediate-and-smaller} {
text-align: center;
}
@media #{$medium-and-smaller} {
margin: 0 auto;
p {
font-size: 1rem;
line-height: 2rem;
margin-bottom: 16px;
}
}
@media #{$medium} {
p {
margin-top: 12px;
}
}
@media #{$small} {
p {
margin-top: 5px;
}
}
}
}
.small-p {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 268px;
img {
margin: 34px 0;
}
} }
.four-ps-projects { .four-ps-projects {
background-image: url("/images/annual-report/mission/Projects Splash.svg"); background-image: url("/images/annual-report/mission/Projects Splash.svg");
} }
.four-ps-peers {
background-image: url("/images/annual-report/mission/Peers Splash.svg");
}
.four-ps-passion { .four-ps-passion {
background-image: url("/images/annual-report/mission/Passion Splash.svg"); background-image: url("/images/annual-report/mission/Passion Splash.svg");
margin-top: 72px; margin-top: 112px;
margin-right: 0; margin-right: 0;
@media #{$intermediate} { @media #{$intermediate} {
margin-top: 72px; margin-top: 96px;
} }
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin-top: 20px; margin-top: 0;
} }
} }
.four-ps-peers {
background-image: url("/images/annual-report/mission/Peers Splash.svg");
margin-top: -80px;
@media #{$intermediate} {
margin-top: -72px;
}
@media #{$medium-and-smaller} {
margin-top: 0;
}
}
.four-ps-play { .four-ps-play {
background-image: url("/images/annual-report/mission/Play Splash.svg"); background-image: url("/images/annual-report/mission/Play Splash.svg");
margin-right: 0; margin-right: 0;
margin-top: 72px; margin-top: 32px;
@media #{$intermediate} { @media #{$intermediate} {
margin-top: 72px; margin-top: 24px;
} }
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin-top: 20px; margin-top: 0;
} }
} }
} }
.milestones-section { .milestones-section {
......
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