From aeaa02aae8c566a9b4d9b4585bf6425cf0a4ffdc Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Wed, 9 Mar 2016 22:59:27 -0500 Subject: [PATCH] Update with links, fix linter issues, center setup --- src/_typography.scss | 83 +++++++++++++------------ src/views/wedo2/l10n.json | 10 ++-- src/views/wedo2/wedo2.jsx | 112 ++++++++-------------------------- src/views/wedo2/wedo2.scss | 120 ++++++++++++++++++------------------- 4 files changed, 134 insertions(+), 191 deletions(-) diff --git a/src/_typography.scss b/src/_typography.scss index e5aebea32..b7e3896cf 100644 --- a/src/_typography.scss +++ b/src/_typography.scss @@ -3,30 +3,38 @@ #view { -// Global Typography + // Global Typography - h1, h2, h3, h4, h5, p { - color: $type-gray; + h1, + h2, + h3, + h4, + h5, + p { line-height: 1.7em; + color: $type-gray; } ::selection { background-color: lighten($ui-blue, 30); } -// Headers - h3, h4, h5, { - margin: 1.5em 0 .3em 0; + // Headers + + h3, + h4, + h5 { + margin: 1.5em 0 .3em; } h1 { - margin: .75em 0 .3em 0; + margin: .75em 0 .3em; font-size: 2.5rem; font-weight: 900; } h2 { - margin: .75em 0 .3em 0; + margin: .75em 0 .3em; font-size: 2rem; font-weight: 600; } @@ -42,26 +50,39 @@ } h5 { - font-size: .85rem; - font-weight: 700; text-transform: uppercase; letter-spacing: 2px; + font-size: .85rem; + font-weight: 700; } -// Paragraph Typography + // Link Typography + + a { + cursor: pointer; + color: $ui-blue; + font-weight: 500; + + &:hover { + text-decoration: none; + color: darken($ui-blue, 15); + } + } + + // Paragraph Typography p { - margin: .25em 0 1em 0; + margin: .25em 0 1em; //max-width: 700px; font-size: 1rem; font-weight: 300; &.intro { - font-size: 1.1rem; margin-bottom: 1em; + font-size: 1.1rem; } - &.callout{ + &.callout { // margin: 1.5em 0; // border-top: 1px solid $ui-border; // border-bottom: 1px solid $ui-border; @@ -70,48 +91,36 @@ margin: 1.5em 0; border: 1px solid $active-gray; border-radius: 5px; - padding: 1.25em 1.25em; background-color: lighten($ui-blue, 40); + padding: 1.25em; &.orange { background-color: lighten($ui-orange, 30); } } + + a { + white-space: nowrap; + } } b { font-weight: 500; } -// Link Typography + // List Typography - a { - font-weight: 500; - color: $ui-blue; - cursor: pointer; - - &:hover { - color: darken($ui-blue, 15); - text-decoration: none; - } - } - - p a { - white-space: nowrap; - } - -// List Typography - ol, ul { - margin: .25em 0 1em 0; + ol, + ul { + margin: .25em 0 1em; padding-left: 20px; + line-height: 1.5em; font-size: 1rem; font-weight: 300; - line-height: 1.5em; li { margin: .75em 0; } } - -} \ No newline at end of file +} diff --git a/src/views/wedo2/l10n.json b/src/views/wedo2/l10n.json index 7ef3a7655..b962d2d79 100644 --- a/src/views/wedo2/l10n.json +++ b/src/views/wedo2/l10n.json @@ -1,19 +1,19 @@ { - "wedo1.setupInstructions": "Wedo 1.0 Setup Instructions", "wedo2.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.", "wedo2.requirement": "The LEGO WeDo 2.0 extension is currently only available for Mac OSX. We plan to release a Windows version later in 2016.", "wedo2.getStarted": "Getting Started with LEGO WeDo 2.0", "wedo2.installTitle": "1. Install Device Manager", - "wedo2.installText": "", + "wedo2.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth Download Here", "wedo2.setupTitle": "2. Setup & Help", - "wedo2.setupText": "", + "wedo2.setupText": "Connect your WeDo 2.0 by following the steps in the Tips Window", "wedo2.createTitle": "3. Create", "wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive", - "wedo2.setupInstructions": "Wedo 2.0 Setup Instructions", + "wedo2.wedo2SetupInstructions": "Wedo 2.0 Setup Instructions", + "wedo2.wedo1SetupInstructions": "Wedo 1.0 Setup Instructions", "wedo2.starterProjects": "WeDo 2.0 Starter Projects", "wedo2.starterMotor": "Motor", "wedo2.starterDistance": "Distance Sensor", "wedo2.starterTilt": "Tilt Sensor", "wedo2.versionTitle": "Which version do you have?", "wedo2.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)." -} \ No newline at end of file +} diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx index c6c229ce5..e9826bef4 100644 --- a/src/views/wedo2/wedo2.jsx +++ b/src/views/wedo2/wedo2.jsx @@ -1,6 +1,7 @@ var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; var FormattedMessage = require('react-intl').FormattedMessage; var React = require('react'); + var render = require('../../lib/render.jsx'); require('./wedo2.scss'); @@ -14,16 +15,9 @@ var Wedo2 = React.createClass({
-

