From: dsc Date: Thu, 16 Feb 2012 19:21:54 +0000 (-0800) Subject: First pass at UI styles. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=bda1d33507c1c6dafd1777d48e6216684dfdb03d;p=limn-bak.git First pass at UI styles. --- 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/kraken-ui.tmproj b/kraken-ui.tmproj index 53c1091..f6a473c 100644 --- a/kraken-ui.tmproj +++ b/kraken-ui.tmproj @@ -3,7 +3,7 @@ currentDocument - package.co + lib/main.co documents @@ -14,12 +14,20 @@ regexFileFilter !(?x: lib/version.js|package\.json |license\.md|paver-minilib\.zip|\.([oa]|dylib|fla|py[co]|mako\.py|pch|cm[oix]|cache|(xcode)proj)|(fish(_read)?_history|fishd\..*)|/Icon\r|/svn-commit(\.[2-9])?\.tmp|/\.(?!(git|svn|npm)ignore|htaccess|gitmodules)[^/]*)$ regexFolderFilter - !.*/(?x: data | static/vendor|www/js/kraken-ui | var|target|node_modules|html-template|bin-debug | \.[^/]* | .*\.(egg-info|framework|app|(pbx?|xcode)proj|xcode|bundle) | CVS|_darcs|_MTN|\{arch\}|blib | .*~\.nib )$ - selected - + !.*/(?x: data | static/vendor|www/js/kraken-ui | var|target|node_modules|html-template|bin-debug | \.((?!git-hooks)[^/]+) | .*\.(egg-info|framework|app|(pbx?|xcode)proj|xcode|bundle) | CVS|_darcs|_MTN|\{arch\}|blib | .*~\.nib )$ sourceDirectory + + children + + expanded + + name + source + selected + + fileHierarchyDrawerWidth 217 @@ -30,37 +38,23 @@ caret column - 0 - line - 9 - - firstVisibleColumn - 0 - firstVisibleLine - 0 - - lib/server/server.co - - caret - - column - 0 + 8 line - 0 + 10 firstVisibleColumn 0 firstVisibleLine 0 - package.co + www/layout.jade caret column - 43 + 63 line - 12 + 7 firstVisibleColumn 0 @@ -70,9 +64,8 @@ openDocuments - package.co - lib/server/server.co lib/main.co + www/layout.jade showFileHierarchyDrawer 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-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 --- 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: []