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

video buttons

Browse source
This commit is contained in:
caseymm 2021-10-18 13:32:00 -07:00
parent 754510832c
commit 0ed82b35c8
20 changed files with 90 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/annual-report-example/annual-report-example.jsx → src/components/text-and-media-snippet/text-and-media-snippet.jsx
View file

@ -3,14 +3,15 @@ const PropTypes = require('prop-types');
const React = require('react');
const VideoPreview = require('../video-preview/video-preview.jsx');
require('./annual-report-example.scss');
require('./text-and-media-snippet.scss');
const AnnualReportExample = props => (
const TextAndMediaSnippet = props => (
<div className={classNames('annual-report-example', props.className)}>
{props.className === 'regular' &&
<div className="half">
{props.type === 'video' &&
<VideoPreview
buttonMessage=''
thumbnail={props.large_image}
thumbnailWidth="300"
videoHeight="216"
@ -49,7 +50,7 @@ const AnnualReportExample = props => (
</div>
);
AnnualReportExample.propTypes = {
TextAndMediaSnippet.propTypes = {
title: PropTypes.string,
paragraph: PropTypes.string,
large_image: PropTypes.string,
@ -58,4 +59,4 @@ AnnualReportExample.propTypes = {
type: PropTypes.string
};
module.exports = AnnualReportExample;
module.exports = TextAndMediaSnippet;

0
src/components/annual-report-example/annual-report-example.scss → src/components/text-and-media-snippet/text-and-media-snippet.scss
View file

1
src/components/timeline-card/timeline-card.jsx
View file

@ -14,6 +14,7 @@ const TimelineCard = props => (
<p>{props.text}</p>
{props.videoId &&
<VideoPreview
buttonMessage=''
thumbnail={props.image}
thumbnailWidth="300"
videoHeight="216"

14
src/components/video-preview/video-preview.jsx
View file

@ -65,13 +65,15 @@ class VideoPreview extends React.Component {
height: `${this.props.thumbnailHeight}px` || 'auto'
}}
/>
<a
{this.props.buttonMessage.length > 0 &&
<a
onClick={this.handleShowVideo}
>
<div className="button">
{this.props.buttonMessage}
</div>
</a>
>
<div className="button">
{this.props.buttonMessage}
</div>
</a>
}
</div>
)
}

4
src/components/world-map/world-map.jsx
View file

@ -84,8 +84,8 @@ WorldMap.propTypes = {
colorIndex: PropTypes.arrayOf(PropTypes.number),
countryData: PropTypes.arrayOf(PropTypes.number),
countryNames: PropTypes.arrayOf(PropTypes.string),
minColor: PropTypes.arrayOf(PropTypes.string),
maxColor: PropTypes.arrayOf(PropTypes.string)
minColor: PropTypes.string,
maxColor: PropTypes.string
};
module.exports = WorldMap;

12
src/routes.json
View file

@ -8,17 +8,23 @@
},
{
"name": "annual-report",
"pattern": "^/annual-report/?(\\?.*)?$",
"routeAlias": "/annual-report/?$",
"redirect": "/annual-report/2019"
},
{
"name": "annual-report-2019",
"pattern": "^/annual-report/2019/?(\\?.*)?$",
"routeAlias": "/annual-report/2019/?$",
"view": "annual-report/2019/index/annual-report",
"title": "Annual Report",
"view": "annual-report/2019/annual-report",
"title": "Annual Report 2019",
"viewportWidth": "device-width"
},
{
"name": "annual-report-2020",
"pattern": "^/annual-report/2020/?(\\?.*)?$",
"routeAlias": "/annual-report/2020/?$",
"view": "annual-report/2020/index/annual-report",
"view": "annual-report/2020/annual-report",
"title": "Annual Report 2020",
"viewportWidth": "device-width"
},

22
src/views/annual-report/2019/index/annual-report.jsx → src/views/annual-report/2019/annual-report.jsx
View file

@ -6,21 +6,21 @@ const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const render = require('../../../../lib/render.jsx');
const frameless = require('../../../../lib/frameless');
const render = require('../../../lib/render.jsx');
const frameless = require('../../../lib/frameless');
const Avatar = require('../../../../components/avatar/avatar.jsx');
const Page = require('../../../../components/page/www/page.jsx');
const Grid = require('../../../../components/grid/grid.jsx');
const Button = require('../../../../components/forms/button.jsx');
const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
const Comment = require('../../../../components/comment/comment.jsx');
const WorldMap = require('../../../../components/world-map/world-map.jsx');
const Avatar = require('../../../components/avatar/avatar.jsx');
const Page = require('../../../components/page/www/page.jsx');
const Grid = require('../../../components/grid/grid.jsx');
const Button = require('../../../components/forms/button.jsx');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const Comment = require('../../../components/comment/comment.jsx');
const WorldMap = require('../../../components/world-map/world-map.jsx');
const CountryUsage = require('./country-usage.json');
const PeopleGrid = require('../../../../components/people-grid/people-grid.jsx');
const PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
const People = require('./people.json');
const BLMProjects = require('./blm-projects.json');
const VideoPreview = require('../../../../components/video-preview/video-preview.jsx');
const VideoPreview = require('../../../components/video-preview/video-preview.jsx');
const Supporters = require('./supporters.json');
require('./annual-report.scss');

4
src/views/annual-report/2019/index/annual-report.scss → src/views/annual-report/2019/annual-report.scss
View file

@ -1,5 +1,5 @@
@import "../../../../colors";
@import "../../../../frameless";
@import "../../../colors";
@import "../../../frameless";
$base-bg: $ui-white;

0
src/views/annual-report/2019/index/blm-projects.json → src/views/annual-report/2019/blm-projects.json
View file

0
src/views/annual-report/2019/index/country-usage.json → src/views/annual-report/2019/country-usage.json
View file

0
src/views/annual-report/2019/index/l10n.json → src/views/annual-report/2019/l10n.json
View file

0
src/views/annual-report/2019/index/people.json → src/views/annual-report/2019/people.json
View file

0
src/views/annual-report/2019/index/supporters.json → src/views/annual-report/2019/supporters.json
View file

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

@ -6,24 +6,24 @@ const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const render = require('../../../../lib/render.jsx');
const frameless = require('../../../../lib/frameless');
const render = require('../../../lib/render.jsx');
const frameless = require('../../../lib/frameless');
const Avatar = require('../../../../components/avatar/avatar.jsx');
const Page = require('../../../../components/page/www/page.jsx');
const Grid = require('../../../../components/grid/grid.jsx');
const Button = require('../../../../components/forms/button.jsx');
const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
const Comment = require('../../../../components/comment/comment.jsx');
const CountryBlurb = require('../../../../components/country-blurb/country-blurb.jsx');
const AnnualReportExample = require('../../../../components/annual-report-example/annual-report-example.jsx');
const TimelineCard = require('../../../../components/timeline-card/timeline-card.jsx');
const WorldMap = require('../../../../components/world-map/world-map.jsx');
const Avatar = require('../../../components/avatar/avatar.jsx');
const Page = require('../../../components/page/www/page.jsx');
const Grid = require('../../../components/grid/grid.jsx');
const Button = require('../../../components/forms/button.jsx');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const Comment = require('../../../components/comment/comment.jsx');
const CountryBlurb = require('../../../components/country-blurb/country-blurb.jsx');
const TextAndMediaSnippet = require('../../../components/text-and-media-snippet/text-and-media-snippet.jsx');
const TimelineCard = require('../../../components/timeline-card/timeline-card.jsx');
const WorldMap = require('../../../components/world-map/world-map.jsx');
const CountryUsage = require('./country-usage.json');
const IndiaProjects = require('./india-projects.json');
const PeopleGrid = require('../../../../components/people-grid/people-grid.jsx');
const PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
const People = require('./people.json');
const VideoPreview = require('../../../../components/video-preview/video-preview.jsx');
const VideoPreview = require('../../../components/video-preview/video-preview.jsx');
const Supporters = require('./supporters.json');
import {TwitterTweetEmbed} from 'react-twitter-embed';
@ -1053,7 +1053,7 @@ class AnnualReport extends React.Component {
</p>
</div>
<div className="flex-content">
<AnnualReportExample
<TextAndMediaSnippet
className="reverse"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityExample1Title'}
@ -1064,7 +1064,7 @@ class AnnualReport extends React.Component {
type="image"
large_image="/images/annual-report/2020/connectivity/TutorialUI.svg"
/>
<AnnualReportExample
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityExample2Title'}
@ -1076,7 +1076,7 @@ class AnnualReport extends React.Component {
video_id="xfh9bvbeik"
large_image="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
/>
<AnnualReportExample
<TextAndMediaSnippet
className="full-width"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityExample3Title'}
@ -1152,7 +1152,7 @@ class AnnualReport extends React.Component {
<div className="half">
<iframe
src="https://scratch.mit.edu/projects/389148460/embed"
allowTransparency="true"
allowtransparency="true"
width="375"
height="310"
frameBorder="0"
@ -1184,7 +1184,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.adaptationHighlightText3b" />
</p>
</div>
<div className="video-container">
<div className="video-container themes">
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
buttonMessage={
@ -1227,7 +1227,7 @@ class AnnualReport extends React.Component {
</div>
<div className="flex-content">
<AnnualReportExample
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.adaptationHighlightTitle4'}
@ -1259,7 +1259,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.adaptationSnapshot" />
</div>
<div className="flex-content lg">
<AnnualReportExample
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.adaptationSnapshot1Title'}
@ -1272,7 +1272,7 @@ class AnnualReport extends React.Component {
/>
</div>
<div className="flex-content lg">
<AnnualReportExample
<TextAndMediaSnippet
className="reverse"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.adaptationSnapshot2Title'}
@ -1322,7 +1322,7 @@ class AnnualReport extends React.Component {
<div className="iframe-holder">
<iframe
src="https://scratch.mit.edu/projects/412126066/embed"
allowTransparency="true"
allowtransparency="true"
width="485"
height="402"
frameBorder="0"

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

@ -1,5 +1,5 @@
@import "../../../../colors";
@import "../../../../frameless";
@import "../../../colors";
@import "../../../frameless";
$base-bg: $ui-white;
@ -1585,12 +1585,38 @@ img.comment-viz{
.video-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
}
.video-thumbnail .button{
top: -113px;
font-size: 15px;
position: relative;
border-radius: 3px;
@media #{$medium}{
top: -99px;
}
@media #{$small}{
top: -107px;
top: -74px;
font-size: 12px;
}
}
.themes .video-thumbnail .button{
top: -119px;
@media #{$medium}{
top: -107px;
}
@media #{$small}{
top: -105px;
top: -74px;
font-size: 12px;
}
}
.tweet-container{
background-image: url("/images/annual-report/2020/adaptation/tweet-bg.svg");
background-size: contain;

0
src/views/annual-report/2020/index/country-usage.json → src/views/annual-report/2020/country-usage.json
View file

0
src/views/annual-report/2020/index/india-projects.json → src/views/annual-report/2020/india-projects.json
View file

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

0
src/views/annual-report/2020/index/people.json → src/views/annual-report/2020/people.json
View file

0
src/views/annual-report/2020/index/supporters.json → src/views/annual-report/2020/supporters.json
View file