From 2d745dd1ea9c4563137e21db7f6927b720628c63 Mon Sep 17 00:00:00 2001 From: carljbowman Date: Wed, 14 Oct 2015 10:30:52 -0600 Subject: [PATCH] Update HOC with Banner Hoverstates & Assets - Added hover states on the tutorial cards that changes the banner background. - Included new web optimized image assets. --- src/views/hoc/hoc.jsx | 77 ++++++++++++++++----------- src/views/hoc/hoc.scss | 43 +++++++++------ static/images/dance-bg.jpg | Bin 0 -> 116243 bytes static/images/dance-tutorial.jpg | Bin 0 -> 28182 bytes static/images/dance-tutorial.png | Bin 249750 -> 0 bytes static/images/hide-bg.jpg | Bin 0 -> 197714 bytes static/images/hide-seek-tutorial.jpg | Bin 0 -> 23599 bytes static/images/hide-seek-tutorial.png | Bin 133613 -> 0 bytes static/images/name-bg.jpg | Bin 0 -> 163758 bytes static/images/name-tutorial.jpg | Bin 0 -> 27795 bytes static/images/name-tutorial.png | Bin 154478 -> 0 bytes 11 files changed, 73 insertions(+), 47 deletions(-) create mode 100644 static/images/dance-bg.jpg create mode 100644 static/images/dance-tutorial.jpg delete mode 100644 static/images/dance-tutorial.png create mode 100644 static/images/hide-bg.jpg create mode 100644 static/images/hide-seek-tutorial.jpg delete mode 100644 static/images/hide-seek-tutorial.png create mode 100644 static/images/name-bg.jpg create mode 100644 static/images/name-tutorial.jpg delete mode 100644 static/images/name-tutorial.png diff --git a/src/views/hoc/hoc.jsx b/src/views/hoc/hoc.jsx index 3ce80cf6c..5ef961f34 100644 --- a/src/views/hoc/hoc.jsx +++ b/src/views/hoc/hoc.jsx @@ -6,42 +6,54 @@ require('./hoc.scss'); var Button = require('../../components/forms/button.jsx'); var Box = require('../../components/box/box.jsx'); + + var Hoc = React.createClass({ type: 'Hoc', + + getInitialState: function () { + return { + bgClass: '' + }; + }, + onCardEnter: function (e) { + this.setState({ + bgClass: e + }); + }, render: function () { return (
-
+

Get Creative with Coding

- -
-
- -
- -
- -
- - -
-

With Scratch, you can program your own stories, games, and animations — and share them online.

+
+
+ +
+ + + + +
+