scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

spinner color and correcting other errors

Browse source
This commit is contained in:
caseymm 2021-10-21 16:42:22 -07:00
parent 55ea8ea083
commit f8bdd8948b
6 changed files with 48 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,18 +12,19 @@ const TextAndMediaSnippet = props => (
{props.type === 'video' &&
<VideoPreview
buttonMessage=""
thumbnail={props.large_image}
thumbnail={props.largeImage}
thumbnailWidth="300"
videoHeight="216"
videoId={props.video_id}
videoId={props.videoId}
videoWidth="380"
alt={props.alt}
spinnerColor={props.spinnerColor}
/>
}
{props.type !== 'video' &&
<img
className="large"
src={props.large_image}
src={props.largeImage}
alt={props.alt}
/>
}
@ -47,7 +48,7 @@ const TextAndMediaSnippet = props => (
<div className="half">
<img
className="large"
src={props.large_image}
src={props.largeImage}
alt={props.alt}
/>
</div>
@ -56,7 +57,7 @@ const TextAndMediaSnippet = props => (
<div className="half">
<img
className="large"
src={props.large_image}
src={props.largeImage}
alt={props.alt}
/>
</div>
@ -67,14 +68,15 @@ const TextAndMediaSnippet = props => (
TextAndMediaSnippet.propTypes = {
title: PropTypes.string,
paragraph: PropTypes.string,
large_image: PropTypes.string,
largeImage: PropTypes.string,
className: PropTypes.string,
video_id: PropTypes.string,
videoId: PropTypes.string,
type: PropTypes.string,
alt: PropTypes.string,
link: PropTypes.string,
linkText: PropTypes.string,
paragraph2: PropTypes.string
paragraph2: PropTypes.string,
spinnerColor: PropTypes.string
};
module.exports = TextAndMediaSnippet;

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

@ -30,6 +30,7 @@ const TimelineCard = props => (
videoId={props.videoId}
videoWidth="380"
alt={props.alt}
spinnerColor={props.spinnerColor}
/>
}
{!props.videoId && props.image &&
@ -55,7 +56,8 @@ TimelineCard.propTypes = {
attribution: PropTypes.string,
className: PropTypes.string,
alt: PropTypes.string,
projectBy: PropTypes.string
projectBy: PropTypes.string,
spinnerColor: PropTypes.string
};
module.exports = TimelineCard;

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

@ -39,7 +39,12 @@ class VideoPreview extends React.Component {
{this.state.videoOpen ?
(
<div className="spinner-video-container">
{this.state.spinnerVisible ? <Spinner className="loading-spinner" /> : null}
{this.state.spinnerVisible ?
<Spinner
className="loading-spinner"
color={this.props.spinnerColor}
/> : null
}
<Video
className="video"
height={this.props.videoHeight}
@ -91,7 +96,8 @@ VideoPreview.propTypes = {
videoHeight: PropTypes.string,
videoId: PropTypes.string.isRequired,
videoWidth: PropTypes.string,
alt: PropTypes.string
alt: PropTypes.string,
spinnerColor: PropTypes.string
};
module.exports = VideoPreview;

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

@ -1130,7 +1130,7 @@ class AnnualReport extends React.Component {
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryChileTitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryChile'}
)}
@ -1143,7 +1143,7 @@ class AnnualReport extends React.Component {
paragraph={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryChileParagraph'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg"
largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg"
/>
<CountryBlurb
className="regular"
@ -1151,7 +1151,7 @@ class AnnualReport extends React.Component {
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryBrazilTitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryBrazil'}
)}
@ -1164,7 +1164,7 @@ class AnnualReport extends React.Component {
paragraph={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryBrazilParagraph'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil Creative Learning Network graphic.svg"
largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil Creative Learning Network graphic.svg"
/>
<CountryBlurb
className="reverse"
@ -1172,7 +1172,7 @@ class AnnualReport extends React.Component {
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryIndiaTitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryIndia'}
)}
@ -1189,7 +1189,7 @@ class AnnualReport extends React.Component {
linkText={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryIndiaParagraphLinkText'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance graphic.svg"
largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance graphic.svg"
/>
<CountryBlurb
className="regular"
@ -1197,7 +1197,7 @@ class AnnualReport extends React.Component {
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryUSATitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryUSA'}
)}
@ -1214,7 +1214,7 @@ class AnnualReport extends React.Component {
linkText={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryUSAParagraphLinkText'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg"
largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg"
/>
</div>
<div className="resources">
@ -1241,7 +1241,7 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altTutorial'}
)}
type="image"
large_image="/images/annual-report/2020/connectivity/TutorialUI.svg"
largeImage="/images/annual-report/2020/connectivity/TutorialUI.svg"
/>
<TextAndMediaSnippet
className="regular"
@ -1255,8 +1255,9 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altGettingStarted'}
)}
type="video"
video_id="xfh9bvbeik"
large_image="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
videoId="xfh9bvbeik"
largeImage="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
spinnerColor="blue"
/>
<TextAndMediaSnippet
className="full-width"
@ -1270,7 +1271,7 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altEditor'}
)}
type="image"
large_image="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
largeImage="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
/>
</div>
</div>
@ -1464,7 +1465,7 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altHackYourWindow'}
)}
type="image"
large_image="/images/annual-report/2020/adaptation/hackyourwindow_gif.gif"
largeImage="/images/annual-report/2020/adaptation/hackyourwindow_gif.gif"
/>
</div>
<div className="left-align">
@ -1506,7 +1507,7 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.adaptationSnapshot1TextC'}
)}
type="image"
large_image="/images/annual-report/2020/adaptation/Computer Clubhouse Illustration.svg"
largeImage="/images/annual-report/2020/adaptation/Computer Clubhouse Illustration.svg"
/>
</div>
<div className="flex-content lg">
@ -1522,7 +1523,7 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altImageBubbles'}
)}
type="image"
large_image="/images/annual-report/2020/adaptation/BYIS Graphic.svg"
largeImage="/images/annual-report/2020/adaptation/BYIS Graphic.svg"
/>
</div>
</div>
@ -1847,6 +1848,7 @@ class AnnualReport extends React.Component {
)}
image="/images/annual-report/2020/community/Timeline/Images/blmvideo.png"
videoId="r1pmlyylye"
spinnerColor="blue"
/>
<img
className="connector"

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

@ -1722,6 +1722,10 @@ img.comment-viz{
width: 100%;
max-width: 900px;
margin: -50px auto 0;
@media #{$intermediate-and-smaller} {
margin-top: 0px;
flex-direction: column;
}
.tweets{
max-width: 600px;
width: 100%;

12
src/views/annual-report/2020/country-blurb/country-blurb.jsx
View file

@ -5,7 +5,7 @@ const React = require('react');
require('./country-blurb.scss');
// Class names regular and reverse indicate whether the image should
// be placed on the right of left of the text in wider layouts.
// be placed on the right of left of the text in wider layouts.
// At smaller widths, the image will always be stacked on top.
// Because the right column would typically stack under the left
// I've named this class reverse since it is using flexbox reverse
@ -17,7 +17,7 @@ const CountryBlurb = props => (
<div className="half">
<img
className="large"
src={props.large_image}
src={props.largeImage}
alt={props.alt}
/>
</div>
@ -32,7 +32,7 @@ const CountryBlurb = props => (
<h5>{props.title}</h5>
<div className="location">
<img
src={props.list_icon}
src={props.listIcon}
alt="location icon"
/>
<span>{props.country}</span>
@ -50,7 +50,7 @@ const CountryBlurb = props => (
<div className="half">
<img
className="large"
src={props.large_image}
src={props.largeImage}
alt={props.alt}
/>
</div>
@ -61,11 +61,11 @@ const CountryBlurb = props => (
CountryBlurb.propTypes = {
icon: PropTypes.string,
title: PropTypes.string,
list_icon: PropTypes.string,
listIcon: PropTypes.string,
country: PropTypes.string,
paragraph: PropTypes.string,
className: PropTypes.string,
large_image: PropTypes.string,
largeImage: PropTypes.string,
alt: PropTypes.string,
iconAlt: PropTypes.string,
link: PropTypes.string,