mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
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.
This commit is contained in:
Karishma Chadha
parent
3546be1b12
commit
14397625db
5 changed files with 33 additions and 43 deletions
|
|
@ -446,7 +446,9 @@ class AnnualReport extends React.Component {
|
|||
>
|
||||
<div className="title-and-description">
|
||||
<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 className="small-p four-ps-passion">
|
||||
<img src="/images/annual-report/mission/Passion Illustration.svg" />
|
||||
|
|
@ -698,21 +700,21 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<div className="transition-images">
|
||||
<div className="left-image">
|
||||
<img src="/images/annual-report/milestones/vertical-loop.svg" />
|
||||
</div>
|
||||
<div className="cropped-image">
|
||||
<img src="/images/annual-report/milestones/painting-hand.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div
|
||||
className="reach-section"
|
||||
ref={this.setRef(SECTIONS.reach)}
|
||||
>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<div className="transition-images">
|
||||
<div className="left-image">
|
||||
<img src="/images/annual-report/reach/vertical-loop.svg" />
|
||||
</div>
|
||||
<div className="cropped-image">
|
||||
<img src="/images/annual-report/reach/painting-hand.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<div className="inner">
|
||||
<div className="reach-intro">
|
||||
<h2>
|
||||
|
|
|
|||
|
|
@ -463,6 +463,7 @@ p {
|
|||
|
||||
.milestones-section {
|
||||
background-color: $ui-blue-10percent;
|
||||
padding-bottom: 120px;
|
||||
|
||||
.inner {
|
||||
max-width: 940px;
|
||||
|
|
@ -566,14 +567,19 @@ p {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reach-section {
|
||||
position: relative;
|
||||
.transition-images {
|
||||
width: 100%;
|
||||
|
||||
height: 420px;
|
||||
overflow: hidden;
|
||||
|
||||
margin-bottom: -240px;
|
||||
margin-top: -180px;
|
||||
|
||||
position: absolute;
|
||||
|
||||
.left-image {
|
||||
align-self: center;
|
||||
|
|
@ -584,9 +590,7 @@ p {
|
|||
width: 260px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reach-section {
|
||||
.inner {
|
||||
max-width: 940px;
|
||||
padding-top: 120px;
|
||||
|
|
@ -760,14 +764,14 @@ p {
|
|||
|
||||
.reach-section {
|
||||
.scratch-jr-transition-img {
|
||||
margin-bottom: -44px;
|
||||
position: absolute;
|
||||
margin-top: -44px;
|
||||
margin-left: 88px;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
@media #{$medium} {
|
||||
margin-left: 32px;
|
||||
}
|
||||
@media #{$small} {
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -775,18 +779,18 @@ p {
|
|||
|
||||
.reach-scratch-jr {
|
||||
.scratch-jr-transition-img {
|
||||
width: 100%;
|
||||
margin-bottom: -156px;
|
||||
margin-right: 48px;
|
||||
display: flex;
|
||||
// flex-direction: row-reverse;
|
||||
overflow: hidden;
|
||||
|
||||
justify-content: flex-end;
|
||||
|
||||
// @media #{$medium-and-smaller} {
|
||||
// margin-right: -28px;
|
||||
// }
|
||||
@media #{$medium} {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@media #{$small} {
|
||||
margin-right: -36px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in a new issue