scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #6206 from bocoup/annual-report-2020

Browse source 
Annual report 2020
This commit is contained in:
Karishma Chadha 2021-10-26 18:18:44 -04:00 committed by GitHub
commit 2916d7e4cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 154 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/text-and-media-snippet/text-and-media-snippet.jsx
View file

@ -13,8 +13,8 @@ const TextAndMediaSnippet = props => (
<VideoPreview <VideoPreview
buttonMessage="" buttonMessage=""
thumbnail={props.largeImage} thumbnail={props.largeImage}
thumbnailWidth="300" thumbnailWidth="320"
videoHeight="216" videoHeight="230"
videoId={props.videoId} videoId={props.videoId}
videoWidth="380" videoWidth="380"
alt={props.alt} alt={props.alt}

11
src/components/text-and-media-snippet/text-and-media-snippet.scss
View file

@ -17,11 +17,20 @@
} }
} }
.half{ .half{
max-width: 330px; max-width: 360px;
width: 100%; width: 100%;
@media #{$intermediate-and-smaller} {
max-width: 430px;
width: 100%;
margin-bottom: 20px;
}
img.large{ img.large{
max-width: 350px; max-width: 350px;
width: 100%; width: 100%;
@media #{$intermediate-and-smaller} {
max-width: 430px;
width: 100%;
}
} }
} }
p{ p{

60
src/views/annual-report/2020/annual-report.jsx
View file

@ -918,7 +918,7 @@ class AnnualReport extends React.Component {
<div className="inner"> <div className="inner">
<div className="content"> <div className="content">
<div className="text"> <div className="text">
<div className="spotlight bubble connectivity"> <div className="spotlight bubble connectivity india">
<FormattedMessage id="annualReport.2020.spotlightStory" /> <FormattedMessage id="annualReport.2020.spotlightStory" />
</div> </div>
<h2> <h2>
@ -1302,7 +1302,7 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
<div className="community-quotes"> <div className="community-quotes">
<div className="community-quote"> <div className="community-quote single">
<div className="quote-person"> <div className="quote-person">
<Avatar <Avatar
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})} alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})}
@ -1327,11 +1327,11 @@ class AnnualReport extends React.Component {
<div className="initiatives-subsection-content"> <div className="initiatives-subsection-content">
{/* eslint-disable max-len */} {/* eslint-disable max-len */}
<div className="inner"> <div className="inner">
<div className="content flex-content">
<div className="text">
<div className="spotlight bubble adaptation"> <div className="spotlight bubble adaptation">
<FormattedMessage id="annualReport.2020.spotlightStory" /> <FormattedMessage id="annualReport.2020.spotlightStory" />
</div> </div>
<div className="content flex-content aaron">
<div className="text">
<h2> <h2>
<FormattedMessage id="annualReport.2020.adaptationHighlightName" /> <FormattedMessage id="annualReport.2020.adaptationHighlightName" />
</h2> </h2>
@ -1354,15 +1354,44 @@ class AnnualReport extends React.Component {
<div className="flex-content"> <div className="flex-content">
<div className="text-and-media-snippet regular between"> <div className="text-and-media-snippet regular between">
<div className="half"> <div className="half">
<MediaQuery
minWidth={frameless.desktop}
>
<iframe <iframe
src="https://scratch.mit.edu/projects/389148460/embed" src="https://scratch.mit.edu/projects/389148460/embed"
allowTransparency="true" allowTransparency="true"
width="375" width="360"
height="310" height={((360 * .76) + 45)}
frameBorder="0" frameBorder="0"
scrolling="no" scrolling="no"
allowFullScreen allowFullScreen
/> />
</MediaQuery>
<MediaQuery
maxWidth={frameless.desktop - 1}
minWidth={frameless.mobile}
>
<iframe
src="https://scratch.mit.edu/projects/389148460/embed"
allowTransparency="true"
width="430"
height={((430 * .76) + 45)}
frameBorder="0"
scrolling="no"
allowFullScreen
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<iframe
src="https://scratch.mit.edu/projects/389148460/embed"
allowTransparency="true"
width="300"
height={((300 * .76) + 45)}
frameBorder="0"
scrolling="no"
allowFullScreen
/>
</MediaQuery>
</div> </div>
<div className="half"> <div className="half">
<p> <p>
@ -1594,15 +1623,30 @@ class AnnualReport extends React.Component {
/> />
</div> </div>
<div className="iframe-holder"> <div className="iframe-holder">
<MediaQuery
minWidth={frameless.mobile}
>
<iframe <iframe
src="https://scratch.mit.edu/projects/412126066/embed" src="https://scratch.mit.edu/projects/412126066/embed"
allowTransparency="true" allowTransparency="true"
width="485" width="480"
height="402" height={((480 * .76) + 45)}
frameBorder="0" frameBorder="0"
scrolling="no" scrolling="no"
allowFullScreen allowFullScreen
/> />
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<iframe
src="https://scratch.mit.edu/projects/412126066/embed"
allowTransparency="true"
width="300"
height={((300 * .76) + 45)}
frameBorder="0"
scrolling="no"
allowFullScreen
/>
</MediaQuery>
<p> <p>
<FormattedMessage id="annualReport.2020.projectBy" /> u/STORMPRIMEX <FormattedMessage id="annualReport.2020.projectBy" /> u/STORMPRIMEX
</p> </p>

89
src/views/annual-report/2020/annual-report.scss
View file

@ -643,10 +643,10 @@ a, a:link, a:visited, a:active{
.reach-translation-intro { .reach-translation-intro {
max-width: 300px; max-width: 300px;
h3 {
max-width: 280px;
} }
img {
max-width: 380px;
} }
.inline{ .inline{
@ -655,11 +655,10 @@ a, a:link, a:visited, a:active{
margin-top: 10px; margin-top: 10px;
img{ img{
margin-right: 6px; margin-right: 6px;
@media #{$intermediate-and-smaller} {
max-width: 30px;
} }
} }
img {
max-width: 380px;
} }
@media #{$small} { @media #{$small} {
@ -671,21 +670,18 @@ a, a:link, a:visited, a:active{
.inner { .inner {
max-width: 620px; max-width: 620px;
} }
.inline{
.reach-translation { justify-content: center;
text-align: left; }
.reach-translation, .reach-translation-intro {
flex-direction: column;
justify-content: center;
text-align: center;
img { img {
width: 300px; width: 300px;
} }
} }
} }
@media #{$medium-and-smaller} {
.reach-translation {
text-align: center;
justify-content: center;
}
}
} }
.bubble { .bubble {
@ -760,6 +756,7 @@ a, a:link, a:visited, a:active{
} }
&.adaptation{ &.adaptation{
background-color: $annual-report-aqua; background-color: $annual-report-aqua;
padding: 10px 13px;
} }
} }
@ -1165,6 +1162,15 @@ img.comment-viz{
@media #{$intermediate} { @media #{$intermediate} {
margin-left: auto; margin-left: auto;
} }
&.spotlight{
margin-left: 50px;
@media #{$intermediate-and-smaller}{
margin: auto;
}
&.india{
margin: 0 auto 20px;
}
}
&.inverted{ &.inverted{
border: 2.5px solid $ui-purple-dark; border: 2.5px solid $ui-purple-dark;
background-color: $ui-white; background-color: $ui-white;
@ -1237,6 +1243,13 @@ img.comment-viz{
max-width: 480px; max-width: 480px;
width: 100%; width: 100%;
} }
.images{
max-width: 350px;
width: 100%;
img{
width: 100%;
}
}
} }
.flex-content{ .flex-content{
@ -1246,14 +1259,24 @@ img.comment-viz{
text-align: left; text-align: left;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
&.aaron{
flex-direction: column-reverse;
}
} }
&.split{ &.split{
&.content{ &.content{
.text{ .text{
max-width: 420px; max-width: 420px;
width: 100%;
} }
img{ .images{
max-width: 350px; max-width: 350px;
width: 100%;
img{
width: 100%;
}
} }
} }
} }
@ -1261,6 +1284,14 @@ img.comment-viz{
justify-content: space-between; justify-content: space-between;
.text{ .text{
max-width: 370px; max-width: 370px;
width: 100%;
}
.images{
max-width: 350px;
width: 100%;
img{
width: 100%;
}
} }
} }
&.lg{ &.lg{
@ -1371,11 +1402,21 @@ img.comment-viz{
} }
} }
.world{
h2{
line-height: 1.5;
margin-top: 20px;
}
}
.initiatives-adaptation, .initiatives-community { .initiatives-adaptation, .initiatives-community {
.world{ .world{
max-width: 600px; max-width: 600px;
margin: 50px auto; margin: 50px auto;
@media #{$intermediate-and-smaller} {
width: calc(100% - 30px);
padding: 0 15px;
}
} }
.left-align{ .left-align{
max-width: 700px; max-width: 700px;
@ -1726,6 +1767,9 @@ img.comment-viz{
margin-top: 0px; margin-top: 0px;
flex-direction: column; flex-direction: column;
} }
@media #{$small}{
background-size: auto;
}
.tweets{ .tweets{
max-width: 600px; max-width: 600px;
width: 100%; width: 100%;
@ -1735,6 +1779,8 @@ img.comment-viz{
align-items:flex-start; align-items:flex-start;
@media #{$small} { @media #{$small} {
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
} }
.twitter-tweet{ .twitter-tweet{
width: 100%; width: 100%;
@ -1747,6 +1793,9 @@ img.comment-viz{
.inner { .inner {
max-width: 940px; max-width: 940px;
padding: 80px 0; padding: 80px 0;
@media #{$intermediate}{
max-width: 700px;
}
} }
background-color: $header-gray; background-color: $header-gray;
@ -2340,3 +2389,9 @@ img.comment-viz{
position: relative; position: relative;
top: 58px; top: 58px;
} }
.regular.between{
@media #{$medium-and-smaller}{
margin-top: 0px;
}
}