scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 15:17:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Navigation WIP

Browse source
This commit is contained in:
carljbowman 2015-09-21 09:18:00 -04:00
parent df1c214a01
commit 9a67d3fb98
17 changed files with 220 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/box/box.scss
View file

@ -14,7 +14,7 @@
clear: both;
overflow: hidden;
background-color: #efefef;
background-color: #efefef;
border-radius: 10px 10px 0 0;
border-top: 1px solid white;
border-bottom: 1px solid #ccc;

19
src/components/forms/button.jsx Normal file
View file

@ -0,0 +1,19 @@
var React = require('react');
var classNames = require('classnames');
require('./button.scss');
module.exports = React.createClass({
propTypes: {
},
render: function () {
var classes = classNames(
'button',
this.props.className
);
return (
<button {... this.props} className={classes} >{this.props.children}</button>
);
}
});

27
src/components/forms/button.scss Normal file
View file

@ -0,0 +1,27 @@
.button {
display: inline-block;
font-size: .8rem;
padding: .75em 1em;
margin: .5em 0;
background-color: #24a3ec;
color: white;
font-weight: bold;
border-radius: 5px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
border: none;
&.white {
background-color: white;
border-top: 1px inset rgba(0, 0, 0, 0.1);
color: #24a3ec;
}
&:hover {
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}
&:active {
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.25);
}
}

19
src/components/forms/input.jsx Normal file
View file

@ -0,0 +1,19 @@
var React = require('react');
var classNames = require('classnames');
require('./input.scss');
module.exports = React.createClass({
propTypes: {
},
render: function () {
var classes = classNames(
'input',
this.props.className
);
return (
<input {... this.props} className={classes} />
);
}
});

28
src/components/forms/input.scss Normal file
View file

@ -0,0 +1,28 @@
.input {
color:black;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: .8rem;
padding: .75em 1em;
margin: .5em 0;
background-color: #f7f7f7;
transition:all 1s ease;
&:focus {
background-color: #d3eaf8;
outline:none;
border: 1px solid rgba(0, 0, 0, 0.1);
transition:all 1s ease;
}
&.fail {
border: 1px solid #eab012;
background-color: #fff7df;
}
&.pass {
border: 1px solid #55db58;
background-color: #eafdea;
}
}

10
src/components/login/login.jsx
View file

