First pass at UI styles.

diff --git a/.gitignore b/.gitignore
index cad98b1..7484718 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,4 @@ build/
 dist/
 tmp/
 var/
+static/tmp

diff --git a/README.md b/README.md
index 8bc3b50..b2de9e2 100644 (file)
--- a/README.md
+++ b/README.md
@@ -26,9 +26,6 @@ You should now have a server running on 8081.
   
 - Coco require compilation before it'll run in the browser (though node can run it directly -- `#!/usr/bin/env coco` will work as a shebang as well). I've written [request middleware][connect-compiler] that recompiles stale files on demand, and it is pretty cool.
   
-- brb lunch
-
-- Can Fabian commit?
 
 
 [nodejs]: http://nodejs.org/

diff --git a/lib/kraken-ui.js b/lib/kraken-ui.js
deleted file mode 100644 (file)
index ccf6a8e..0000000
--- a/lib/kraken-ui.js
+++ /dev/null
@@ -1 +0,0 @@
-exports.a = '123';
\ No newline at end of file

diff --git a/lib/main.co b/lib/main.co
index d43ca5e..8478408 100644 (file)
--- a/lib/main.co
+++ b/lib/main.co
@@ -2,7 +2,7 @@ g = null
 
 main = ->
     g := new Dygraph do
-          $ '#graph' .0
+          $ '.graph' .eq 0 .find '.viewport' .0
           'data/page_views_by_project.csv'
           {'logscale': true}
     

diff --git a/lib/server/view-helpers.co b/lib/server/view-helpers.co
index 5313b03..f7e7cbc 100644 (file)
--- a/lib/server/view-helpers.co
+++ b/lib/server/view-helpers.co
@@ -4,17 +4,26 @@ fs   = exports.fs   = require 'fs'
 path = exports.path = require 'path'
               
 _    = exports._    = require 'underscore'
+_.str = require 'underscore.string'
+_.mixin _.str.exports()
+
 yaml = exports.yaml = require 'js-yaml'
 jade = exports.jade = require 'jade'
               
-NODE_ENV = exports.NODE_ENV = (process.env.NODE_ENV or 'development').toLowerCase()
-IS_PROD  = exports.IS_PROD  = _ <[ prod production ]> .contains NODE_ENV
-IS_DEV   = exports.IS_DEV   = not IS_PROD
+exports.env = process.env
+NODE_ENV = (process.env.NODE_ENV or 'dev').toLowerCase()
+IS_PROD  = exports.IS_PROD  = _ NODE_ENV .startsWith 'prod'
+IS_TEST  = exports.IS_TEST  = _ NODE_ENV .startsWith 'test'
+IS_DEV   = exports.IS_DEV   = not (IS_PROD or IS_TEST) # _.startsWith NODE_ENV, 'dev'
+# Canonicalize
+NODE_ENV = exports.NODE_ENV = if IS_PROD then 'prod' else if IS_TEST then 'test' else 'dev'
 
 
-sources = exports.sources = (modulesFile) ->
+sources = exports.sources = (modulesFile, node_env=NODE_ENV) ->
     mods = yaml.load fs.readFileSync modulesFile, 'utf8'
-    _.flatten mods.map ({suffix or '', paths}) -> joinTree('', paths).map -> it+suffix
+    modlist = (mods.all or []) .concat (mods[node_env] or [])
+    _.flatten modlist.map ({suffix or '', paths}) -> joinTree('', paths).map -> it+suffix
+
 
 joinTree = exports.joinTree = function joinTree(root, tree)
     return ["#root/#tree"] if typeof tree is 'string'

