mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-20 18:11:03 -04:00
Merge pull request #3263 from benjiwheeler/microbit-add-cards
Microbit add cards
This commit is contained in:
Benjamin Wheeler
GitHub
commit
0a77f62c02
11 changed files with 99 additions and 5 deletions
|
|
@ -256,6 +256,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
div.cards + div.faq {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.faq {
|
||||
p {
|
||||
margin-bottom: 1.25rem;
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const TTTModal = props => (
|
|||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="ideas.downloadPDF" />
|
||||
<FormattedMessage id="general.downloadPDF" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -76,7 +76,7 @@ const TTTModal = props => (
|
|||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="ideas.downloadPDF" />
|
||||
<FormattedMessage id="general.downloadPDF" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"general.confirmEmail": "Confirm Email",
|
||||
"general.contactUs": "Contact Us",
|
||||
"general.contact": "Contact",
|
||||
"general.downloadPDF": "Download PDF",
|
||||
"general.emailUs": "Email Us",
|
||||
"general.conferences": "Conferences",
|
||||
"general.copyright": "Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
"ideas.seeAllTutorials": "See All Tutorials",
|
||||
"ideas.cardsTitle": "Get the Entire Collection of Coding Cards",
|
||||
"ideas.cardsText": "With the Scratch Coding Cards, you can learn to create interactive games, stories, music, animations, and more!",
|
||||
"ideas.downloadPDF": "Download PDF",
|
||||
"ideas.starterProjectsTitle": "Starter Projects",
|
||||
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
|
||||
"ideas.starterProjectsButton": "Explore Starter Projects",
|
||||
|
|
|
|||
3
src/views/microbit/l10n-static.json
Normal file
3
src/views/microbit/l10n-static.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"cards.microbit-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/microbit-cards.pdf"
|
||||
}
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
"microbit.headerText": "{microbitLink} is a tiny circuit board designed to help kids learn to code and create with technology. It has many features including an LED display, buttons, and a motion sensor. You can connect it to Scratch and build creative projects that combine the magic of the digital and physical worlds.",
|
||||
"microbit.gettingStarted": "Getting Started",
|
||||
"microbit.installMicrobitHex": "Install Scratch micro:bit HEX",
|
||||
"microbit.cardsDescription": "These cards show how to start making projects with micro:bit and Scratch.",
|
||||
"microbit.connectUSB": "Connect a micro:bit to your computer with a USB cable",
|
||||
"microbit.downloadCardsTitle": "Download micro:bit Cards",
|
||||
"microbit.downloadHex": "Download the Scratch micro:bit HEX file",
|
||||
"microbit.dragDropHex": "Drag and drop the HEX file onto your micro:bit",
|
||||
"microbit.connectingMicrobit": "Connecting micro:bit to Scratch",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ const ExtensionRequirements = require('../../components/extension-landing/extens
|
|||
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
|
||||
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
|
||||
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
|
||||
const Button = require('../../components/forms/button.jsx');
|
||||
|
||||
const Steps = require('../../components/steps/steps.jsx');
|
||||
const Step = require('../../components/steps/step.jsx');
|
||||
|
|
@ -269,6 +270,35 @@ class MicroBit extends ExtensionLanding {
|
|||
/>
|
||||
</Steps>
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="cards">
|
||||
<FlexRow
|
||||
as="section"
|
||||
className="cards-row"
|
||||
>
|
||||
<div className="cards-image-column">
|
||||
<img
|
||||
className="cards-image"
|
||||
src="/images/microbit/microbit-with-scratch.png"
|
||||
/>
|
||||
</div>
|
||||
<div className="cards-description-column">
|
||||
<h2>
|
||||
<FormattedMessage id="microbit.downloadCardsTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedMessage id="microbit.cardsDescription" />
|
||||
</p>
|
||||
<p>
|
||||
<a href={this.props.intl.formatMessage({id: 'cards.microbit-cardsLink'})}>
|
||||
<Button className="download-cards-button large">
|
||||
<FormattedMessage id="general.downloadPDF" />
|
||||
</Button>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</FlexRow>
|
||||
<hr />
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="faq">
|
||||
<h2><FormattedMessage id="microbit.troubleshootingTitle" /></h2>
|
||||
<h3 className="faq-title"><FormattedMessage id="microbit.checkOSVersionTitle" /></h3>
|
||||
|
|
|
|||
|
|
@ -14,4 +14,60 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
/* ends with <hr>, so no need for extra padding */
|
||||
padding-bottom: 0;
|
||||
/* slightly more padding on top, since <hr> at bottom has its own extra padding */
|
||||
padding-top: 4.5rem;
|
||||
}
|
||||
|
||||
.cards-row {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cards-image-column {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cards-image {
|
||||
width: calc(100% - 4rem);
|
||||
margin-top: 1rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cards-description-column {
|
||||
width: 50%;
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.download-cards-button {
|
||||
min-width: 10rem;
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
background-image: url("/svgs/extensions/download-white.svg");
|
||||
background-repeat: no-repeat;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: .75rem;
|
||||
vertical-align: text-top;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium-and-smaller} {
|
||||
.microbit {
|
||||
.cards-image-column {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
.cards-description-column {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
"tips.tttBody": "What do you want to make with Scratch? For each activity, you can try the <strong>Tutorial</strong>, download a set of <strong>Activity Cards</strong>, or view the <strong>Educator Guide</strong>.",
|
||||
"tips.cardsHeader": "Get the Entire Collection of Activity Cards",
|
||||
"tips.cardsBody": "With the Scratch Activity Cards, you can learn to create interactive games, stories, music, animations, and more!",
|
||||
"tips.cardsDownload": "Download PDF",
|
||||
"tips.cardsPurchase": "Purchase Printed Set",
|
||||
"tips.starterProjectsHeader": "Starter Projects",
|
||||
"tips.starterProjectsBody": "You can play with Starter Projects to get ideas for making your own projects.",
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ class Tips extends React.Component {
|
|||
})}
|
||||
>
|
||||
<Button className="tips-button">
|
||||
<FormattedMessage id="tips.cardsDownload" />
|
||||
<FormattedMessage id="general.downloadPDF" />
|
||||
</Button>
|
||||
</a>
|
||||
<a
|
||||
|
|
|
|||
BIN
static/images/microbit/microbit-with-scratch.png
Normal file
BIN
static/images/microbit/microbit-with-scratch.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 78 KiB |
Loading…
Reference in a new issue