From 3e81f5ddf611076f2ac869c51667ccace87223d3 Mon Sep 17 00:00:00 2001
From: Robert Konigsberg <konigsberg@google.com>
Date: Mon, 16 Jan 2012 19:46:21 -0500
Subject: [PATCH] Cleaned up nasty table style.

---
 gallery/README         |  2 --
 gallery/interaction.js | 69 +++++++++++++++++++++++++++-----------------------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/gallery/README b/gallery/README
index 6c8d357..fc0e5e8 100644
--- a/gallery/README
+++ b/gallery/README
@@ -26,7 +26,5 @@ Tips on adding entries to the gallery
 TODOs:
   * Remove the awful tables in interaction.html (that I wrote)
   * Move all style to css
-  * Consider moving HTML to HTML files that are read via XMLHTTP
   * Add margin-left: 30px to #workarea, and then make #workarea h2 { margin-left: -30px}
-  * Standard width. No need for very wide graphs.
   * Remove runtime warnings.
\ No newline at end of file
diff --git a/gallery/interaction.js b/gallery/interaction.js
index 03b30e4..69a812c 100644
--- a/gallery/interaction.js
+++ b/gallery/interaction.js
@@ -5,37 +5,44 @@ Gallery.register(
     title: 'title',
     setup: function(parent) {
       parent.innerHTML = [
-          "<table border='1'>",
-          "<tr><td>",
-          "<b>Default interaction model</b>",
-          "<div id='div_g' style='width:600px; height:300px;'></div>",
-          "</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>",
-          "</td></tr>",
-          "<tr><td>",
-          "<b>No interaction model</b>",
-          "<div id='div_g2' style='width:600px; height:300px;'></div>",
-          "</td><td>Click and drag all you like, it won't do anything!",
-          "<div id='g2_console'></div>",
-          "</td></tr>",
-          "<tr><td>",
-          "<b>Custom interaction model</b>",
-          "<button id='restore3'>Restore Position</button>",
-          "<div id='div_g3' style='width:600px; height:300px;'></div>",
-          "</td><td>",
-          "Zoom in: double-click, scroll wheel<br/>",
-          "Zoom out: ctrl-double-click, scroll wheel<br/>",
-          "Standard Zoom: shift-click-drag",
-          "Standard Pan: click-drag<br/>",
-          "Restore zoom level: press button<br/>",
-          "</td></tr>",
-          "<tr><td>",
-          "<b>Fun model!</b>",
-          "<div id='div_g4' style='width:600px; height:300px;'></div>",
-          "</td><td>",
-          "Keep the mouse button pressed, and hover over all points",
-          "to mark them.",
-          "</td></tr>",
-          "</table>"].join("\n");
+          "<h2>Default interaction model</h2>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Zoom: click-drag, Pan: shift-click-drag, Restore: double-click",
+          "  </p>",
+          "  <div id='div_g' style='width:600px; height:300px;'></div>",
+          "</div>",
+          "",
+          "<h2>Empty interaction model</h2>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Click and drag all you like, it won't do anything!",
+          "  </p>",
+          "  <div id='div_g2' style='width:600px; height:300px;'></div>",
+          "</div>",
+          "<div id='g2_console'></div>", // what is this?
+          "",
+          "<h2>Custom interaction model</h2>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Zoom in: double-click, scroll wheel<br/>",
+          "    Zoom out: ctrl-double-click, scroll wheel<br/>",
+          "    Standard Zoom: shift-click-drag",
+          "    Standard Pan: click-drag<br/>",
+          "    Restore zoom level: press button<br/>",
+          "  </p>",
+          "  <button id='restore3'>Restore position</button>",
+          "  <div id='div_g3' style='width:600px; height:300px;'></div>",
+          "</div>",
+          "<h2>Fun model!</h2>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Keep the mouse button pressed, and hover over all points",
+          "    to mark them.",
+          "  </p>",
+          "  <div id='div_g4' style='width:600px; height:300px;'></div>",
+          "</div>",
+          ].join('\n');
 
     },
     run: function() {
-- 
2.7.4