Updates callout style.
authorDavid Schoonover <dsc@wikimedia.org>
Thu, 7 Jun 2012 05:08:32 +0000 (22:08 -0700)
committerDavid Schoonover <dsc@wikimedia.org>
Thu, 7 Jun 2012 05:08:42 +0000 (22:08 -0700)
lib/graph/graph-view.co
lib/server/controllers/graph.co
lib/template/graph/graph-display.jade
www/css/graph-display.styl
www/css/graph.styl

index 3a4617e..322438a 100644 (file)
@@ -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: ->
index 50a11bb..c7f2462 100644 (file)
@@ -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'
index d957a66..fa4a612 100644 (file)
@@ -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
index 07f9e66..b7c50ea 100644 (file)
@@ -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
         
index f29d9d1..9ccff5d 100644 (file)
@@ -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