LEGO WeDo 2.0 & Scratch

+

LEGO WeDo 2.0 & Scratch

- +

@@ -36,63 +30,37 @@ var Wedo2 = React.createClass({

- +

- +

- +

- The Device Manager lets you connect WeDo 2.0 to Scratch using - Bluetooth Download Here +

- +

- Connect your WeDo 2.0 by following the steps - in the Tips Window +

- +

- +

@@ -102,46 +70,30 @@ var Wedo2 = React.createClass({

- +

- +

- +

- +

- +

- +

- +

@@ -152,39 +104,23 @@ var Wedo2 = React.createClass({

- +

- +

LEGO WeDo 1.0 Hub

LEGO WeDo 1.0 Hub - - + +

LEGO WeDo 2.0 Hub

LEGO WeDo 2.0 Hub - - + +
diff --git a/src/views/wedo2/wedo2.scss b/src/views/wedo2/wedo2.scss index 7c463f4b5..901e881a7 100644 --- a/src/views/wedo2/wedo2.scss +++ b/src/views/wedo2/wedo2.scss @@ -5,84 +5,80 @@ #view { padding: 0; + p { + &.callout { + padding: .75em 1em; + text-align: center; + } + } + .top-banner { margin-bottom: 50px; background-color: $ui-blue; padding: 50px 0; width: 100%; - h2 { - color: $ui-white; - } + h2 { + color: $ui-white; + } - p { - color: $ui-white; - } + p { + color: $ui-white; + } - .columns2 { - display: flex; - justify-content: space-between; - align-items: center; - } + .columns2 { + display: flex; + justify-content: space-between; + align-items: center; + } - .banner-text { - max-width: $cols7; - } + .banner-text { + max-width: $cols7; + } - .banner-photo { - max-width: $cols4; + .banner-photo { + max-width: $cols4; - img { - width: 100%; - } + img { + width: 100%; } + } } section { margin-bottom: 50px; + text-align: center; } - // GETTING STARTED SECTION - - #getting-started { - h3 { - text-align: center; - } - } + // Getting Started Section .columns3 { display: flex; justify-content: space-between; .column { - max-width: $cols4; margin: 15px; - text-align: center; + max-width: $cols4; img { - width: 80%; margin: 0 auto; + width: 80%; } } } - p.callout { - padding: .75em 1em; - text-align: center; - } - - - // PROJECT HIGHLIGHT SECTION + // Project Highlight Section #starter-projects { - h3, p { + h3, + p { text-align: center; } } .banner { - padding: 10px 0 50px; background-color: $ui-gray; + padding: 10px 0 50px; h3 { margin-top: 30px; @@ -90,39 +86,37 @@ } .project-list { - display: flex; - max-width: $cols9; - margin: 0 auto; - justify-content: space-between; + display: flex; + margin: 0 auto; + max-width: $cols9; + justify-content: space-between; } .project-card { - max-width: $cols3; - margin: 10px; - background-color: $ui-white; - border-radius: 7px; - overflow: hidden; transition: transform .25s ease; + margin: 10px; + border-radius: 7px; + background-color: $ui-white; + max-width: $cols3; + overflow: hidden; img { - width: 100%; border-bottom: 2px solid $ui-white; + width: 100%; } p { display: block; - margin: 15px 15px 20px 15px; + margin: 15px 15px 20px; color: $ui-blue; font-weight: 500; } &:hover { - //background-color: $ui-blue; - cursor: pointer; - transform: scale(1.1, 1.1); transition: transform .25s ease; + cursor: pointer; p { color: darken($ui-blue, 15); @@ -130,25 +124,25 @@ } } - // DEVICE CARDS + // Device Cards .device-card { display: inline-block; - max-width: $cols3; margin: 0 10px; + max-width: $cols3; img { width: 100%; } } - // RESPONSIVE BEHAVIOR + // Responsive Behavior //4 columns @media only screen and (max-width: $mobile - 1) { .inner { - width: calc(100% - 40px); margin: 0 auto; + width: calc(100% - 40px); } .top-banner { @@ -159,20 +153,23 @@ } } - .project-list, .columns3 { + .project-list, + .columns3 { display: block; } - .project-card, .columns3 .column { + .project-card, + .columns3 .column { display: block; - width: $cols6; margin: 20px auto; + width: $cols6; } } //6 columns @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { - .project-list, .columns3 { + .project-list, + .columns3 { display: inline-block; } @@ -184,7 +181,8 @@ } } - .project-card, .columns3 .column { + .project-card, + .columns3 .column { display: inline-block; width: $cols6; }