scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add HOC Landing page View

Browse source 
Created a HOC Landing View. Currently all the SCSS lives at the view level and needs to be made into componets. After building out some Global style sheets I will revisit.
This commit is contained in:
carljbowman 2015-09-25 09:59:56 -04:00
parent b8b65f5bcc
commit fbd54998e6
5 changed files with 267 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
server/routes.json
View file

@ -15,6 +15,11 @@
"view": "components",
"static": false
},
{
"pattern": "/hoc",
"view": "hoc",
"static": false
},
{
"static": true,
"resolve": "_path.resolve(__dirname, '../build')",

4
src/components/forms/button.scss
View file

@ -24,4 +24,8 @@
&:active {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
&:focus{
outline: none;
}
}

1
src/components/navigation/navigation.scss
View file

@ -8,6 +8,7 @@
z-index: 10;
background-color: $base-background-color;
width: 100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
/* NOTE: Height should match offset settings in main.scss file */
height: 50px;

80
src/views/hoc/hoc.jsx Normal file
View file

@ -0,0 +1,80 @@
var React = require('react');
require('./hoc.scss');
var Button = require('../../components/forms/button.jsx');
var Box = require('../../components/box/box.jsx');
var View = React.createClass({
render: function () {
return (
<div>
<div className="top-banner">
<h1>Create Projects to Share!</h1>
<p>With Scratch, you can program your own stories, games, and animations — and share them online.</p>
<div className="card-deck">
<div className="card">
<div className="card-info">
<img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
<Button>Create a Hide & Seek Game</Button>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
<Button>Compose a Dance Sequence</Button>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
<Button>Animate Your Name</Button>
</div>
</div>
</div>
<ul className="sub-nav">
<li className="info">Find out more:</li>
<a href="#"><li className="link">About Scratch</li></a>
<a href="#"><li className="link">For Parents</li></a>
<a href="#"><li className="link">For Educators</li></a>
</ul>
</div>
<div className="inner">
<Box>
<section className="one-up">
<div className="column">
<h3>Related Resources</h3>
<p>Below are some resources to help explore Scratch by yourself or to assist groups in workshops and classrooms <a href="#">Find out more</a></p>
</div>
</section>
<section className="two-up">
<div className="column">
<h3>Tips Window</h3>
<p>New to Scratch or haven’t heard of the Tips Window? Check out interactive tutorials, handy block information, and other helpful hints all in the new 2015 <a href="#">Tips Window</a></p>
</div>
<div className="column">
<img src="https://www.dropbox.com/s/l1n1ba7aof3qqx4/tips-test-animation.gif?dl=1"></img>
</div>
</section>
<section className="one-up">
<div className="column">
<h3>Still Want More?</h3>
<p><strong>Awesome!</strong> Here are some addtional tutorials from the Tips Window. <a href="#">See all tips</a></p>
</div>
</section>
</Box>
</div>
</div>
);
}
});
React.render(<View />, document.getElementById('view'));

177
src/views/hoc/hoc.scss Normal file
View file

@ -0,0 +1,177 @@
#view {
padding: 0;
// To be integrated into the Global Typography standards
p {
line-height: 2em;
}
// To be revamped in Global Grids standards
.inner {
margin: 0 auto;
width: 80%;
max-width: 960px;
.box {
margin-bottom: 100px;
}
}
.top-banner {
margin-top: 10px;
margin-bottom: 40px;
background-color: #27d2b0;
padding: 10px 0;
width: 100%;
h1, p {
margin: 0 auto;
padding-top: 10px;
max-width: 500px;
text-align: center;
color: white;
}
.card-deck,
.sub-nav {
display: flex;
margin: 20px auto;
width: 80%;
max-width: 960px;
justify-content: center;
flex-wrap: wrap;
}
.card-deck {
.card {
display: inline-block;
margin: 10px;
border-radius: 7px;
background-color: rgba(0, 0, 0, .15);
padding: 2px;
width: 30%;
min-width: 200px;
max-width: 230px;
.card-info {
border-radius: 5px;
background-color:white;
width: 100%;
height: 100%;
button,
img {
width: calc(100% - 20px);
}
img {
margin: 10px 10px 5px 10px;
border-radius: 5px;
}
button {
margin: 0 10px 10px 10px;
}
}
}
}
.sub-nav {
color: white;
font-size: .8em;
font-weight: bold;
li {
display: inline-block;
margin: 5px;
padding: .75em 1em;
list-style-type: none;
}
a .link {
border: 2px solid rgba(0, 0, 0, .15);
border-radius: 50px;
text-decoration: none;
color: white;
&:hover {
transition: background-color .25s ease;
border-color: transparent;
background-color: rgba(0, 0, 0, .15);
}
&:active {
border: 0px solid transparent;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, .20);
padding: calc(0.75em + 2px) calc(1em + 2px);
}
}
}
}
.box section {
display: flex;
margin: 0 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
padding: 30px 0;
width: 95%;
justify-content: center;
flex-wrap: wrap;
align-items: center;
h3, p {
color: #6b6b6b;
font-weight: 300;
}
&.one-up {
text-align: center;
.column {
margin: 10px;
max-width: 600px;
}
}
&.two-up{
.column {
margin: 10px;
min-width: 200px;
max-width: 40%;
img {
border: 2px solid #2aa3ef;
border-radius: 5px;
width: 100%;
}
}
}
}
}