mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-23 19:30:34 -04:00
items in for adapation
This commit is contained in:
caseymm
parent
2d86753907
commit
19e65e9f0e
7 changed files with 16216 additions and 30 deletions
package.json
src
components/annual-report-example
views/annual-report/2020/index
static/images/annual-report/2020/adaptation
yarn.lock|
|
@ -57,6 +57,7 @@
|
|||
"lodash.get": "^4.4.2",
|
||||
"react-helmet": "5.2.0",
|
||||
"react-router-dom": "5.2.0",
|
||||
"react-twitter-embed": "^3.0.3",
|
||||
"scratch-parser": "5.0.0",
|
||||
"scratch-storage": "0.5.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
const classNames = require('classnames');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
const VideoPreview = require('../video-preview/video-preview.jsx');
|
||||
|
||||
|
||||
require('./annual-report-example.scss');
|
||||
|
|
@ -9,7 +10,18 @@ const AnnualReportExample = props => (
|
|||
<div className={classNames('annual-report-example', props.className)}>
|
||||
{props.className === 'regular' &&
|
||||
<div className="half">
|
||||
{props.type === 'video' &&
|
||||
<VideoPreview
|
||||
thumbnail={props.large_image}
|
||||
thumbnailWidth="300"
|
||||
videoHeight="216"
|
||||
videoId={props.video_id}
|
||||
videoWidth="380"
|
||||
/>
|
||||
}
|
||||
{props.type !== 'video' &&
|
||||
<img className="large" src={props.large_image} />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div className="half">
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ const People = require('./people.json');
|
|||
const BLMProjects = require('./blm-projects.json');
|
||||
const VideoPreview = require('../../../../components/video-preview/video-preview.jsx');
|
||||
const Supporters = require('./supporters.json');
|
||||
import { TwitterTweetEmbed } from 'react-twitter-embed';
|
||||
|
||||
|
||||
require('./annual-report.scss');
|
||||
|
||||
|
|
@ -887,10 +889,50 @@ class AnnualReport extends React.Component {
|
|||
<p className="bold">
|
||||
<FormattedMessage id="annualReport.connectivityWorldSubtitle" />
|
||||
</p>
|
||||
<a className="video" href="https://scratch.wistia.com/medias/rlsjbx0st4">
|
||||
<img src="/images/annual-report/2020/connectivity/Scratch Around the World Video.svg" />
|
||||
</a>
|
||||
</div>
|
||||
{/* <div className="big-video"> */}
|
||||
<div className="video-container">
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2020/connectivity/Scratch Around the World Video.svg"
|
||||
thumbnailWidth="1000"
|
||||
videoHeight="450"
|
||||
videoId="rlsjbx0st4"
|
||||
videoWidth="700"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2020/connectivity/Scratch Around the World Video.svg"
|
||||
thumbnailWidth="800"
|
||||
videoHeight="320"
|
||||
videoId="rlsjbx0st4"
|
||||
videoWidth="568"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2020/connectivity/Scratch Around the World Video.svg"
|
||||
thumbnailWidth="500"
|
||||
videoHeight="216"
|
||||
videoId="rlsjbx0st4"
|
||||
videoWidth="380"
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
<div className="flex-content">
|
||||
<CountryBlurb
|
||||
className="reverse"
|
||||
|
|
@ -973,6 +1015,7 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample1Paragraph'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/connectivity/TutorialUI.svg"
|
||||
/>
|
||||
<AnnualReportExample
|
||||
|
|
@ -983,6 +1026,8 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample2Paragraph'}
|
||||
)}
|
||||
type="video"
|
||||
video_id="xfh9bvbeik"
|
||||
large_image="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
|
||||
/>
|
||||
<AnnualReportExample
|
||||
|
|
@ -993,6 +1038,7 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample3Paragraph'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1061,6 +1107,7 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.adaptationHighlightText2'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/adaptation/Aaron Reuland - Class Projects 1.png"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1075,8 +1122,115 @@ class AnnualReport extends React.Component {
|
|||
<FormattedMessage id="annualReport.adaptationHighlightText2b" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="world">
|
||||
<h4>
|
||||
<FormattedMessage id="annualReport.adaptationHighlightTitle3" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.adaptationHighlightText3b" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="video-container">
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2020/adaptation/Create-along video.svg"
|
||||
thumbnailWidth="1000"
|
||||
videoHeight="320"
|
||||
videoId="IGDCZGfj_cQ"
|
||||
videoWidth="568"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery
|
||||
maxWidth={frameless.tabletPortrait - 1}
|
||||
minWidth={frameless.mobile}
|
||||
>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2020/adaptation/Create-along video.svg"
|
||||
thumbnailWidth="800"
|
||||
videoHeight="320"
|
||||
videoId="IGDCZGfj_cQ"
|
||||
videoWidth="568"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/2020/adaptation/Create-along video.svg"
|
||||
thumbnailWidth="500"
|
||||
videoHeight="216"
|
||||
videoId="IGDCZGfj_cQ"
|
||||
videoWidth="380"
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
|
||||
<div className="flex-content">
|
||||
<AnnualReportExample
|
||||
className="regular"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.adaptationHighlightTitle4'}
|
||||
)}
|
||||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.adaptationHighlightText4b'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/adaptation/hackyourwindow_gif.gif"
|
||||
/>
|
||||
</div>
|
||||
<div className="left-align">
|
||||
<h5><FormattedMessage id="annualReport.adaptationEducatorsTitle" /></h5>
|
||||
<p><FormattedMessage id="annualReport.adaptationEducatorsText" /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tweet-container">
|
||||
<div className="tweets">
|
||||
<TwitterTweetEmbed
|
||||
tweetId={'1247966777503551489'}
|
||||
/>
|
||||
<TwitterTweetEmbed
|
||||
tweetId={'1247968609806229505'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inner">
|
||||
<div className="snapshot bubble adaptation">
|
||||
<FormattedMessage id="annualReport.adaptationSnapshot" />
|
||||
</div>
|
||||
<div className="flex-content lg">
|
||||
<AnnualReportExample
|
||||
className="regular"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.adaptationSnapshot1Title'}
|
||||
)}
|
||||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.adaptationSnapshot1Text'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/adaptation/Computer Clubhouse Illustration.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-content lg">
|
||||
<AnnualReportExample
|
||||
className="reverse"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.adaptationSnapshot2Title'}
|
||||
)}
|
||||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.adaptationSnapshot2Text'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/adaptation/BYIS Graphic.svg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="subsection-tag">
|
||||
<FormattedMessage id="annualReport.communitySpotlight" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -839,13 +839,24 @@ p {
|
|||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.connectivity{
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
&.adaptation{
|
||||
background-color: $ui-aqua;
|
||||
}
|
||||
&.snapshot{
|
||||
&:before{
|
||||
content: '';
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
&.connectivity{
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
&.adaptation{
|
||||
background-color: $ui-aqua;
|
||||
}
|
||||
}
|
||||
|
||||
.reach-datapoint {
|
||||
|
|
@ -1277,23 +1288,6 @@ img.comment-viz{
|
|||
.bubble{
|
||||
margin-left: auto;
|
||||
}
|
||||
a.video{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
// width: 170%;
|
||||
// overflow: hidden;
|
||||
margin-left: -35%;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
width: 170%;
|
||||
overflow: hidden;
|
||||
// margin-left: -35%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.resources{
|
||||
max-width: 600px;
|
||||
|
|
@ -1336,6 +1330,12 @@ img.comment-viz{
|
|||
max-width: 370px;
|
||||
}
|
||||
}
|
||||
&.lg{
|
||||
h5{
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.extending-reach {
|
||||
|
|
@ -1360,6 +1360,11 @@ img.comment-viz{
|
|||
.world{
|
||||
max-width: 700px;
|
||||
}
|
||||
.left-align{
|
||||
max-width: 700px;
|
||||
text-align: left;
|
||||
margin: 50px 0;
|
||||
}
|
||||
.community-hero-img {
|
||||
width: 100%;
|
||||
height: 545px;
|
||||
|
|
@ -1644,13 +1649,34 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
.video-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
// height: 500px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
// margin-bottom: 72px;
|
||||
}
|
||||
|
||||
margin-bottom: 72px;
|
||||
.tweet-container{
|
||||
background-image: url("/images/annual-report/2020/adaptation/tweet-bg.svg");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat:no-repeat;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
.tweets{
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
justify-content: space-around;
|
||||
align-items:flex-start;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-background {
|
||||
|
|
|
|||
|
|
@ -138,6 +138,22 @@
|
|||
"annualReport.adaptationHighlightTitle2": "Scratch at Home",
|
||||
"annualReport.adaptationHighlightText2b": "On March 17, we responded to the COVID-19 crisis by launching the #ScratchAtHome initiative to provide children, families, and educators with ideas for engaging in creative learning activities with Scratch at home. It was an invaluable way to connect with our community and adapt to a whole new way of learning and interacting online.",
|
||||
|
||||
"annualReport.adaptationHighlightTitle3": "Live Create-Alongs",
|
||||
"annualReport.adaptationHighlightText3b": "Our team hosted weekly, live Create-Alongs to connect with kids, parents, and educators at home and share tips and tricks for creating different types of Scratch projects. We had a blast seeing the projects they were inspired to create in our Create-Along studios!",
|
||||
|
||||
"annualReport.adaptationHighlightTitle4": "Hack Your Window",
|
||||
"annualReport.adaptationHighlightText4b": "Scratch educator Eduard Muntaner Perich created a #ScratchAtHome-inspired studio that took the community by storm: Hack Your Window. Hundreds of Scratchers from all over the world imagined fantastical games and stories happening just outside their window.",
|
||||
|
||||
"annualReport.adaptationEducatorsTitle": "Connecting with Educators",
|
||||
"annualReport.adaptationEducatorsText": "Educators around the world shared their own #ScratchAtHome ideas and discussed the struggles and triumphs of teaching remotely in a lively Twitter Chat on April 8th, 2020.",
|
||||
|
||||
"annualReport.adaptationSnapshot": "Snapshots",
|
||||
|
||||
"annualReport.adaptationSnapshot1Title": "Computer Clubhouse Network Virtual Workshops",
|
||||
"annualReport.adaptationSnapshot1Text": "As part of our longstanding partnership, the Scratch Team conducts workshops for youth educators from The Clubhouse Network. Like educators around the world, our team had to conduct online workshops for the first time in 2020—and learn how to combat the isolation and technical difficulties of virtual learning. But thanks to online collaboration tools and innovative methods of sharing and reflecting, the team was able to recreate the collaborative, playful spirit of in-person workshops in a virtual space.",
|
||||
"annualReport.adaptationSnapshot2Title": "Bring Yourself Into Scratch",
|
||||
"annualReport.adaptationSnapshot2Text": "2020 was also a year of adapting our tools and platform. We developed and added new sprites to the Sprite Library to inspire and enable beginner Scratchers to make projects representative of their racial, cultural, gender, or other personal identity.",
|
||||
|
||||
"annualReport.schoolsIntro": "We provide programs and resources to support teachers and students in schools around the world, designed to achieve equity in creative computing experiences, based on projects, passion, peers, and play.",
|
||||
"annualReport.schoolsSpotlight": "Schools — Spotlight Story",
|
||||
"annualReport.cpsProjectTitle": "Creative Computing in Chicago Public Schools",
|
||||
|
|
|
|||
3
static/images/annual-report/2020/adaptation/tweet-bg.svg
Normal file
3
static/images/annual-report/2020/adaptation/tweet-bg.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="940" height="482" viewBox="0 0 940 482" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.15" d="M940 245.987C940 390.104 773.509 516.17 472.577 473.613C171.646 431.057 -35.8005 479.552 5.15468 245.987C46.1099 12.4213 173.872 68.8341 472.577 12.4213C771.283 -43.9915 940 101.87 940 245.987Z" fill="#0FBD8C"/>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 343 B |
Loading…
Add table
Reference in a new issue