Merge pull request #7739 from cwillisf/scratch-link-2.0-prep

Scratch link 2.0 prep
This commit is contained in:
Christopher Willis-Ford 2023-07-17 07:43:14 -07:00 committed by GitHub
commit 5a26da9bd3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 118 additions and 51 deletions

View file

@ -7,6 +7,11 @@
padding: 0;
}
html {
// Adjust target position to compensate for the floating top content
scroll-padding-top: calc(50px + 5rem); // nav bar + OS chooser
}
.extension-landing {
&>div {
padding: 4rem 0;

View file

@ -13,7 +13,7 @@ const ExtensionTroubleshooting = props => {
};
return (
<ExtensionSection className="faq">
<h2><FormattedMessage
<h2 id="troubleshooting"><FormattedMessage
id="extensions.troubleshootingTitle"
values={sharedValues}
/></h2>
@ -22,7 +22,7 @@ const ExtensionTroubleshooting = props => {
values={sharedValues}
/></h3>
<p><FormattedMessage
id="extensions.browserCompatibilityText"
id="extensions.browserCompatibilityText2"
values={sharedValues}
/></p>
{props.children}

View file

@ -11,13 +11,13 @@ require('./extension-landing.scss');
// Assumes this will only be called with an OS that needs Scratch Link
const InstallScratchLink = ({
currentOS
currentOS,
hideScratchLink
}) => (
<div className="blue install-scratch-link">
<FlexRow className="inner column">
<h2><FormattedMessage id="installScratchLink.installHeaderTitle" /></h2>
<Steps>
<div className="step">
<Step
compact
number={1}
@ -55,16 +55,18 @@ const InstallScratchLink = ({
</a>
</div>
</Step>
</div>
<Step
compact
number={2}
>
<span className="step-description">
<FormattedMessage id="installScratchLink.startScratchLink" />
<FormattedMessage
id={`installScratchLink.startScratchLink.${
currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
}`}
/>
</span>
<div className="step-image">
<span className="step-image">
<img
alt=""
className="screenshot"
@ -72,7 +74,45 @@ const InstallScratchLink = ({
currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
}-toolbar.png`}
/>
</div>
</span>
<p className="step-description"><FormattedMessage
id={`installScratchLink.startScratchLink2.${
currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
}`}
/></p>
</Step>
<Step
compact
number={3}
>
{!hideScratchLink && <span className="step-description">
<FormattedMessage
id="installScratchLink.learnMore.bodyText"
values={{
linkText: (
<a
href="/download/scratch-link"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="installScratchLink.learnMore.linkText" />
</a>
)
}}
/>
</span>}
<span className="step-description">
<FormattedMessage
id="installScratchLink.ifYouHaveTrouble.bodyText"
values={{
linkText: (
<a
href="#troubleshooting"
><FormattedMessage id="installScratchLink.ifYouHaveTrouble.linkText" /></a>
)
}}
/>
</span>
</Step>
</Steps>
</FlexRow>
@ -80,7 +120,8 @@ const InstallScratchLink = ({
);
InstallScratchLink.propTypes = {
currentOS: PropTypes.string
currentOS: PropTypes.string.isRequired,
hideScratchLink: PropTypes.bool
};
module.exports = InstallScratchLink;

View file

@ -48,11 +48,12 @@
box-sizing: border-box;
.step-image {
height: 10rem;
max-height: 10rem;
img {
width: auto;
height: 100%;
max-height: 10rem;
width: 100%;
height: auto;
}
}
}

View file

@ -167,7 +167,14 @@
"installScratchLink.installHeaderTitle": "Install Scratch Link",
"installScratchLink.downloadAndInstall": "Download and install Scratch Link.",
"installScratchLink.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
"installScratchLink.startScratchLink.macOS": "Start Scratch Link and make sure it is running. It should appear in your menu bar.",
"installScratchLink.startScratchLink.Windows": "Start Scratch Link and make sure it is running. It should appear in your notification area (system tray).",
"installScratchLink.startScratchLink2.macOS": "If it does not appear, run Scratch Link from your Applications folder.",
"installScratchLink.startScratchLink2.Windows": "If it does not appear, run Scratch Link from your Start menu.",
"installScratchLink.learnMore.bodyText": "To learn more about Scratch Link, click {linkText}.",
"installScratchLink.learnMore.linkText": "here",
"installScratchLink.ifYouHaveTrouble.bodyText": "If you have trouble, see the {linkText} for tips.",
"installScratchLink.ifYouHaveTrouble.linkText": "Troubleshooting section",
"parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
"parents.FaqAgeRangeQ": "What is the age range for Scratch?",
@ -440,7 +447,7 @@
"extensions.troubleshootingTitle": "Troubleshooting",
"extensions.browserCompatibilityTitle": "Make sure your browser is compatible with Scratch Link",
"extensions.browserCompatibilityText": "Scratch Link 1.4 is not compatible with Safari. If you use macOS, please use another supported browser, such as Chrome or Firefox.",
"extensions.browserCompatibilityText2": "Scratch Link 1.4 is not compatible with Safari. If you use Safari, please upgrade to Scratch Link 2.0.",
"extensions.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
"extensions.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
"extensions.checkOsVersionText2": "If you are using macOS 12, please update to macOS 12.3 or newer. Earlier versions of macOS 12 do not work correctly with Scratch Link.",

View file

@ -1,3 +1,6 @@
/**
* @enum {string}
*/
const OS_ENUM = {
WINDOWS: 'Windows',
MACOS: 'macOS',

View file

@ -57,6 +57,7 @@ const ScratchLink = ({intl}) => {
/>
{(isDownloaded(os)) && (
<InstallScratchLink
hideScratchLink
currentOS={os}
/>
)}

View file

@ -73,6 +73,7 @@ class EV3 extends ExtensionLanding {
/>
{(isDownloaded(this.state.OS)) && (
<InstallScratchLink
showEv3
currentOS={this.state.OS}
/>
)}
@ -314,6 +315,12 @@ class EV3 extends ExtensionLanding {
/>
</p>
<p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
<h3 className="faq-title"><FormattedMessage id="ev3.tryScratchLink1.4" /></h3>
<p><a
href={`https://downloads.scratch.mit.edu/link/scratch-link-${
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
}-1.4.3.zip`}
><FormattedMessage id="ev3.downloadScratchLink1.4" /></a></p>
</React.Fragment>
)}
<h3 className="faq-title"><FormattedMessage id="ev3.makeSurePairedTitle" /></h3>

View file

@ -28,6 +28,8 @@
"ev3.troubleshootingTitle": "Troubleshooting",
"ev3.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
"ev3.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
"ev3.tryScratchLink1.4": "If you have issues connecting EV3 with Scratch Link 2.0, please try Scratch Link 1.4",
"ev3.downloadScratchLink1.4": "Download Scratch Link 1.4",
"ev3.winOSVersionLinkText": "Windows",
"ev3.macOSVersionLinkText": "macOS",
"ev3.makeSurePairedTitle": "Make sure your computer is paired with your EV3",