From 9ca5e45a45c6059a7766dcb747c269edfd78e17d Mon Sep 17 00:00:00 2001 From: dsc Date: Thu, 16 Feb 2012 11:21:54 -0800 Subject: [PATCH] First pass at UI styles. --- .gitignore | 1 + README.md | 3 -- lib/kraken-ui.js | 1 - lib/main.co | 2 +- lib/server/view-helpers.co | 19 ++++++++--- www/css/colors.styl | 30 ++++++++++++++++ www/css/kraken.styl | 2 - www/css/layout.styl | 79 ++++++++++++++++++++++++++++++++++++++++++++ www/css/text.styl | 39 +++++++++++++++++++++ www/graph.jade | 11 ++++-- www/js/kraken | 1 + www/js/kraken-ui | 1 - www/layout.jade | 70 +++++++++++++++++++++++---------------- www/mixins/forms.jade | 13 +++++++ www/modules.yaml | 3 ++ 15 files changed, 230 insertions(+), 45 deletions(-) delete mode 100644 lib/kraken-ui.js create mode 100644 www/css/colors.styl create mode 100644 www/css/forms.styl create mode 100644 www/css/graph.styl delete mode 100644 www/css/kraken.styl create mode 100644 www/css/layout.styl create mode 100644 www/css/text.styl create mode 120000 www/js/kraken delete mode 120000 www/js/kraken-ui create mode 100644 www/mixins/forms.jade diff --git a/.gitignore b/.gitignore index cad98b1..7484718 100644 --- 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 --- 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 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 --- 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 --- 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 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 index 0000000..e69de29 diff --git a/www/css/graph.styl b/www/css/graph.styl new file mode 100644 index 0000000..e69de29 diff --git a/www/css/kraken.styl b/www/css/kraken.styl deleted file mode 100644 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 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 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 --- 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 b/www/js/kraken new file mode 120000 index 0000000..58677dd --- /dev/null +++ b/www/js/kraken @@ -0,0 +1 @@ +../../lib \ No newline at end of file diff --git a/www/js/kraken-ui b/www/js/kraken-ui deleted file mode 120000 index 58677dd..0000000 --- a/www/js/kraken-ui +++ /dev/null @@ -1 +0,0 @@ -../../lib \ No newline at end of file diff --git a/www/layout.jade b/www/layout.jade index a071531..374da14 100644 --- 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 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 --- 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: [] -- 1.7.0.4