Moves legend to the left, along with the callout. Updates dashboard style.

diff --git a/lib/template/graph/graph-display.jade b/lib/template/graph/graph-display.jade
index fa4a612..1c2e855 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- a/www/layout.jade
+++ b/www/layout.jade
@@ -24,7 +24,6 @@ html(lang="en", dir="ltr")
     
     body
         block body
-            .watermark
             
             section#content
                 .inner