Update text description to svg so it automatically scales with the di…

…agram.

javascripts/engine/course.js

@@ -2,15 +2,14 @@
 NIL.course = function(course) {
     var diagram = new NIL.Diagram(course);
 
-    // Textual description
-    var description = new NIL.Description("#description");
-
     // SVG visualization
     var world = d3.select('body').append('div').attr('id', 'world')
                     .append("svg:svg")
-                        .attr('viewBox','0 0 1200 500')
+                        .attr('viewBox','0 0 1200 600')
                         .append("svg:g")
     ;
+    // Textual description
+    var description = new NIL.Description(world);
 
     // Navigation components
     var navigation = new NIL.Navigation({

javascripts/engine/description.js

@@ -1,29 +1,61 @@
-NIL.Description = function(selector) {
+NIL.Description = function(container) {
     this.update = update;
 
-    var node = d3.select('body')
-                    .append('div').attr('id', selector.slice(1))
+    var d3Container = container
+                        .append('g')
+                            .attr('class', 'description')
+                            .attr("text-anchor", 'middle')
+                            .attr('transform', 'translate(600,50)')
     ;
 
     function update(heading, content) {
-        node.html('');
+        d3Container
+            .html('')
+            .style('opacity', 0);
 
-        node.append('h1')
-            .html(heading)
-            .style('opacity', 0)
-            .attr('class', function() {
-                return (content.length == 0) ? 'big' : null;
-            })
-            .transition()
-                .duration(500)
-                .style('opacity', 1);
+        var width = d3Container
+                        .append('svg:text')
+                            .text(heading)
+                            .attr('y', 0)
+                            .node().clientWidth
+        ;
+
+        // line-break if needed
+        if(width > 1050) {
+            var words = heading.split(' '),
+                half = Math.ceil(words.length/2),
+                firstLine = words.slice(0, half).join(' '),
+                secondLine = words.slice(half, words.length).join(' ')
+            ;
+
+            d3Container
+                .html('')
+                .append('svg:text')
+                    .text(firstLine)
+            ;
+            d3Container
+                .append('svg:text')
+                    .attr('y', 40)
+                    .text(secondLine)
+            ;
+        }
+        else if(content.length > 0) {
+            d3Container
+                .append("foreignObject")
+                    .attr('transform', 'translate(-400,20)')
+                    .attr("width", 800)
+                    .attr("height", 100)
+                    .append("xhtml:body")
+                        .append('xhtml:div')
+                        .attr('class', 'sub-description')
+                            .html(content)
+            ;
+        }
 
-        node.append('div')
-            .html(content)
-            .style('opacity', 0)
+        d3Container
             .transition()
-                .delay(800)
-                .duration(500)
+                .delay(1000)
+                .duration(400)
                 .style('opacity', 1);
     }
 }

javascripts/engine/graph.js

@@ -110,7 +110,7 @@ NIL.Graph = function(items) {
             __dict__[id]._id = __dict__[id].id || __dict__[id].name;
             var coord = {
                 x : data[id][0],
-                y : data[id][1]
+                y : data[id][1] + 130
             }
 
             __dict__[id].x0 = 600;

layouts/courses.haml

@@ -6,15 +6,6 @@
     %meta{ name: "viewport", content: "width=device-width, initial-scale=1.0" }
     = stylesheets.load("application.css")
     = stylesheets.load("//fonts.googleapis.com/css?family=Nunito:300")
-    :css
-      body {
-        font-family: 'Nunito', sans-serif;
-        font-weight: 300;
-        font-size:15px;
-      }
-      #description div {
-        font-family: 'Nunito', sans-serif;
-      }
     = javascripts.load("offline/d3.v3.min.js")
     = javascripts.load("application.js")
     - if env == "production"

stylesheets/diagram.css.scss

@@ -120,4 +120,15 @@ http://www.colourlovers.com/palette/3443395/sugary
   .cross-out {
     fill: #e51c23;
   }
+
+  g.description {
+    font-family: inherit;
+    font-size: 30px;
+    fill: #757575;
+  }
+}
+
+body .sub-description {
+  font-size: 14px;
+  color: #757575;
 }

stylesheets/layout.css.scss

@@ -9,8 +9,9 @@ $alt-background-color: #212121;
 html, body {
   margin: 0;
   padding:0;
-  font-size: 14px;
-  font-family: "Helvetica Neue", Helvetica;
+  font-family: 'Nunito', "Helvetica Neue", Helvetica, sans-serif;
+  font-weight: 300;
+  font-size:15px;
 }
 h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
@@ -27,9 +28,18 @@ a {
     color: #666;
   }
 }
-svg {
+#world {
+  margin:auto;
+  width:100%;
+}
+#world svg {
+  display:block;
+  width: 100%;
+  margin:auto;
   overflow: visible;
+  font-family: inherit;
 }
+
 kbd {
   padding: 0.1em 0.6em;
   border: 1px solid #ccc;
@@ -87,14 +97,6 @@ body.visualizer {
   }
 }
 
-#world {
-  position: absolute;
-  bottom:20px;
-  width: 100%;
-  height: auto;
-}
-
-
 #table-of-contents {
   $border-color: #222;
   position: absolute;
@@ -185,26 +187,6 @@ body.visualizer {
 
 
 #description {
-  position: absolute;
-  top: 0;
-  left: 10%;
-  width: 80%;
-  height:200px;
-  z-index: 20;
-  overflow: visible;
-  background-color: transparent;
-  color:#555;
-  h1 {
-    font-size: 34px;
-    margin: 15px 0 0 0;
-    color: inherit;
-    line-height: 1.5em;
-    text-align: center;
-    text-transform:capitalize;
-    &.big {
-      font-size: 48px;
-    }
-  }
   div {
     font: 16px 'Helvetica Neue';
     color: inherit;

stylesheets/mobile.css.scss

@@ -1,5 +1,25 @@
-@media only screen 
-and (max-width : 1200px) {
+@media only screen and (min-width: 900px) and (max-height: 750px) {
+  #world {
+    width:90%;
+  }
+}
+@media only screen and (min-width: 900px) and (max-height: 700px) {
+  #world {
+    width:80%;
+  }
+}
+@media only screen and (min-width: 900px) and (max-height: 650px) {
+  #world {
+    width:70%;
+  }
+}
+@media only screen and (min-width: 900px) and (max-height: 600px) {
+  #world {
+    width:60%;
+  }
+}
+
+@media only screen and (max-width : 1200px) {
   #steps-count {
     right: 60px;
     height:30px;
@@ -18,19 +38,6 @@ and (max-width : 1200px) {
       width: 20px;
     }
   }
-  #description {
-    left: 0 !important;
-    top:0 !important;
-    width: 100%;
-    overflow: auto;
-    div {
-      font-size: 12px;
-    }
-    h1 {
-      font-size: 16px;
-      margin-bottom:10px;
-    }
-  }
   #table-of-contents {
     left:0;
     z-index: 50;