Skip to content

GitLab

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

Move transition messages from milestones section into reach section. Fix... 

Move transition messages from milestones section into reach section. Fix ScratchJr transition messages based on changes made with the milestone-reach transition images. Fix lint issue.
parent 3546be1b
Hide whitespace changes
Inline Side-by-side
Showing with 30 additions and 40 deletions
src/views/annual-report/annual-report.jsx
View file @ 14397625
...@@ -446,7 +446,9 @@ class AnnualReport extends React.Component { ...@@ -446,7 +446,9 @@ class AnnualReport extends React.Component {
> >
<div className="title-and-description"> <div className="title-and-description">
<h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3> <h3><FormattedMessage id="annualReport.missionPassionTitle" /></h3>
<p className="no-margin-bottom"><FormattedMessage id="annualReport.missionPassionDescription" /></p> <p className="no-margin-bottom">
<FormattedMessage id="annualReport.missionPassionDescription" />
</p>
</div> </div>
<div className="small-p four-ps-passion"> <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" />
...@@ -698,21 +700,21 @@ class AnnualReport extends React.Component { ...@@ -698,21 +700,21 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</div>
<div
className="reach-section"
ref={this.setRef(SECTIONS.reach)}
>
<MediaQuery minWidth={frameless.desktop}> <MediaQuery minWidth={frameless.desktop}>
<div className="transition-images"> <div className="transition-images">
<div className="left-image"> <div className="left-image">
<img src="/images/annual-report/milestones/vertical-loop.svg" /> <img src="/images/annual-report/reach/vertical-loop.svg" />
</div> </div>
<div className="cropped-image"> <div className="cropped-image">
<img src="/images/annual-report/milestones/painting-hand.svg" /> <img src="/images/annual-report/reach/painting-hand.svg" />
</div> </div>
</div> </div>
</MediaQuery> </MediaQuery>
</div>
<div
className="reach-section"
ref={this.setRef(SECTIONS.reach)}
>
<div className="inner"> <div className="inner">
<div className="reach-intro"> <div className="reach-intro">
<h2> <h2>
......
src/views/annual-report/annual-report.scss
View file @ 14397625
...@@ -463,6 +463,7 @@ p { ...@@ -463,6 +463,7 @@ p {
.milestones-section { .milestones-section {
background-color: $ui-blue-10percent; background-color: $ui-blue-10percent;
padding-bottom: 120px;
.inner { .inner {
max-width: 940px; max-width: 940px;
...@@ -566,14 +567,19 @@ p { ...@@ -566,14 +567,19 @@ p {
} }
} }
} }
}
.reach-section {
position: relative;
.transition-images { .transition-images {
width: 100%; width: 100%;
height: 420px; height: 420px;
overflow: hidden; overflow: hidden;
margin-bottom: -240px; margin-top: -180px;
position: absolute;
.left-image { .left-image {
align-self: center; align-self: center;
...@@ -584,9 +590,7 @@ p { ...@@ -584,9 +590,7 @@ p {
width: 260px; width: 260px;
} }
} }
}
.reach-section {
.inner { .inner {
max-width: 940px; max-width: 940px;
padding-top: 120px; padding-top: 120px;
...@@ -760,14 +764,14 @@ p { ...@@ -760,14 +764,14 @@ p {
.reach-section { .reach-section {
.scratch-jr-transition-img { .scratch-jr-transition-img {
margin-bottom: -44px; position: absolute;
margin-top: -44px;
margin-left: 88px; margin-left: 88px;
display: flex; @media #{$medium} {
overflow: hidden; margin-left: 32px;
justify-content: flex-start; }
@media #{$small} {
@media #{$medium-and-smaller} {
margin-left: -8px; margin-left: -8px;
} }
} }
...@@ -775,18 +779,18 @@ p { ...@@ -775,18 +779,18 @@ p {
.reach-scratch-jr { .reach-scratch-jr {
.scratch-jr-transition-img { .scratch-jr-transition-img {
width: 100%;
margin-bottom: -156px; margin-bottom: -156px;
margin-right: 48px; margin-right: 48px;
display: flex; display: flex;
// flex-direction: row-reverse;
overflow: hidden;
justify-content: flex-end; justify-content: flex-end;
// @media #{$medium-and-smaller} { @media #{$medium} {
// margin-right: -28px; margin-right: 12px;
// } }
@media #{$small} {
margin-right: -36px;
overflow: hidden;
}
} }
} }
......
static/images/annual-report/milestones/horizontal-command.svg deleted 100644 → 0
View file @ 3546be1b
<?xml version="1.0" encoding="UTF-8"?>
<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ScratchJr Command</title>
<defs>
<filter id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 0.749020 0 0 0 0 0.000000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="ScratchJr-Command" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Horizontal/Block/Command" transform="translate(8.000000, 12.000000)" filter="url(#filter-1)">
<g transform="translate(36.000000, 32.000000) rotate(14.000000) translate(-36.000000, -32.000000) ">
<path d="M0,49.6568542 C0,48.5959883 0.421427361,47.5785726 1.17157288,46.8284271 L1.17157288,46.8284271 L6.82842712,41.1715729 C7.57857264,40.4214274 8,39.4040117 8,38.3431458 L8,38.3431458 L8,25.6568542 C8,24.5959883 7.57857264,23.5785726 6.82842712,22.8284271 L6.82842712,22.8284271 L1.17157288,17.1715729 C0.421427361,16.4214274 0,15.4040117 0,14.3431458 L0,14.3431458 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L60,0 C62.209139,-4.05812251e-16 64,1.790861 64,4 L64,14.375 L64.0064166,14.5697275 C64.061881,15.5479932 64.4750092,16.4750092 65.1715729,17.1715729 L70.8284271,22.8284271 C71.5785726,23.5785726 72,24.5959883 72,25.6568542 L72,38.3431458 C72,39.4040117 71.5785726,40.4214274 70.8284271,41.1715729 L65.1715729,46.8284271 C64.4290142,47.5709858 64.0085581,48.5754358 64.0001292,49.6246797 L64,60 C64,62.209139 62.209139,64 60,64 L4,64 C1.790861,64 2.705415e-16,62.209139 0,60 Z" id="Command" stroke="#CC9900" fill="#FFBF00"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
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