From 49c96f31a89498b5c6e571847d31680ab18d865d Mon Sep 17 00:00:00 2001 From: David Schoonover Date: Wed, 6 Jun 2012 23:45:23 -0700 Subject: [PATCH] Moves legend to the left, along with the callout. Updates dashboard style. --- lib/template/graph/graph-display.jade | 14 +++++++------- www/css/dashboard.styl | 13 ++++++++++++- www/css/graph-display.styl | 31 +++++++++++++++++++++---------- www/css/graph.styl | 16 +++++++++++----- www/css/layout.styl | 9 --------- www/layout.jade | 1 - 6 files changed, 51 insertions(+), 33 deletions(-) diff --git a/lib/template/graph/graph-display.jade b/lib/template/graph/graph-display.jade index fa4a612..1c2e855 100644 --- a/lib/template/graph/graph-display.jade +++ b/lib/template/graph/graph-display.jade @@ -14,24 +14,24 @@ section.graph-display.graph(id=graph_id) h2.graph-name a(id="graph-title", href="#{model.toLink()}", data-bind='name') #{name} - .graph-viewport-row.row-fluid + .graph-viewport-row.row-fluid: .inner .viewport .graph-legend .graph-details-row.row - .span7.offset1.graph-desc(data-bind='desc') + .span7.offset3.ug.graph-desc(data-bind='desc') != jade.filters.markdown(desc) - .graph-details-row.row - .span6.offset1.graph-permalink + .graph-links-row.row + .span6.offset3.ug.graph-permalink input.span6(value="#{model.toPermalink()}", readonly="readonly") if ENV == 'dev' - .span1.a.export-button.btn(href="#") + a.span1.export-button.btn(href="#") i.icon-file | Export - .graph-details-row.row - .span6.offset1.graph-notes(data-bind='notes') + .graph-notes-row.row + .span7.offset3.ug.graph-notes(data-bind='notes') != jade.filters.markdown(notes) diff --git a/www/css/dashboard.styl b/www/css/dashboard.styl index 6f3eaa7..ababdfa 100644 --- a/www/css/dashboard.styl +++ b/www/css/dashboard.styl @@ -17,4 +17,15 @@ margin-top 18px -/* }}} */ \ No newline at end of file +/* }}} */ + +.dashboard + + section.graph + margin 7em auto + + section.graph:first-child + margin-top 0 + + .graph-links-row + display none diff --git a/www/css/graph-display.styl b/www/css/graph-display.styl index b7c50ea..fcac35d 100644 --- a/www/css/graph-display.styl +++ b/www/css/graph-display.styl @@ -4,21 +4,21 @@ section.graph-display.graph position relative max-width 900px - margin 0 auto + margin 3em auto * position relative .graph-name-row + margin-bottom 1em clearfix() /* * * * Chart & Viewport * * * {{{ */ .callout - float right + float left z-index 100 - width 200px - padding 0 1em 0 0 - font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif + width 15.385em + padding 0 6em 0 0 background-color white text-align right @@ -26,7 +26,7 @@ section.graph-display.graph font-size 18px line-height 36px .metric-change - // line-height 24px + font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif span display inline-block &.dates @@ -35,9 +35,9 @@ section.graph-display.graph width 60px .graph-legend - absolute top 1em right 1em + absolute top 1em left 0 z-index 100 - width 200px + width 14.667em padding 1em background-color rgba(255,255,255, 0.75) @@ -47,16 +47,19 @@ section.graph-display.graph b display inline-block - width 140px + width 10em .whole display inline-block - width 30px + width 2.5em text-align right .fraction text-align left .suffix text-align left + .graph-viewport-row > .inner + padding-left 17.385em + .viewport:hover + .graph-legend border 1px solid $light @@ -105,6 +108,14 @@ section.graph-display.graph min-width 5em text-align center + .graph-permalink + display inline-block + input + cursor auto + + .ug + padding-left 3em + /* }}} */ diff --git a/www/css/graph.styl b/www/css/graph.styl index 9ccff5d..ed0d26d 100644 --- a/www/css/graph.styl +++ b/www/css/graph.styl @@ -27,11 +27,10 @@ section.graph overflow hidden .callout - float right + float left z-index 100 - width 200px - padding 0 1em 0 0 - font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif + width 15.385em + padding 0 6em 0 0 background-color white text-align right @@ -39,9 +38,13 @@ section.graph font-size 18px line-height 36px .metric-change + font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif span display inline-block - width 100px + &.dates + width 140px + &.value + width 60px .graph-legend absolute top 1em right 1em @@ -168,6 +171,9 @@ section.graph min-width 5em text-align center + .graph-permalink input + cursor auto + .graph-spinner display none absolute bottom 3px left 0 diff --git a/www/css/layout.styl b/www/css/layout.styl index 3d35a2a..1892e48 100644 --- a/www/css/layout.styl +++ b/www/css/layout.styl @@ -58,15 +58,6 @@ header, footer, #content position relative padding 0.5em -.watermark - display none - absolute top 0 left 0 - z-index 11 - width 250px - height 250px - background transparent no-repeat -75px -50px url("/img/wmf_logo/wmf_logo-black-250x250-a100.png") - opacity 0.05 - #content z-index 10 padding 1em diff --git a/www/layout.jade b/www/layout.jade index 954686c..3b325e8 100644 --- a/www/layout.jade +++ b/www/layout.jade @@ -24,7 +24,6 @@ html(lang="en", dir="ltr") body block body - .watermark section#content .inner -- 1.7.0.4