scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

style changes for top two sections

Browse source
This commit is contained in:
caseymm 2021-09-30 16:23:15 -07:00
parent 9c83891a42
commit 03a2435863
4 changed files with 96 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/views/annual-report/2020/index/annual-report.jsx
View file

@ -298,24 +298,24 @@ class AnnualReport extends React.Component {
className="message-section"
ref={this.setRef(SECTIONS.founders_message)}
>
<FlexRow className="masthead">
<div className="masthead-content">
<p className="message-year">
<FormattedMessage id="annualReport.mastheadYear" />
</p>
<h1>
<FormattedMessage id="annualReport.mastheadTitle" />
</h1>
</div>
<img src="/images/annual-report/2020/founders-message/placeholder_Masthead_Illustration.svg" />
</FlexRow>
<MediaQuery minWidth={frameless.desktop}>
<img
className="wave-icon-desktop"
src="/images/annual-report/message/wave-icon.svg"
/>
</MediaQuery>
<div className="inner">
<FlexRow className="masthead">
<div className="masthead-content">
<p className="message-year">
<FormattedMessage id="annualReport.mastheadYear" />
</p>
<h1>
<FormattedMessage id="annualReport.mastheadTitle" />
</h1>
</div>
<img src="/images/annual-report/2020/founders-message/placeholder_Masthead_Illustration.svg" />
</FlexRow>
<MediaQuery minWidth={frameless.desktop}>
<img
className="wave-icon-desktop"
src="/images/annual-report/message/wave-icon.svg"
/>
</MediaQuery>
<FlexRow className="message-content">
<MediaQuery maxWidth={frameless.desktop - 1}>
{/* Show the wave icon inside this div in smaller screens */}
@ -490,25 +490,17 @@ class AnnualReport extends React.Component {
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>
<FormattedMessage id="annualReport.reachTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.reachSubtitle" />
</p>
<img src="/images/annual-report/reach/Calendar.svg" />
<div className="hed">
<h2>
<FormattedMessage id="annualReport.reachTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.reachSubtitle" />
</p>
</div>
<img src="/images/annual-report/2020/data/Calendar.svg" />
<div className="reach-numbers">
<div className="reach-datapoint">
<FormattedMessage
@ -564,7 +556,8 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.reachProjectCreatorsIncrease" />
</div>
</div>
<div className="reach-datapoint">
<img className="comment-viz" src="/images/annual-report/2020/data/Comments-visualization.svg" />
<div className="reach-datapoint increase">
<FormattedMessage
id="annualReport.reachIncreaseInCommentsNumber"
/>
@ -572,7 +565,23 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.reachComments" />
</h4>
<div className="bubble">
<FormattedMessage id="annualReport.reachIncreaseInCommentsIncrease" />
<FormattedMessage
id="annualReport.reachIncreaseInCommentsOld"
values={{
million: (
<FormattedMessage id="annualReport.reachMillion" />
)
}}
/>
<img src="/images/annual-report/2020/Symbols-UI/Arrow_Next.svg" />
<FormattedMessage
id="annualReport.reachIncreaseInCommentsIncrease"
values={{
million: (
<FormattedMessage id="annualReport.reachMillion" />
)
}}
/>
</div>
</div>
</div>

53
src/views/annual-report/2020/index/annual-report.scss
View file

@ -85,6 +85,8 @@ p {
}
.masthead {
padding-top: 50px;
p {
font-size: 1.25rem;
line-height: 2rem;
@ -93,7 +95,7 @@ p {
@media #{$big} {
.masthead-content {
max-width: 440px;
max-width: 500px;
text-align: left;
}
@ -113,6 +115,10 @@ p {
.masthead-content {
text-align: center;
}
img{
margin: 30px 0;
}
}
@media #{$intermediate} {
@ -135,7 +141,12 @@ p {
}
.wave-icon-desktop {
margin-left: 56px;
margin-left: -65px;
@media #{$intermediate} {
.masthead-content, img {
margin-left: 0px;
}
}
}
.message-content{
@ -613,6 +624,11 @@ p {
max-width: 900px;
text-align: center;
.hed{
max-width: 630px;
margin: auto;
}
p {
font-size: 1.5rem;
}
@ -656,11 +672,18 @@ p {
.bubble {
background-color: darken($ui-teal, 10%);
border-radius: 50px;
padding: 10px;
padding: 10px 15px;
font-size: 14px;
margin: 15px auto;
max-width: 170px;
display: flex;
justify-content: center;
align-items: center;
img{
margin: 0px 8px;
}
&.increase{
padding: 5px 5px;
span{
display: flex;
justify-content: center;
@ -796,6 +819,9 @@ p {
width: 286px;
text-align: center;
margin: 32px 0;
@media #{$medium-and-smaller} {
width: 203px;
}
.million {
font-size: 2rem;
@ -803,9 +829,18 @@ p {
margin-bottom: 16px;
}
&.increase{
@media #{$intermediate-and-smaller} {
margin: -355px 0 0 187px;
}
@media #{$medium-and-smaller} {
margin: -315px 0 0 180px;
}
}
@media #{$small} {
font-size: 2.75rem;
width: 140px;
width: 300px;
.million {
font-size: 1.5rem;
@ -815,6 +850,16 @@ p {
font-size: 1rem;
line-height: 1.125rem;
}
&.increase{
margin: -60px 0 0 0;
}
}
}
img.comment-viz{
@media #{$intermediate-and-smaller} {
max-width: 100%;
width: 100%;
}
}

3
src/views/annual-report/2020/index/l10n.json
View file

@ -48,7 +48,8 @@
"annualReport.reachProjectCreatorsNumber": "29 {million}",
"annualReport.reachProjectCreatorsIncrease": "44% from 2019",
"annualReport.reachIncreaseInCommentsNumber": "217%",
"annualReport.reachIncreaseInCommentsIncrease": "48 {million} > 50 {million}",
"annualReport.reachIncreaseInCommentsOld": "48 {million}",
"annualReport.reachIncreaseInCommentsIncrease": "150 {million}",
"annualReport.reachNewUsers": "New Users",
"annualReport.reachProjectsCreated": "Projects Created",
"annualReport.reachProjectCreators": "People Creating Projects",

0
static/images/annual-report/2020/data/Comments visualization.svg → static/images/annual-report/2020/data/Comments-visualization.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB