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

Merge branch 'develop' into feature/color-contrast

Browse source
This commit is contained in:
Andy O'Neill 2023-06-13 10:41:20 -04:00
commit 1c396ddbb1
12 changed files with 193 additions and 26711 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26703
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -137,7 +137,7 @@
"sass": "1.49.7",
"sass-loader": "10.2.1",
"scratch-gui": "2.0.0-beta.5",
"scratch-l10n": "3.15.20230524032205",
"scratch-l10n": "3.15.20230612032227",
"selenium-webdriver": "4.1.0",
"slick-carousel": "1.6.0",
"style-loader": "0.12.3",

4
src/components/privacy-banner/privacy-banner.jsx
View file

@ -35,7 +35,7 @@ class PrivacyBanner extends React.Component {
handleCloseBanner () {
const opts = {
expires: new Date(new Date().setDate(new Date().getDate + 21)) // expires after 3 weeks
expires: new Date(new Date().setDate(new Date().getDate() + 21)) // expires after 3 weeks
};
this.setState({dismissedPrivacyBanner: true});
jar.set('scratchpolicyseen', true, opts);
@ -45,7 +45,7 @@ class PrivacyBanner extends React.Component {
const privacyPolicyLink = chunks => <a href="/privacy_policy">{chunks}</a>;
if (showBanner) {
return (
<aside>
<aside className="privacy-aside">
<TitleBanner className="privacy-banner">
<div className="privacy-banner-container">
<img

3
src/components/privacy-banner/privacy-banner.scss
View file

@ -1,6 +1,9 @@
@import "../../colors";
@import "../../frameless";
.privacy-aside {
position: sticky;
}
.privacy-banner {
display: flex;

19
src/template-config.js
View file

@ -28,6 +28,23 @@ module.exports = {
og_image_height: 860,
// Analytics & Monitoring
// ----------------------
// GA4 Measurement ID
// Looks like 'G-XXXXXXXX'
ga4_id: process.env.GA4_ID || '',
// Universal Analytics Property ID
// Looks like 'UA-99999999-9'
ga_tracker: process.env.GA_TRACKER || '',
gtm_id: process.env.GTM_ID || ''
// Google Tag Manager ID
// Looks like 'GTM-XXXXXXX'
gtm_id: process.env.GTM_ID || '',
// Google Tag Manager env & auth info for alterative GTM environments
// Looks like '&gtm_auth=0123456789abcdefghijklm&gtm_preview=env-00&gtm_cookies_win=x'
// Taken from the middle of: GTM -> Admin -> Environments -> (environment) -> Get Snippet
// Blank for production
gtm_env_auth: process.env.GTM_ENV_AUTH || ''
};

7
src/template.ejs
View file

@ -8,8 +8,9 @@
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<%- htmlWebpackPlugin.options.gtm_id %>');</script>
'https://www.googletagmanager.com/gtm.js?id='+i+dl+'<%= htmlWebpackPlugin.options.gtm_env_auth %>';
f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','<%- htmlWebpackPlugin.options.gtm_id %>');
</script>
<!-- End Google Tag Manager -->
<% } %>
@ -67,7 +68,7 @@
<body>
<% if (htmlWebpackPlugin.options.gtm_id) { %>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%- htmlWebpackPlugin.options.gtm_id %>" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%- htmlWebpackPlugin.options.gtm_id %><%= htmlWebpackPlugin.options.gtm_env_auth %>" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<% } %>
<noscript>

41
src/views/splash/features/features-banner.jsx Normal file
View file

@ -0,0 +1,41 @@
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
const thumbnail = require('./high-contrast-thumbnail.png');
require('./features-banner.scss');
const FORUM_URL = 'https://scratch.mit.edu/discuss/topic/689659/';
const FeaturesBanner = () => (
<TitleBanner className="feature-banner">
<FlexRow className="feature-container column">
<FlexRow className="feature-title-container">
<h1 className="feature-header">
<FormattedMessage id="featurebanner.highContrast.comingSoon" />
</h1>
<a
className="feature-learn-more feature-hideable button"
href={FORUM_URL}
>
<FormattedMessage id="featurebanner.highContrast.learnMore" />
</a>
</FlexRow>
<FlexRow className="feature-banner-images">
<a href={FORUM_URL}>
<FlexRow className="feature-banner-image column">
<img src={thumbnail} />
<div className="feature-image-text">
<FormattedMessage id="featurebanner.highContrast.forumTitle" />
</div>
</FlexRow>
</a>
</FlexRow>
</FlexRow>
</TitleBanner>
);
module.exports = FeaturesBanner;

90
src/views/splash/features/features-banner.scss Normal file
View file

@ -0,0 +1,90 @@
@import "../../../colors";
@import "../../../frameless";
.feature-banner {
display: flex;
position: relative;
background-color: $ui-aqua;
background-image: url("/images/hoc/bg-pattern.png");
background-size: cover;
padding: 0;
overflow: hidden;
justify-content: center;
.feature-container {
margin: auto;
width: $desktop;
justify-content: flex-start;
.feature-title-container {
margin: 1.5rem 0;
width: 100%;
justify-content: space-between;
}
}
.feature-banner-images {
display: flex;
width: $desktop;
justify-content: space-around;
margin-bottom: 3rem;
}
.feature-banner-image {
border: 2px solid $ui-aqua;
border-radius: 16px;
background-color: $ui-white;
width: $cols8;
height: 280px;
overflow: hidden;
box-sizing: border-box;
justify-content: flex-start;
img {
width: $cols8;
height: 205px;
object-fit: cover;
}
.feature-image-text {
margin: auto auto;
color: $ui-purple-dark;
font-size: 1rem;
font-weight: bold;
}
}
.feature-header{
color: $ui-white;
font-size: 2rem;
}
.feature-learn-more {
border-radius: 10px;
background-color: $ui-white;
padding: .75rem 1rem;
color: $ui-purple-dark;
font-size: .75rem;
font-weight: bold;
}
}
@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop) {
.feature-banner {
.feature-container {
width: $cols8;
}
.feature-banner-images {
width: $cols8;
}
.feature-banner-image {
width: $cols8;
}
}
.feature-hideable {
display: none;
}
}

BIN
src/views/splash/features/high-contrast-thumbnail.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

6
src/views/splash/l10n.json
View file

@ -56,5 +56,9 @@
"welcome.connect": "Connect with other Scratchers",
"activity.seeUpdates": "This is where you will see updates from Scratchers you follow",
"activity.checkOutScratchers": "Check out some Scratchers you might like to follow"
"activity.checkOutScratchers": "Check out some Scratchers you might like to follow",
"featurebanner.highContrast.comingSoon": "COMING SOON: Color Contrast in Scratch!",
"featurebanner.highContrast.forumTitle": "Block Color Settings and Site Updates",
"featurebanner.highContrast.learnMore": "Learn More"
}

11
src/views/splash/presentation.jsx
View file

@ -35,6 +35,7 @@ const ShareProjectMessage = require('./activity-rows/share-project.jsx');
const DonateBanner = require('./donate/donate-banner.jsx');
const HOCTopBanner = require('./hoc/top-banner.jsx');
const HOCMiddleBanner = require('./hoc/middle-banner.jsx');
const FeaturesBanner = require('./features/features-banner.jsx');
require('./splash.scss');
@ -383,6 +384,13 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
</MediaQuery>
)
}
{
this.props.shouldShowFeaturesBanner && (
<MediaQuery minWidth={frameless.tabletPortrait}>
<FeaturesBanner />
</MediaQuery>
)
}
{
this.props.shouldShowIntro && (
<Intro
@ -540,9 +548,10 @@ SplashPresentation.propTypes = {
sharedByFollowing: PropTypes.arrayOf(PropTypes.object),
shouldShowDonateBanner: PropTypes.bool.isRequired,
shouldShowEmailConfirmation: PropTypes.bool.isRequired,
shouldShowFeaturesBanner: PropTypes.bool.isRequired,
shouldShowHOCMiddleBanner: PropTypes.bool.isRequired,
shouldShowHOCTopBanner: PropTypes.bool.isRequired,
shouldShowIntro: PropTypes.bool.isRequired,
shouldShowHOCMiddleBanner: PropTypes.bool.isRequired,
shouldShowWelcome: PropTypes.bool.isRequired,
user: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
};

18
src/views/splash/splash.jsx
View file

@ -19,6 +19,9 @@ const SCRATCH_WEEK_START_TIME = 1621224000000; // 2021-05-17 00:00:00 -- No end
const HOC_START_TIME = 1668574800000; // 2022-11-16 00:00:00 GMT in ms
const HOC_END_TIME = 1670821200000; // 2022-12-12 00:00:00 GMT in ms
const FEATURES_START_TIME = 1687305600000; // 2023-06-21 00:00:00 GMT in ms
const FEATURES_END_TIME = 1688083200000; // 2023-06-30 00:00:00 GMT in ms
class Splash extends React.Component {
constructor (props) {
super(props);
@ -162,7 +165,8 @@ class Splash extends React.Component {
return (
this.props.sessionStatus === sessionActions.Status.FETCHED && // done fetching session
Object.keys(this.props.user).length === 0 && // no user session found
this.shouldShowHOCTopBanner() !== true
!this.shouldShowHOCTopBanner() &&
!this.shouldShowFeaturesBanner()
);
}
shouldShowDonateBanner () {
@ -173,11 +177,16 @@ class Splash extends React.Component {
Date.now() >= SCRATCH_WEEK_START_TIME
);
}
shouldShowFeaturesBanner () {
const now = Date.now();
return now >= FEATURES_START_TIME && now <= FEATURES_END_TIME;
}
render () {
const showEmailConfirmation = this.shouldShowEmailConfirmation() || false;
const showDonateBanner = this.shouldShowDonateBanner() || false;
const showHOCTopBanner = this.shouldShowHOCTopBanner() || false;
const showEmailConfirmation = this.shouldShowEmailConfirmation() || false;
const showFeaturesBanner = this.shouldShowFeaturesBanner();
const showHOCMiddleBanner = this.shouldShowHOCMiddleBanner() || false;
const showHOCTopBanner = this.shouldShowHOCTopBanner() || false;
const showIntro = this.shouldShowIntro() || false;
const showWelcome = this.shouldShowWelcome();
const homepageRefreshStatus = this.getHomepageRefreshStatus();
@ -197,9 +206,10 @@ class Splash extends React.Component {
sharedByFollowing={this.props.shared}
shouldShowDonateBanner={showDonateBanner}
shouldShowEmailConfirmation={showEmailConfirmation}
shouldShowFeaturesBanner={showFeaturesBanner}
shouldShowHOCMiddleBanner={showHOCMiddleBanner}
shouldShowHOCTopBanner={showHOCTopBanner}
shouldShowIntro={showIntro}
shouldShowHOCMiddleBanner={showHOCMiddleBanner}
shouldShowWelcome={showWelcome}
user={this.props.user}
onCloseDonateBanner={this.handleCloseDonateBanner}