@ -1,4 +1,6 @@
var React = require('react');
var Input = require('../forms/input.jsx');
var Button = require('../forms/button.jsx');
require('./login.scss');
@ -15,11 +17,11 @@ module.exports = React.createClass({
<div className="login">
<form onSubmit={this.handleSubmit}>
<label htmlFor="username">Username</label>
<input type="text" name="username" maxLength="30" />
<Input type="text" name="username" maxLength="30" />
<label htmlFor="password">Password</label>
<input type="password" name="password" />
<button className="submit-button" type="submit">Sign in</button>
<a href="/accounts/password_reset/">Forgot password?</a>
<Input type="password" name="password" />
<Button className="submit-button white" type="submit">Sign in</Button>
<a className="right" href="/accounts/password_reset/">Forgot password?</a>
</form>
</div>
);

17
src/components/login/login.scss
View file

@ -1,7 +1,20 @@
.login {
padding: 14px 9px;
padding: 10px;
label {
padding-top: 5px;
font-weight: bold;
}
.submit-button {
margin-right: 3px;
margin-top: 5px;
}
a {
margin-top: 15px;
}
a:hover {
background-color: transparent !important;
}
}

4
src/components/navigation/_colors.scss
View file

@ -1,3 +1,3 @@
$base-background-color: #0f8bc0;
$active-background-color: rgb(1, 96, 135);
$base-background-color: #2aa3ef;
$active-background-color: rgba(0, 0, 0, 0.1);
$border-color: rgb(20, 154, 203);

49
src/components/navigation/dropdown.scss
View file

@ -3,15 +3,16 @@
.dropdown {
position: absolute;
right: 0;
min-width: 160px;
max-width: 220px;
min-width: 240px;
max-width: 260px;
background-color: $base-background-color;
overflow: hidden;
border-radius: 0px 0px 4px 4px;
box-shadow: inset 0 1px 1px rgba(100,100,100,.25),0 1px 1px rgba(0,0,0,.25);
overflow: visible;
border-radius: 0 0 5px 5px;
padding: 10px;
color: white;
font-weight: normal;
font-size: 0.8125rem;
border: 1px solid $active-background-color;
display: none;
&.open {
@ -20,12 +21,13 @@
a {
color: white;
background-color: transparent;
}
input {
// 100% minus border and padding
width: calc(100% - 2px - 8px);
margin-bottom: 9px;
width: calc(100% - 30px);
margin-bottom: 12px;
}
label {
@ -47,28 +49,33 @@
padding: 0 10px;
&:hover {
background-color: $active-background-color;
text-decoration: none;
background-color: $active-background-color;
text-decoration: none;
}
}
}
&.with-arrow {
$arrow-border-width: 11px;
overflow: visible;
$arrow-border-width: 14px;
margin-top: $arrow-border-width;
border-radius: 4px;
border-radius: 5px;
overflow: visible;
&:before {
position: absolute;
display: block;
right: 10%;
top: -$arrow-border-width;
left: auto;
border-color: transparent;
border-bottom-color: $base-background-color;
border-style: solid;
border-width: 0 $arrow-border-width $arrow-border-width $arrow-border-width;
content: " ";
display: block;
top: -$arrow-border-width/2;
right: 10%;
height: $arrow-border-width;
width: $arrow-border-width;
content: '';
transform: rotate(45deg);
background-color: $base-background-color;
border-top: 1px solid $active-background-color;
border-left: 1px solid $active-background-color;
border-radius: 5px;
}
}
}

14
src/components/navigation/navigation.jsx
View file

@ -1,7 +1,9 @@
var React = require('react');
var classNames = require('classnames');
var Login = require('../login/login.jsx');
var Dropdown = require('./dropdown.jsx');
var Input = require('../forms/input.jsx');
var Login = require('../login/login.jsx');
require('./navigation.scss');
@ -54,17 +56,17 @@ module.exports = React.createClass({
<li className="search">
<form action="/search/google_results" method="get">
<input type="submit" value="" />
<input type="text" placeholder="Search" name="q" />
<input type="hidden" name="date" value="anytime" />
<input type="hidden" name="sort_by" value="datetime_shared" />
<Input type="submit" value="" />
<Input type="text" placeholder="Search" name="q" />
<Input type="hidden" name="date" value="anytime" />
<Input type="hidden" name="sort_by" value="datetime_shared" />
</form>
</li>
{this.state.loggedIn ? [
<li className="link right messages"><a href="/messages/" title="Messages">Messages</a></li>,
<li className="link right mystuff"><a href="/mystuff/" title="My Stuff">My Stuff</a></li>,
<li className="link right account-nav">
<a href="#" onClick={this.handleClickAccountNav}>
<a className="userInfo" href="#" onClick={this.handleClickAccountNav}>
<img src={this.state.loggedInUser.thumbnail} />
{this.state.loggedInUser.username}
</a>

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

@ -10,7 +10,7 @@
background-color: $base-background-color;
/* NOTE: Height should match offset settings in main.scss file */
height: 35px;
height: 50px;
.inner > ul {
display: flex;
@ -18,7 +18,7 @@
flex-wrap: nowrap;
justify-content: flex-start;
height: 35px;
height: 50px;
margin: 0;
padding: 0;
list-style: none;
@ -28,25 +28,27 @@
align-self: flex-start;
float: left;
height: 100%;
border-left: 1px solid $border-color;
position: relative;
}
.logo {
border-left: none;
margin-right: 10px;
a {
display: block;
width: 80px;
height: 35px;
margin: 4px 6px 0 0;
width: 81px;
height: 50px;
margin: 0px 6px 0 0;
border: none;
background-image: url('/images/logo_sm.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 95%;
transition: .15s ease all;
&:hover {
background-image: url('/images/logo_sm_highlight.png');
background-size: 100%;
transition: .15s ease all;
}
}
}
@ -54,13 +56,14 @@
.link {
> a {
display: block;
height: 28px;
padding: 7px 15px 0 15px;
height: 33px;
padding: 17px 15px 0px 15px;
color: white;
text-decoration: none;
font-size: 0.95rem;
font-size: 0.85rem;
white-space: nowrap;
font-weight: bold;
}
> a:hover {
@ -71,9 +74,11 @@
.search {
flex-grow: 3;
border-right: none;
color: white;
margin:0px 20px;
form {
margin: 6px 0 0 15px;
margin: 0;
}
input {
@ -81,26 +86,42 @@
height: 14px;
outline: none;
border: none;
background-color: $active-background-color;
margin-top:5px;
}
input[type=submit] {
position: absolute;
width: 30px;
height: 22px;
width: 40px;
height: 40px;
background-color: transparent;
background-color: white;
background-image: url('/images/nav-search-glass.png');
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center center;
border-right: 1px solid #efefef;
border-radius: 10px 0 0 10px;
}
input[type=text] {
width: calc(100% - 50px);
padding-left: 36px;
border-radius: 10px;
height: 40px;
padding: 0;
color: white;
padding-left: 40px;
padding-right:10px;
font-size: 0.85em;
transition: .15s ease background-color;
&::placeholder {
color:rgba(255, 255, 255, 0.75);
}
&:focus {
background-color: rgba(0, 0, 0, 0.2);
transition: .15s ease background-color;
}
}
.ie9 input[type=text] {
@ -112,17 +133,12 @@
align-self: flex-end;
float: right;
margin-left: auto;
font-weight: bold;
&:last-child {
border-right: 1px solid rgb(20, 154, 203);
a:hover {
background-color: $active-background-color;
}
}
.join > a:hover {
background-color: #f79231;
}
.messages, .mystuff {
> a {
background-repeat: no-repeat;
@ -154,15 +170,21 @@
}
.account-nav {
.userInfo {
padding-top: 11px;
padding-bottom: 6px;
}
> a {
font-weight: normal;
font-size: 0.8125rem;
img {
width: 24px;
height: 24px;
margin-right: 5px;
width: 30px;
height: 30px;
margin-right: 10px;
vertical-align: middle;
border-radius: 3px;
}
&:after {

20
src/main.scss
View file

@ -51,24 +51,10 @@ a:hover {
padding: 10px 0;
/* NOTE: Margin should match height in navigation.scss */
margin-top: 35px;
}
/* Forms */
input {
height: 18px;
line-height: 18px;
display: inline-block;
padding: 4px;
margin-bottom: 9px;
font-size: 13px;
color: #555;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
transition: border linear .2s,box-shadow linear .2s;
margin-top: 50px;
}
/*
button {
cursor: pointer;
line-height: 30px;
@ -88,3 +74,5 @@ button {
button:hover {
background-image: linear-gradient(#e6e6e6,#e6e6e6);
}
*/

7
src/views/components/components.jsx
View file

@ -1,7 +1,10 @@
var React = require('react');
var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
var Input = require('../../components/forms/input.jsx');
require('./components.scss');
@ -9,6 +12,10 @@ var View = React.createClass({
render: function () {
return (
<div className="inner">
<h1>Button</h1>
<Button>I love button</Button>
<h1>Form</h1>
<Input type="text" name="test" maxLength="30" />
<h1>Box Component</h1>
<Box
title="Some Title"

BIN
static/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/images/logo_sm.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
static/images/logo_sm_highlight.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
static/images/nav-search-glass.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB