Merge pull request #2 from ooda/improv-ux

Improv ux

vwordnet/static/css/app.less

@@ -11,14 +11,20 @@
 
 
 body {
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 400;
     background-color: @background;
 }
 
+h2 {
+    font-weight: 600;
+}
+
 #alertContainer {
   position: fixed;
   top: 30px;
   width: 100%;
-  z-index: -1;
+  z-index: +10;
 }
 
 #jsAlert {
@@ -40,8 +46,8 @@ body {
 }
 
 #define {
-    margin-top: 40px;
     margin-left: 40px;
+    width: 300px;
 }
 
 
@@ -61,7 +67,12 @@ body {
 
 .js-node text {
     fill: @text;
-    font: 12px sans-serif;
+    font-size: 14px;
+    font-family: 'Source Sans Pro', sans-serif;
+}
+
+.js-more-node {
+    cursor: pointer;
 }
 
 .link {
@@ -82,11 +93,11 @@ circle.js-parent {
 }
 
 .rootsynset {
-    font-size: 24px;
+    font-size: 20px;
 }
 
 .synset {
-    font-size: 18px;
+    font-size: 15px;
     margin: 10px 0px 20px 20px;
 }
 
@@ -98,6 +109,11 @@ circle.js-parent {
     content: ':';
 }
 
-#spinner {
-    margin-bottom: 10px;
+.nav {
+    margin-bottom: 20px;
+}
+
+.nav > li > a {
+    padding: 5px 10px;
+    color: #333;
 }

vwordnet/static/css/base.css

@@ -1,19 +1,9 @@
 @import "bootstrap.min.css";
-@import "bootstrap-responsive.min.css";
-
-body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, default;
-}
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
 
 
 .navbar-inner {
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-
-
-a {
-    color: #5b4d3c;
-}
-

vwordnet/static/js/app.js

@@ -9,24 +9,23 @@ define([
   "d3",
   "viewmodel",
   "tree",
-  "infomsg"
+  "infomsg",
+  "bootstrap",
+  "kinetic"
 ],
 function ($, _, ko, d3, viewmodel, tree, infomsg) {
   var exports = {}, define, addGraph;
 
   exports.initialize = function () {
     console.log("Initializing app.");
     ko.applyBindings(viewmodel);
+    $("body").kinetic({cursor: 'default', slowdown: 0.7});
   };
 
   viewmodel.define = function (word) {
     define(viewmodel.word());
   };
 
-  $(window).resize(function () {
-
-  });
-
   define = function  (word) {
     // Erase previous entries
     viewmodel.definitions([]);
@@ -36,7 +35,7 @@ function ($, _, ko, d3, viewmodel, tree, infomsg) {
     }
 
     infomsg.clear();
-    $("#spinner").show();
+    $("#spinner").removeClass("hidden");
 
     return $.ajax({
       url: "define/" + word,
@@ -48,12 +47,19 @@ function ($, _, ko, d3, viewmodel, tree, infomsg) {
         " a definition for this word. <br>Try again.");
       }
       else {
+        // Because Bootstrap selects element with jQuery and selectors must
+        // escape dots, we need to remove those dots from the ids.
+        data.definitions.forEach(function (def) {
+          def.name = def.rootsynset.replace(/\./g, "");
+        });
+
         // Add nodes to the DOM through Knockout
         ko.utils.arrayPushAll(viewmodel.definitions, data.definitions);
-          // Go through the added nodes and build graphs.
+        // Go through the added nodes and build graphs.
         $(".js-definition").each(function (index, element) {
           addGraph(element, data.definitions[index]);
         });
+        $('.nav a:first').tab('show');
       }
     }).fail(function (jqXHR, textStatus, errorThrown) {
       console.log("Failed", jqXHR, textStatus, errorThrown);
@@ -63,7 +69,7 @@ function ($, _, ko, d3, viewmodel, tree, infomsg) {
             "this issue. (" + data.message + ")";
       infomsg.error(textStatus, message, 0);
     }).always(function () {
-      $("#spinner").hide();
+      $("#spinner").addClass("hidden");
     });
   };
 

vwordnet/static/js/main.js

@@ -3,7 +3,8 @@
 */
 require({
   paths: {
-    "jquery": "other/jquery-1.9.1.min",
+    "jquery": "other/jquery-2.1.0.min",
+    "kinetic": "other/jquery.kinetic.min",
     "knockout": "other/knockout-2.2.1",
     "underscore": "other/underscore-min",
     "domReady": "other/domReady",
@@ -42,6 +43,10 @@ require({
     'bootstrap': {
       exports: 'bootstrap',
       deps: ['jquery']
+    },
+    'kinetic': {
+      exports: 'kinetic',
+      deps: ['jquery']
     }
   }
 });