vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Example of header and list

old
Javi Jimenez Villar 2015-05-29 14:01:25 +02:00
parent 433355bfde
commit f70fed4346
19 changed files with 291 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gulpfile.coffee
View File

@ -24,6 +24,7 @@ path =
"source/styles/__constants.styl"
"source/styles/normalize.styl"
"source/styles/app.styl"
"source/styles/modules/*.styl"
"source/styles/components/*.styl"
"source/styles/screens/*.styl"]
dependencies : [ "node_modules/react/dist/react-with-addons.js"

2
package.json
View File

@ -1,6 +1,6 @@
{
"name" : "material-console",
"version" : "0.5.28",
"version" : "0.5.29",
"description" : "",
"homepage" : "http://zetapath.com",
"author" : "Zetapath LTD.",

2
source/app.cjsx
View File

@ -19,7 +19,7 @@ App = React.createClass
SPArouter.listen
"/session/:id" : (id) =>
@setState session: false, context: id
"/console/:context" : (context) =>
"/console/:context" : (context) =>
@setState session: true, context: context
# -- Events

14
source/components/header.cjsx
View File

@ -31,8 +31,14 @@ module.exports = React.createClass
# -- Render
render: ->
<header ref="header" data-component="header">
{ <Navigation routes={@props.routes}/> if @props.routes }
{ <h1>{@props.title}</h1> if @props.title }
{ <Navigation routes={@props.subroutes}/> if @props.subroutes }
<header ref="header" data-component="header" data-flex="horizontal center grow">
<div>
<Navigation routes={@props.routes} role="text"/>
<h1>{@props.title}</h1>
{ <Navigation routes={@props.subroutes} role="text"/> if @props.subroutes }
</div>
<nav data-role="circle">
<button className="main">+</button>
<button>?</button>
</nav>
</header>

6
source/components/navigation.cjsx
View File

@ -19,14 +19,12 @@ module.exports = React.createClass
# -- Render
render: ->
<nav>
<nav data-role={@props.role}>
{
for route, index in @props.routes
method = if route.back is true then @onBack
<a href={"#" + route.route} key={index} onClick={method}>
<span className={"icon " + route.icon}></span>
<strong>{route.label}</strong>
<small>{route.count}</small>
{route.label}
</a>
}
</nav>

13
source/modules/constants.coffee
View File

@ -5,5 +5,14 @@
module.exports =
STORAGE :
SESSION : "material-console-session"
CONTEXTS = []
SUBROUTES:
CAMPAIGNS: [
label: "list", route: "/console/campaigns"
,
label: "reports", route: "/console/campaigns/reports"
]
CREATIVES: [
label: "list", route: "/console/creatives/list"
]

12
source/modules/storage.coffee Normal file
View File

@ -0,0 +1,12 @@
###
@todo
###
C = require "constants"
module.exports = (value) ->
if value or value is null
window.localStorage.setItem C.STORAGE.SESSION, JSON.stringify value
value
else
JSON.parse window.localStorage.getItem C.STORAGE.SESSION

44
source/screens/console.cjsx
View File

@ -2,11 +2,47 @@
@todo
###
Header = require "../components/header"
SPArouter = require "spa-router"
Header = require "../components/header"
C = require "../modules/constants"
module.exports = React.createClass
module.exports = React.createClass
# -- States & Properties
propTypes:
routes : React.PropTypes.array
getDefaultProps: ->
routes : [
label: "Campaigns", route: "/console/campaigns"
,
label: "Creatives", route: "/console/creatives"
,
label: "Users", route: "/console/users"
,
label: "Deals", route: "/console/deals"
,
label: "Analytics", route: "/console/analytics"
]
subroutes : []
render: ->
<article>
<Header title="Welcome" routes={[]} subroutes={[]} />
context = @props.context.toUpperCase()
<article data-screen="console">
<Header title="Console" routes={@props.routes} subroutes={C.SUBROUTES[context]} />
<section className="scroll">
<ul>
{
for i in [1..128]
<li data-flex="horizontal grow">
<img src="http://" data-flex-grow="min" />
<div data-flex="vertical" data-flex-grow="max">
<strong>Title {{i}}</strong>
<small>lorem ipsum....</small>
</div>
<span data-flex-grow="min">time ago...</span>
</li>
}
</ul>
</section>
</article>

32
source/styles/__constants.styl
View File

@ -1,9 +1,11 @@
@import url("http://fonts.googleapis.com/css?family=Roboto:500,300,700,400")
@import url("http://fonts.googleapis.com/css?family=Roboto:300,400,700")
// -- Colors
COLOR = #222222
BACKGROUND = #ffffff
THEME = #ffc107
THEME = #00bcd4
PRIMARY = rgb(255, 64, 129)
// -- Fonts
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
@ -12,36 +14,22 @@ FONT_SIZE_TINY = 80%
FONT_SIZE_SMALL = 90%
FONT_SIZE_NORMAL = 100%
FONT_SIZE_BIG = 120%
FONT_WEIGHT_THIN = normal
FONT_WEIGHT_NORMAL = normal
FONT_WEIGHT_BOLD = bold
FONT_WEIGHT_THIN = 100
FONT_WEIGHT_NORMAL = 400
FONT_WEIGHT_BOLD = 700
// -- Sizes
UNIT = 4rem
SPACE = (UNIT * 0.29)
MENU_WIDTH = 85vw
HEADER_HEIGHT = 10vh
HEADER_HEIGHT = 25vh
BUTTON_HEIGHT = (2.5 * SPACE)
BUTTON_HEIGHT = 14vw
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
BORDER_RADIUS = (SPACE / 2)
UPLOAD_IMAGE_USER = 45vw
H1_SHADOW = (SPACE / 6) (SPACE / 6) rgba(0,0,0,0.2)
LI_AVATAR_SIZE = (UNIT / 1.2)
LI_HEIGHT = 72px
// -- Animations
ANIMATION_DURATION = 450ms
ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
ANIMATION_DELAY = (ANIMATION_DURATION / 5)
delayChild(child, increment)
&:nth-child({child})
transition-delay ((child + increment) * ANIMATION_DELAY)
@keyframes LOADING
0%
transform scale(0.0)
100%
transform scale(1.0)
opacity: 0

88
source/styles/app.styl
View File

@ -1,95 +1,19 @@
body
font-family : FONT_FAMILY
font-size : FONT_SIZE
font-weight : FONT_WEIGHT_NORMAL
color : COLOR
background-color : BACKGROUND
a
color : WHITE
h1
font-size : (1.75 * FONT_SIZE_NORMAL)
font-size : SIZE = (1.75 * FONT_SIZE_NORMAL)
line-height : SIZE
h2
font-size : (1.5 * FONT_SIZE_NORMAL)
.scroll
overflow-x : hidden
overflow-y : scroll
-webkit-overflow-scrolling: touch
.type-01 /*stay*/
background : url("/assets/img/bear.png") no-repeat
.type-02 /*drink*/
background : url("/assets/img/dog.png") no-repeat
.type-03 /*eat*/
background : url("/assets/img/pig.png") no-repeat
.type-04 /*listen*/
background : url("/assets/img/rabbit.png") no-repeat
.type-05 /*see*/
background : url("/assets/img/raccoon.png") no-repeat
// -- ANIMATIONS ---------------------------------------------------------------
@keyframes LOADING
0%
transform scale(0.0)
100%
transform scale(1.0)
opacity: 0.1
// -- FLEX ---------------------------------------------------------------------
[data-flex]
display-flex()
body&
position : absolute
left : 0
top : 0
bottom : 0
width : 100%
overflow : hidden
// -- Direction
[data-flex^="horizontal"]
flex-direction row
[data-flex^="vertical"]
flex-direction column
// -- Size
[data-flex*="grow"]
> *:not([data-column]):not([data-flex-grow])
flex-grow 1
[data-flex-grow="min"]
flex-grow 0
[data-flex-grow="max"]
flex-grow 2
// -- Container properties
[data-flex*="wrap"]
flex-wrap wrap
[data-flex*="center"]
justify-content center
align-content center
align-items center
[data-flex-justify="start"]
justify-content flex-start
[data-flex-justify="center"]
justify-content center
[data-flex-justify="end"]
justify-content flex-end
[data-flex-content="start"]
align-content flex-start
[data-flex-content="center"]
align-content center
[data-flex-content="end"]
align-content flex-end
[data-flex-items="center"]
align-items center
[data-flex-items="start"]
align-items flex-start
[data-flex-items="end"]
align-items flex-end
// -- Children properties
[data-flex-order="first"]
order: -1
[data-flex-order="last"]
order: 999999
overflow-x : hidden
overflow-y : scroll
-webkit-overflow-scrolling : touch

10
source/styles/components/button.styl Normal file
View File

@ -0,0 +1,10 @@
button, .button
height : BUTTON_HEIGHT
width : auto
font-size : FONT_SIZE_BIG
font-weight : FONT_WEIGHT_BOLD
line-height : BUTTON_HEIGHT
text-align : center
border : none
overflow : hidden
transition all ANIMATION_DURATION ANIMATION_EASE

37
source/styles/components/header.styl
View File

@ -1,6 +1,33 @@
header
position : fixed
height : UNIT
width : 100vw
background-color : THEME
color : WHITE
position : fixed
// padding : UNIT 0
height : HEADER_HEIGHT
width : 100vw
background-color : THEME
color : WHITE
transition all ANIMATION_DURATION ANIMATION_EASE
> *
padding : 0 UNIT
h1
font-weight : FONT_WEIGHT_NORMAL
padding : (UNIT / 2) 0
nav
&[data-role="text"]
&:first-child
font-size : FONT_SIZE_TINY
&[data-role="circle"]
position : absolute
right : 0
bottom : -(BUTTON_CIRCLE_HEIGHT / 2)
> *
margin-left : SPACE
// -- Effects
&.scrolling
// padding : SPACE 0
transform translateY(-(1.5 * SPACE))
nav
&[data-role="text"]
&:first-child
opacity : 0

11
source/styles/components/list_item.styl Normal file
View File

@ -0,0 +1,11 @@
li
padding : (SPACE / 2) 0
img
width : SIZE = (2.5 * SPACE)
height : SIZE
background-color : #dddddd
border-radius : SIZE
margin-right : SPACE
strong
font-size : (1.25 * FONT_SIZE_NORMAL)

35
source/styles/components/loading.styl Normal file
View File

@ -0,0 +1,35 @@
[data-loading]
z-index : 2
> div
width : SIZE = (1.5 * UNIT)
height : SIZE
border-radius : SIZE
&::after
content : ""
position : absolute
width : SIZE
height : SIZE
transform scale(0.0)
border-radius : SIZE
background-color : THEME
SPEED = (3 * ANIMATION_DURATION)
&::after
animation LOADING SPEED infinite
&:nth-child(n+1)
margin-top : -(SIZE)
&:nth-child(1)::after
animation-delay (SPEED / 2.5)
&:nth-child(2)::after
animation-delay (SPEED / 5)
article &
margin-top : HEADER_HEIGHT
// -- Classes
&.absolute
height : 100vh
width : 100vw
&.relative
position : relative

21
source/styles/components/navigation.styl Normal file
View File

@ -0,0 +1,21 @@
nav
&[data-role="text"]
font-size : FONT_SIZE_NORMAL
> *:not(:last-child)
margin-right : SPACE
transition opacity ANIMATION_DURATION ANIMATION_EASE
&:not(.active)
font-weight : FONT_WEIGHT_THIN
opacity : 0.75
&:hover, &:active, &.active
opacity : 1
&[data-role="circle"]
> *
width : SIZE = BUTTON_CIRCLE_HEIGHT
height : SIZE
font-size : FONT_SIZE_BIG
line-height : SIZE
border-radius : SIZE
background-color : PRIMARY
box-shadow : 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)

16
source/styles/modules/animations.styl Normal file
View File

@ -0,0 +1,16 @@
/*
@todo
*/
// -- KEYFRAMES
@keyframes LOADING
0%
transform scale(0.0)
100%
transform scale(1.0)
opacity: 0.1
// -- FUNCTIONS
delayChild(child, increment)
&:nth-child({child})
transition-delay ((child + increment) * ANIMATION_DELAY)

61
source/styles/modules/flexbox.styl Normal file
View File

@ -0,0 +1,61 @@
/*
@todo
*/
[data-flex]
display-flex()
body&
position : absolute
left : 0
top : 0
bottom : 0
width : 100%
overflow : hidden
// -- Direction
[data-flex^="horizontal"]
flex-direction row
[data-flex^="vertical"]
flex-direction column
// -- Size
[data-flex*="grow"]
> *:not([data-column]):not([data-flex-grow])
flex-grow 1
[data-flex-grow="min"]
flex-grow 0
[data-flex-grow="max"]
flex-grow 2
// -- Container properties
[data-flex*="wrap"]
flex-wrap wrap
[data-flex*="center"]
justify-content center
align-content center
align-items center
[data-flex-justify="start"]
justify-content flex-start
[data-flex-justify="center"]
justify-content center
[data-flex-justify="end"]
justify-content flex-end
[data-flex-content="start"]
align-content flex-start
[data-flex-content="center"]
align-content center
[data-flex-content="end"]
align-content flex-end
[data-flex-items="center"]
align-items center
[data-flex-items="start"]
align-items flex-start
[data-flex-items="end"]
align-items flex-end
// -- Children properties
[data-flex-order="first"]
order: -1
[data-flex-order="last"]
order: 999999

10
source/styles/screens/__init.styl Normal file
View File

@ -0,0 +1,10 @@
[data-screen]
position : absolute
left : 0
top : 0
height : 100vh
width : 100vw
transition transform ANIMATION_DURATION ANIMATION_EASE
> section
height : 100vh
padding : (HEADER_HEIGHT + UNIT) UNIT UNIT UNIT

1
source/styles/screens/console.styl Normal file
View File

@ -0,0 +1 @@
[data-screen="console"]