Doc styling tweaks

docs/css/newdocs.css

@@ -5,11 +5,25 @@ html {
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/
-    height:100%;
     font-size:16px;
+    line-height: 1.5em;
     background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
 }
 
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 40px 0 20px 0;
+}
+
+ul {
+    margin-top: 0.7em;
+    margin-bottom: 0.7em;
+}
+
+p {
+    margin: 20px 0;
+}
+
 img.icon {
     position:relative;
     top:-2px;
@@ -37,67 +51,83 @@ div.blogHeader {
 
 div.full {
     min-height:100%;
-    box-shadow:0px 2px 10px rgba(0,0,0,0.4);
-    padding-left:20px;
-    padding-right:20px;
+    box-shadow:0 2px 10px rgba(0,0,0,0.4);
+    padding: 20px 10px 40px 10px;
     background-color:#ffffff;
 }
 
+@media (min-width: 768px) {
+    div.full {
+        padding: 40px 40px 80px 40px;
+    }
+}
+
+@media (min-width: 992px) {
+    div.full {
+        padding: 80px 80px 160px 80px;
+    }
+}
+
 table.moduleTable {
-    border:1px solid #eeeeee;
-    font-size:14px;
-    max-width: 900px;
 }
 
-table.moduleTable td{
-    min-width: 80px;
-    padding:2px 5px 2px 5px;
-    height:35px;
+table.moduleTable th,
+table.moduleTable td {
+    padding: 5px 15px;
+    border: 1px solid #dddddd;
 }
 
-table.moduleTable tr{
-    border:1px solid #eeeeee;
-    vertical-align: top;
 
+table.moduleTable th {
+    background-color: #f5f5f5;
 }
 
-tr.header {
-    color: #1f3350;
-    background-color: #cccccc;
-    border-bottom:1px solid #999999 !important;
-    font-size:16px;
-    font-style:italic;
+table.moduleTable td {
+    vertical-align: top;
 }
 
+
+/* TODO: cleanup */
+/*tr.header {*/
+    /*color: #1f3350;*/
+    /*background-color: #cccccc;*/
+    /*border-bottom:1px solid #999999 !important;*/
+    /*font-size:16px;*/
+    /*font-style:italic;*/
+/*}*/
+
 td.mid {
-    background-color: rgba(0,0,0,0.035);
+    background-color: #f5f5f5;
 
     font-style:italic;
 }
 
-td.properties {
-    width:150px;
-}
+/*td.properties {*/
+    /*width:150px;*/
+/*}*/
 
-p {
-    min-width:400px;
-    max-width:1000px;
-}
+/*p {*/
+    /*max-width:1000px;*/
+/*}*/
 
 
-pre.code {
-    padding:2px 4px;
-    font-size:90%;
-    color:#c7254e;
-    background-color:#f9f2f4;
-    border-radius:4px;
-    border:0px;
-}
+/*pre.code {*/
+    /*padding:2px 4px;*/
+    /*font-size:90%;*/
+    /*color: #444444;*/
+    /*background-color:#f9f2f4;*/
+    /*border-radius:4px;*/
+    /*border:0;*/
+/*}*/
 
-pre.top {
-    margin-left:20px;
+pre {
+    margin: 20px 0;
 }
 
+/*pre.top {*/
+    /*margin-left:20px;*/
+/*}*/
+
 tr.hidden {
     max-height:0;
     /*max-height: 0;*/
@@ -151,7 +181,7 @@ tr.toggle {
 
 
 tr.toggle.collapsible {
-    background-color: #f7f7f7;
+    background-color: #f5f5f5;
     border-left: 3px solid #89b3ff;
 }
 
@@ -164,29 +194,30 @@ td.indent2 {
     padding-left:50px !important;
 }
 
-td.name {
-    width:230px;
-}
+/* TODO: cleanup */
+/*td.name {*/
+    /*width:230px;*/
+/*}*/
 
-td.nameSmall {
-    width:150px;
-}
+/*td.nameSmall {*/
+    /*width:150px;*/
+/*}*/
 
-td.type {
-    width: 110px;
-}
+/*td.type {*/
+    /*width: 110px;*/
+/*}*/
 
-td.default {
-    width:60px;
-}
+/*td.default {*/
+    /*width:60px;*/
+/*}*/
 
-td.eventProperties {
-    width:150px;
-}
+/*td.eventProperties {*/
+    /*width:150px;*/
+/*}*/
 
-td.methodName {
-    width:250px;
-}
+/*td.methodName {*/
+    /*width:250px;*/
+/*}*/
 
 pre.options {
     max-width:600px;

docs/graph2d/index.html

@@ -261,11 +261,11 @@ var items = [
 </pre>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Required</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Description</th>
         </tr>
         <tr>
             <td>x</td>
@@ -327,11 +327,11 @@ groups.add({
     </p>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Required</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Description</th>
         </tr>
         <tr>
             <td>id</td>
@@ -397,11 +397,11 @@ var options = {
     The options colored in green can also be used as options for the groups. All options are optional.
 
     <table class="moduleTable" id="g2dOptions">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Default</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Default</th>
+            <th>Description</th>
         </tr>
 
         <tr>
@@ -717,11 +717,11 @@ function (value) {
     </p>
 
     <table class="moduleTable" id="optionTable">
-        <tr class="header">
-            <td>Name</td>
-            <td>Type</td>
-            <td>Default</td>
-            <td>Description</td>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Default</th>
+            <th>Description</th>
         </tr>
 
         <tr>
@@ -986,10 +986,10 @@ function (value) {
     </p>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>Method</td>
-            <td>Return Type</td>
-            <td>Description</td>
+        <tr>
+            <th>Method</th>
+            <th>Return Type</th>
+            <th>Description</th>
         </tr>
         <tr>
             <td>clear([what])</td>
@@ -1185,10 +1185,10 @@ Graph2d.off('rangechanged', onChange);
     </p>
 
     <table class="moduleTable">
-        <tr class="header">
-            <td>name</td>
-            <td>Description</td>
-            <td>Properties</td>
+        <tr>
+            <th>name</th>
+            <th>Description</th>
+            <th>Properties</th>
         </tr>
         <tr>
             <td>click</td>
@@ -1347,16 +1347,6 @@ Graph2d.off('rangechanged', onChange);
         <a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
     </p>
 
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/configure.html

@@ -119,11 +119,11 @@ network.setOptions(options);
     <p>As shown above, alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code>, <code>Function</code> or
         <code>Boolean</code>. These will do the same as the filter option described below.</p>
     <table class="moduleTable">
-        <tr class="header">
-            <td class="nameSmall">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr>
             <td>enabled</td>
@@ -157,13 +157,6 @@ function (option, path) {
         </tr>
     </table>
 
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/edges.html

@@ -192,11 +192,11 @@ network.setOptions(options);
 
     <p>These options can also be set per individual edge.</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header">
-            <td class="name">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','arrows', this);">
             <td><span parent="arrows" class="right-caret"></span> arrows</td>
@@ -633,13 +633,6 @@ var options: {
         </tr>
     </table>
 
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/groups.html

@@ -106,11 +106,11 @@ network.setOptions(options);
 </pre>
     <p>All of the individual options are explained here:</p>
     <table class="moduleTable">
-        <tr class="header">
-            <td class="name">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr>
             <td>useDefaultGroups</td>
@@ -147,13 +147,6 @@ var options = {
         </tr>
     </table>
 
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/new_network.html → docs/network/index.html

@@ -281,11 +281,11 @@ network.setOptions(options);
         <p>The individual options are explained below. The ones referring to modules are explained in the corresponding
             module.</p>
         <table class="moduleTable">
-            <tr class="header">
-                <td>name</td>
-                <td>type</td>
-                <td>default</td>
-                <td>description</td>
+            <tr>
+                <th>name</th>
+                <th>type</th>
+                <th>default</th>
+                <th>description</th>
             </tr>
             <tr>
                 <td>autoResize</td>
@@ -1020,10 +1020,10 @@ var locales = {
 
         <p>The options object supplied to the cluster functions can contain these properties:</p>
         <table class="moduleTable">
-            <tr class="header">
-                <td class="name">name</td>
-                <td>Type</td>
-                <td>description</td>
+            <tr>
+                <th class="name">name</th>
+                <th>Type</th>
+                <th>description</th>
             </tr>
             <tr>
                 <td>joinCondition(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td>
@@ -1120,10 +1120,10 @@ var options = {
 
         <p>These events are fired by the interaction module. They are related to user input.</p>
         <table class="moduleTable">
-            <tr class="header">
-                <td class="eventName">name</td>
-                <td class="eventProperties">properties</td>
-                <td>description</td>
+            <tr>
+                <th class="eventName">name</th>
+                <th class="eventProperties">properties</th>
+                <th>description</th>
             </tr>
             <tr class="subHeader">
                 <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
@@ -1445,11 +1445,11 @@ var network = new vis.Network(container, data);
 
         There are a few options you can use to tell Vis what to do with the data from Gephi.
         <table class="moduleTable">
-            <tr class="header">
-                <td>name</td>
-                <td>type</td>
-                <td>default</td>
-                <td>description</td>
+            <tr>
+                <th>name</th>
+                <th>type</th>
+                <th>default</th>
+                <th>description</th>
             </tr>
             <tr>
                 <td>nodes.fixed</td>
@@ -1480,16 +1480,6 @@ var network = new vis.Network(container, data);
         </table>
     </div>
 
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/interaction.html

@@ -118,7 +118,7 @@ network.setOptions(options);
 
     <p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>
+        <tr><th>name</th><th>type</th><th>default</th><th>description</th></tr>
         <tr><td>dragNodes</td>              <td class="mid">Boolean</td>            <td class="mid"><code>true</code></td>      <td>When true, the nodes that are not fixed can be dragged by the user.</td></tr>
         <tr><td>dragView</td>               <td class="mid">Boolean</td>            <td class="mid"><code>true</code></td>      <td>When true, the view can be dragged around by the user.</td></tr>
         <tr><td>hideEdgesOnDrag</td>        <td class="mid">Boolean</td>            <td class="mid"><code>false</code></td>     <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
@@ -137,13 +137,6 @@ network.setOptions(options);
         <tr><td>zoomView</td>               <td class="mid">Boolean</td>            <td class="mid"><code>true</code></td>      <td>When true, the user can zoom in.</td></tr>
     </table>
 
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/layout.html

@@ -110,7 +110,7 @@ network.setOptions(options);
 </pre>
     <p>When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>
+        <tr><th>name</th><th>type</th><th>default</th><td>description</td></tr>
         <tr><td>randomSeed</td><td class="mid">Number</td><td class="mid"><code>undefined</code></td>               <td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td class="mid">Object or Boolean</td><td class="mid"><code>Object</code></td>      <td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
         <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td>        <td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
@@ -121,13 +121,6 @@ network.setOptions(options);
             Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
     </table>
 
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/manipulation.html

@@ -110,7 +110,7 @@ var options = {
 network.setOptions(options);
 </pre>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>
+        <tr><th>name</th><th>type</th><th>default</th><td>description</td></tr>
         <tr><td>enabled</td>                    <td class="mid">Boolean</td>                <td class="mid"><code>false</code></td>     <td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
         <tr><td>initiallyActive</td>            <td class="mid">Boolean</td>                <td class="mid"><code>true</code></td>      <td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
         <tr><td>addNode</td>                    <td class="mid">Boolean or Function</td>    <td class="mid"><code>true</code></td>      <td>You can use these options to switch certain functionalities on or off of attach
@@ -173,15 +173,6 @@ var options = {
 }
 </pre></td></tr>
     </table>
-
-
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/nodes.html

@@ -191,11 +191,11 @@ network.setOptions(options);
 
     <p>These options can also be set per individual node. All of the individual options are explained here:</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header">
-            <td class="name">name</td>
-            <td class="type">type</td>
-            <td class="default">default</td>
-            <td class="description">description</td>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
         </tr>
         <tr>
             <td>borderWidth</td>
@@ -632,14 +632,6 @@ mySize = minSize + diff * scale;
         </tr>
     </table>
 
-
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-    <br/>
 </div>
 
 <!-- Bootstrap core JavaScript

docs/network/physics.html

@@ -142,7 +142,7 @@ network.setOptions(options);
 </pre>
     <p>All of the individual options are explained here:</p>
     <table class="moduleTable" id="optionTable">
-        <tr class="header"><td class="name">name</td><td class="type">type</td><td>default</td><td>description</td></tr>
+        <tr><th class="name">name</th><th class="type">type</th><th>default</th><th>description</th></tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td>                       <td class="mid">Object</td>         <td class="mid"><code>Object</code></td>    <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
         <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.gravitationalConstant</td>        <td class="mid">Number</td>         <td class="mid"><code>-2000</code></td>     <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
         <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.centralGravity</td>               <td class="mid">Number</td>         <td class="mid"><code>0.3</code></td>       <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
@@ -186,14 +186,6 @@ network.setOptions(options);
         <tr><td>timestep</td>                               <td class="mid">Number</td>         <td class="mid"><code>0.5</code></td>        <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
     </table>
 
-
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
 </div>
 
 <!-- Bootstrap core JavaScript

docs/timeline/index.html

@@ -231,11 +231,11 @@ var items = [
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Name</td>
-      <td>Type</td>
-      <td>Required</td>
-      <td>Description</td>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
     </tr>
     <tr>
       <td>className</td>
@@ -245,7 +245,7 @@ var items = [
         an individual css style. For example, when an item has className
         'red', one can define a css style like:
       <pre class="prettyprint lang-css">
-.vis.timeline .red {
+.vis-item.red {
   color: white;
   background-color: red;
   border-color: darkred;
@@ -361,11 +361,11 @@ var groups = [
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Name</td>
-      <td>Type</td>
-      <td>Required</td>
-      <td>Description</td>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
     </tr>
     <tr>
       <td>className</td>
@@ -448,11 +448,11 @@ var options = {
   </p>
 
   <table class="moduleTable" id="optionTable">
-    <tr class="header">
-      <td>Name</td>
-      <td>Type</td>
-      <td>Default</td>
-      <td>Description</td>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Description</th>
     </tr>
 
     <tr>
@@ -919,10 +919,10 @@ var options = {
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Method</td>
-      <td>Return Type</td>
-      <td>Description</td>
+    <tr>
+      <th>Method</th>
+      <th>Return&nbsp;Type</th>
+      <th>Description</th>
     </tr>
 
     <tr>
@@ -1182,10 +1182,10 @@ timeline.off('select', onSelect);
       <col style="width: 40%;">
     </colgroup>
 
-    <tr class="header">
-      <td>name</td>
-      <td>Description</td>
-      <td>Properties</td>
+    <tr>
+      <th>name</th>
+      <th>Description</th>
+      <th>Properties</th>
     </tr>
 
     <tr>
@@ -1470,7 +1470,10 @@ var options = {
   </p>
 
   <table class="moduleTable" >
-    <tr class="header"><td>Language</td><td>Code</td></tr>
+    <tr>
+      <th>Language</th>
+      <th>Code</th>
+    </tr>
     <tr>
       <td>English</td>
       <td>
@@ -1518,8 +1521,8 @@ var options = {
   </p>
 
   <table class="moduleTable" >
-    <tr class="header">
-      <td>Description</td><td>values</td>
+    <tr>
+      <th>Description</th><th>values</th>
     </tr>
     <tr>
       <td>Alternating columns</td><td class="mid"><code>vis-even</code>, <code>vis-odd</code></td>
@@ -1574,15 +1577,6 @@ var options = {
     No data is sent to any server.
   </p>
 
-
-
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
 </div>
 
 <!-- Bootstrap core JavaScript