diff --git a/www/css/colors.styl b/www/css/colors.styl
new file mode 100644 (file)
index 0000000..0069ec3
--- /dev/null
+++ b/www/css/colors.styl
@@ -0,0 +1,30 @@
+/** Project Colors **/
+
+/* background colors */
+$main_bgcolor = #fff
+$page_bgcolor = #eee
+$foot_bgcolor = #3b3b3b
+
+/* text & link colors */
+$body_text    = #333
+$foot_text    = #505050
+$body_link    = #2d588f
+$foot_link    = #666
+
+/* spot colors */
+$hilite_dkblue  = #182B53
+$hilite_ltblue  = #4596FF
+$hilite_teal    = #00FFBC
+$hilite_green   = #B1E43B
+$hilite_yellow  = #F1D950
+$hilite_orange  = #EF8158
+$hilite_red     = #AD3238
+$hilite_pink    = #FF0097
+$hilite_purple  = #553DC9
+
+
+/** Color Helpers **/
+
+invert($v)
+    hsla( 180deg * hue($v), 100% - saturation($v), 100% - lightness($v), alpha($v) )
+

diff --git a/www/css/forms.styl b/www/css/forms.styl
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/www/css/graph.styl b/www/css/graph.styl
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/www/css/kraken.styl b/www/css/kraken.styl
deleted file mode 100644 (file)
index 7467fea..0000000
--- a/www/css/kraken.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-body
-    font-family menlo
\ No newline at end of file

diff --git a/www/css/layout.styl b/www/css/layout.styl
new file mode 100644 (file)
index 0000000..ecf0063
--- /dev/null
+++ b/www/css/layout.styl
@@ -0,0 +1,79 @@
+@import 'nib'
+@import 'colors'
+@import 'text'
+
+
+header, footer, #content
+    position relative
+    padding 0.5em
+
+#content
+    z-index 10
+    min-height 100%
+    background-color $page_bgcolor
+    box-shadow 0px 0px 6px 2px rgba(0,0,0,0.4)
+    
+    // .spacer offsets #content to pad for header
+    .spacer
+        font-size 250%
+        margin-top 1em
+        padding-top 1em
+    
+    .notice
+        absolute top 1.25em left 50%
+        // animate to 4em to display:
+        // absolute top 4em left 50%
+        margin-left -25%
+        width 50%
+        padding 0.25em
+        border-radius 0.5em
+        text-align center
+        
+        &.info
+            color white
+            background #4596FF
+        &.error
+            color white
+            background #AF2A31
+
+nav
+    absolute top right 16px
+    height 100%
+    
+    ul, li
+        relative top left
+    
+    ul
+        height 100%
+        top 50%
+    
+    li
+        display inline-block
+        top -0.75em
+        margin 0 0.5em
+    
+
+header
+    z-index 1000
+    fixed top left
+    z-index 100
+    width 100%
+    height auto
+    background-color $main_bgcolor
+    box-shadow 0px 0px 6px 2px rgba(0,0,0,0.3)
+    
+    h1
+        font-size 150%
+        margin 0 0 0 1em
+
+footer
+    z-index 1
+    padding 1em 2em
+    background-color $foot_bgcolor
+    // TODO: 3-column "fat" footer
+    
+
+
+
+
+

diff --git a/www/css/text.styl b/www/css/text.styl
new file mode 100644 (file)
index 0000000..7d09a3f
--- /dev/null
+++ b/www/css/text.styl
@@ -0,0 +1,39 @@
+@import 'colors'
+
+
+$font_size     = 16px
+$fonts_body    = helvetica, arial, sans-serif
+$fonts_headers = "gotham rounded", "helvetica neue", helvetica, arial, sans-serif
+
+
+html, body
+    font-family $fonts_body
+    font-size $font_size
+    line-height 1.5
+    color $body_text
+    background-color $foot_bgcolor
+
+a, a:link, a:visited, a:active
+    color $body_link
+    text-decoration underline
+    &:hover
+        text-decoration none
+
+h1, h2, h3
+    font-family $fonts_headers
+    color $body_text
+    font-weight 300
+    
+    a, a:link, a:visited, a:active
+        color $body_text
+        text-decoration none
+        &:hover
+            color $body_text
+
+footer
+    color $foot_text
+    
+    a, a:link, a:visited, a:active
+        color $foot_link
+    
+

