From: David Schoonover Date: Thu, 7 Jun 2012 05:08:32 +0000 (-0700) Subject: Updates callout style. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=7b2bfbd333c693fae089cb95046511b31dc89713;p=kraken-ui.git Updates callout style. --- diff --git a/data/graphs/test.json b/data/graphs/test.json index 560e988..3d00020 100644 --- a/data/graphs/test.json +++ b/data/graphs/test.json @@ -1,110 +1,110 @@ { "options": { - "animatedZooms": true, - "avoidMinZero": false, - "axis": null, - "axisLabelColor": "#666666", - "axisLabelFontSize": 11, - "axisLabelFormatter": null, - "axisLabelWidth": 50, - "axisLineColor": "#AAAAAA", - "axisLineWidth": 0.3, - "axisTickSize": 3, - "colorSaturation": 1, - "colorValue": 0.5, + "animatedZooms": true, + "avoidMinZero": false, + "axis": null, + "axisLabelColor": "#666666", + "axisLabelFontSize": 11, + "axisLabelFormatter": null, + "axisLabelWidth": 50, + "axisLineColor": "#AAAAAA", + "axisLineWidth": 0.3, + "axisTickSize": 3, + "colorSaturation": 1, + "colorValue": 0.5, "colors": [ - "#FF0097", - "#EF8158", - "#83BB32", - "#182B53", - "#4596FF", - "#553DC9", - "#AD3238", - "#00FFBC", + "#FF0097", + "#EF8158", + "#83BB32", + "#182B53", + "#4596FF", + "#553DC9", + "#AD3238", + "#00FFBC", "#F1D950" - ], - "connectSeparatedPoints": false, - "customBars": false, - "dateWindow": null, - "delimiter": ",", - "digitsAfterDecimal": 2, - "displayAnnotations": false, - "drawPoints": true, - "drawXAxis": true, - "drawXGrid": true, - "drawYAxis": true, - "drawYGrid": true, - "errorBars": false, - "file": null, - "fillAlpha": 0.15, - "fillGraph": false, - "fractions": false, - "gridLineColor": "#D8D8D8", - "gridLineWidth": 0.3, - "hideOverlayOnMouseOut": false, - "highlightCircleSize": 4, - "includeZero": false, - "interactionModel": null, - "isZoomedIgnoreProgrammaticZoom": false, - "labels": null, - "labelsDiv": null, - "labelsDivStyles": null, - "labelsDivWidth": 250, - "labelsKMB": true, - "labelsKMG2": false, - "labelsSeparateLines": true, - "labelsShowZeroValues": true, - "legend": "always", - "logscale": true, - "maxNumberWidth": 30, - "panEdgeFraction": null, - "pixelsPerLabel": null, - "pixelsPerXLabel": null, - "pixelsPerYLabel": null, - "pointSize": 1, - "rangeSelectorHeight": 40, - "rangeSelectorPlotFillColor": "#A7B1C4", - "rangeSelectorPlotStrokeColor": "#808FAB", - "rightGap": 20, - "rollPeriod": 1, - "showLabelsOnHighlight": true, - "showRangeSelector": false, - "showRoller": false, - "sigFigs": null, - "sigma": 2, - "stackedGraph": false, - "stepPlot": false, - "strokePattern": null, - "strokeWidth": 3, - "ticker": null, - "title": null, - "titleHeight": 18, - "valueFormatter": null, - "valueRange": null, - "visibility": null, - "wilsonInterval": true, - "xAxisHeight": null, - "xAxisLabelFormatter": null, - "xAxisLabelWidth": 55, - "xLabelHeight": 18, - "xValueFormatter": null, - "xValueParser": null, - "xlabel": null, - "y2label": null, - "yAxisLabelFormatter": null, - "yAxisLabelWidth": 50, - "yLabelWidth": 18, - "yValueFormatter": null, + ], + "connectSeparatedPoints": false, + "customBars": false, + "dateWindow": null, + "delimiter": ",", + "digitsAfterDecimal": 2, + "displayAnnotations": false, + "drawPoints": true, + "drawXAxis": true, + "drawXGrid": true, + "drawYAxis": true, + "drawYGrid": true, + "errorBars": false, + "file": null, + "fillAlpha": 0.15, + "fillGraph": false, + "fractions": false, + "gridLineColor": "#D8D8D8", + "gridLineWidth": 0.3, + "hideOverlayOnMouseOut": false, + "highlightCircleSize": 4, + "includeZero": false, + "interactionModel": null, + "isZoomedIgnoreProgrammaticZoom": false, + "labels": null, + "labelsDiv": null, + "labelsDivStyles": null, + "labelsDivWidth": 250, + "labelsKMB": true, + "labelsKMG2": false, + "labelsSeparateLines": true, + "labelsShowZeroValues": true, + "legend": "always", + "logscale": true, + "maxNumberWidth": 30, + "panEdgeFraction": null, + "pixelsPerLabel": null, + "pixelsPerXLabel": null, + "pixelsPerYLabel": null, + "pointSize": 1, + "rangeSelectorHeight": 40, + "rangeSelectorPlotFillColor": "#A7B1C4", + "rangeSelectorPlotStrokeColor": "#808FAB", + "rightGap": 20, + "rollPeriod": 1, + "showLabelsOnHighlight": true, + "showRangeSelector": false, + "showRoller": false, + "sigFigs": null, + "sigma": 2, + "stackedGraph": false, + "stepPlot": false, + "strokePattern": null, + "strokeWidth": 3, + "ticker": null, + "title": null, + "titleHeight": 18, + "valueFormatter": null, + "valueRange": null, + "visibility": null, + "wilsonInterval": true, + "xAxisHeight": null, + "xAxisLabelFormatter": null, + "xAxisLabelWidth": 55, + "xLabelHeight": 18, + "xValueFormatter": null, + "xValueParser": null, + "xlabel": null, + "y2label": null, + "yAxisLabelFormatter": null, + "yAxisLabelWidth": 50, + "yLabelWidth": 18, + "yValueFormatter": null, "ylabel": "Number of Editors" - }, + }, - "slug": "test", - "id": "active_editors", + "slug": "test", + "id": "active_editors", "name": "Active Wikimedia Editors for All Wikimedia Projects (5+ edits per month)", - "desc": "Aug 2010: Editors on Commons are no longer included in overall total, on the assumption that most also edit on one or more other projects. More precise detection of double counts between any projects and languages is in development (using Single User Login registration).", + "desc": "Aug 2010: Editors on Commons are no longer included in overall total, on the assumption that most also edit on one or more other projects. More precise detection of double counts between any projects and languages is in development (using Single User Login registration).", "notes": "", "height": 250, - "width": "auto", + "width": "auto", "parents": ["root"], "data": { @@ -116,8 +116,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 1, - "label": "Total", - "color": "#E62F74", + "label": "Total!", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -135,8 +135,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 2, - "label": "English", - "color": "#E62F74", + "label": "English", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -154,8 +154,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 3, - "label": "Commons", - "color": "#E62F74", + "label": "Commons", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -173,8 +173,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 4, - "label": "French", - "color": "#E62F74", + "label": "French", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -192,8 +192,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 5, - "label": "German", - "color": "#E62F74", + "label": "German", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -211,8 +211,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 6, - "label": "Russian", - "color": "#E62F74", + "label": "Russian", + "color": "#E62F74", "type": "int", "timespan": { "start": null, diff --git a/docs/framework.md b/docs/internals/framework.md similarity index 100% rename from docs/framework.md rename to docs/internals/framework.md diff --git a/lib/graph/graph-view.co b/lib/graph/graph-view.co index 3a4617e..322438a 100644 --- a/lib/graph/graph-view.co +++ b/lib/graph/graph-view.co @@ -173,13 +173,6 @@ GraphView = exports.GraphView = BaseView.extend do # {{{ this /** - * Render the callout element. - */ - renderCallout: -> - - this - - /** * Render the chart and other Graph-derived view components. */ render: -> diff --git a/lib/server/controllers/graph.co b/lib/server/controllers/graph.co index 50a11bb..c7f2462 100644 --- a/lib/server/controllers/graph.co +++ b/lib/server/controllers/graph.co @@ -65,7 +65,7 @@ class GraphController extends Controller catch err console.error "GraphController.autoload(#id, #{typeof cb}) -->\nerr" cb err - + # GET /graphs.:format? index: (req, res) -> # if format is json, then return the graph JSON @@ -79,7 +79,7 @@ class GraphController extends Controller .seq (graphs) -> res.send _.values graphs default res.render 'graph/index' - + # GET /graphs/:graph show: (req, res) -> if req.format is 'json' diff --git a/lib/template/graph/graph-display.jade b/lib/template/graph/graph-display.jade index d957a66..fa4a612 100644 --- a/lib/template/graph/graph-display.jade +++ b/lib/template/graph/graph-display.jade @@ -2,9 +2,7 @@ include ../browser-helpers - var graph_id = view.id section.graph-display.graph(id=graph_id) - .graph-name-row.page-header.row-fluid - h2.graph-name - a(id="graph-title", href="#{model.toLink()}", data-bind='name') #{name} + .graph-name-row.row-fluid .callout .latest-metric(data-bind='callout.latest') #{callout.latest} .metric-change.year-over-year @@ -13,6 +11,8 @@ section.graph-display.graph(id=graph_id) .metric-change.month-over-month span.dates(data-bind='callout.month.dates') #{callout.month.dates} span.value(data-bind='callout.month.value') #{callout.month.value} + h2.graph-name + a(id="graph-title", href="#{model.toLink()}", data-bind='name') #{name} .graph-viewport-row.row-fluid .viewport diff --git a/www/css/graph-display.styl b/www/css/graph-display.styl index 07f9e66..b7c50ea 100644 --- a/www/css/graph-display.styl +++ b/www/css/graph-display.styl @@ -9,14 +9,16 @@ section.graph-display.graph * position relative + .graph-name-row + clearfix() + /* * * * Chart & Viewport * * * {{{ */ .callout - absolute top 0 right 1em + float right z-index 100 width 200px - padding 0 0 2em 4em + padding 0 1em 0 0 font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif - border-radius 5px background-color white text-align right @@ -27,10 +29,13 @@ section.graph-display.graph // line-height 24px span display inline-block - width 100px + &.dates + width 140px + &.value + width 60px .graph-legend - absolute top 2em right 1em + absolute top 1em right 1em z-index 100 width 200px diff --git a/www/css/graph.styl b/www/css/graph.styl index f29d9d1..9ccff5d 100644 --- a/www/css/graph.styl +++ b/www/css/graph.styl @@ -27,12 +27,11 @@ section.graph overflow hidden .callout - absolute top 0 right 1em + float right z-index 100 width 200px - padding 0 0 2em 4em - font 12px/1.5 "helvetica neue", helvetica, arial, sans-serif - border-radius 5px + padding 0 1em 0 0 + font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif background-color white text-align right @@ -40,13 +39,12 @@ section.graph font-size 18px line-height 36px .metric-change - // line-height 24px span display inline-block width 100px .graph-legend - absolute top 2em right 1em + absolute top 1em right 1em z-index 100 width 200px @@ -77,7 +75,6 @@ section.graph /* * * * Graph Details & Info Pane * * * {{{ */ .graph-name-row // Accommodate the callout box - padding-right 272px margin 0 0 1em min-height 38px