diff --git a/www/graph.jade b/www/graph.jade
index a6dd409..7993c72 100644 (file)
--- a/www/graph.jade
+++ b/www/graph.jade
@@ -1,9 +1,14 @@
 extends layout
 
 block title
-    title Kraken Test Graph
+    title Kraken: Graph Test Page
 
-block content
-    section#graph
+append content
+    section.graph
+        .viewport
+        fieldset.settings
+            legend Settings
+            
+            mixin text_field('data', 'data/page_views_by_project.csv')
     
 

diff --git a/www/js/kraken-ui b/www/js/kraken
similarity index 100%
rename from www/js/kraken-ui
rename to www/js/kraken

diff --git a/www/layout.jade b/www/layout.jade
index a071531..374da14 100644 (file)
--- a/www/layout.jade
+++ b/www/layout.jade
@@ -1,35 +1,47 @@
+include mixins/forms
+
 !!! html
 html
     head
-        meta(http-equiv="content-type", content="text/html; charset=utf-8")
-        link(type='text/css', rel='stylesheet', media='screen', href='/css/reset.min.css')
-        link(type='text/css', rel='stylesheet', media='screen', href="/css/kraken.css")
         block head
-        link(type="image/ico", rel="icon", href="/favicon.ico")
-        link(type="image/x-icon", rel="shortcut icon", href="/favicon.ico")
-        block title
-            title Kraken
+            meta(http-equiv="content-type", content="text/html; charset=utf-8")
+            
+            block styles
+                link(type='text/css', rel='stylesheet', media='screen', href='/css/reset.min.css')
+                link(type='text/css', rel='stylesheet', media='screen', href="/css/layout.css?#{version}")
+            
+            link(type="image/ico", rel="icon", href="/favicon.ico")
+            link(type="image/x-icon", rel="shortcut icon", href="/favicon.ico")
+            
+            block title
+                title Kraken
+    
     body
-        header
-            h1: a(href="/") Kraken
-            //- 
-                block nav
-                    nav#menu: ul
-                        li.home Home
-            block header
-        
-        section#content
-            block content
-                .inner
-        
-        footer
-            block footer
-        
-        .scripts
-            //- script(src='/lib/lib-bundle.min.js')
-            for src in sources(WWW+'/modules.yaml')
-                script(src=src+"?"+version)
-            block scripts
-            script(src="/js/kraken-ui/main.js")
-        
+        block body
+            header
+                block header
+                    h1: a(href="/") Kraken
+                    block nav
+                        nav#menu: ul
+                            block menu-items
+                                li.home Home
+            
+            section#content
+                .spacer
+                
+                block content
+            
+            footer
+                block footer
+            
+            .scripts
+                block scripts
+                    //- script(src='/lib/lib-bundle.min.js')
+                    for src in sources(WWW+'/modules.yaml')
+                        script(src=src+"?"+version, type="text/javascript")
+                    
+                    block page-scripts
+                    
+                    script(src="/js/kraken/main.js")
+            
 

diff --git a/www/mixins/forms.jade b/www/mixins/forms.jade
new file mode 100644 (file)
index 0000000..9cdfccc
--- /dev/null
+++ b/www/mixins/forms.jade
@@ -0,0 +1,13 @@
+
+mixin text_field(name, value, opts)
+    - opts      = opts || {}
+    - value     = value || ''
+    - var label = opts.label || _.humanize(name)
+    - var id    = opts.id || _.underscored(name)
+    
+    .field
+        label(for=id) #{label}
+        input(id=id, name=name, type="text", value=value)
+
+
+

diff --git a/www/modules.yaml b/www/modules.yaml
index fc83c4c..5f12e1f 100644 (file)
--- a/www/modules.yaml
+++ b/www/modules.yaml
@@ -1,3 +1,4 @@
+all:
 -   suffix: .js
     paths:
     - vendor:
@@ -22,3 +23,5 @@
 # -   suffix: .js
 #     paths:
 #     - js/kraken-ui/main
+prod: []
+dev: []