Merge pull request #139 from nem035/top-menu-improvements

Top menu improvements

css/stylesheet.css

@@ -107,7 +107,7 @@ nav h3 {
     display: none;
 }
 
-.buttons {
+.top-menu-buttons {
     float: right;
     height: 100%;
 }
@@ -501,11 +501,11 @@ input[type=number]::-webkit-outer-spin-button {
     font-weight: bold;
 }
 
-.buttons button.active {
+.top-menu-buttons button.active {
     font-weight: bold;
 }
 
-.buttons button.active .fa {
+.top-menu-buttons button.active .fa {
     color: #00e676;
 }
 
@@ -516,3 +516,22 @@ input[type=number]::-webkit-outer-spin-button {
 #btn_pause.active > .btn-text:before {
     content: 'Resume'
 }
+
+button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+#btn_pause {
+  width: 86px;
+}
+
+.top-menu-buttons button.active {
+  background: rgba(0, 0, 0, .15);
+  box-shadow: 0px 0px 10px 3px #1a1a1a inset;
+}
+
+.top-menu-buttons button:active {
+  background: rgba(0, 0, 0, .15);
+  box-shadow: 0px 0px 10px 3px #1a1a1a inset;
+}

index.html

@@ -31,7 +31,7 @@
             <i class="fa fa-caret-up nav-dropdown" aria-hidden="true"></i>
         </h3>
     </button>
-        <div class="buttons">
+        <div class="top-menu-buttons">
             <div class="btn" id="btn_share">
                 <div class="wrapper">
                     <i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">

js/dom/loading_slider.js

+'use strict';
 
 const showLoadingSlider = () => {
   $('#loading-slider').removeClass('loaded');

js/dom/module_container.js

+'use strict';
+
+const create = () => {
+  const $container = $('<section class="module_wrapper">');
+  $('.module_container').append($container);
+  return $container;
+};
+
+module.exports = {
+  create
+};

js/dom/setup/index.js

+'use strict';
+
 const setupDividers = require('./setup_dividers');
 const setupDocument = require('./setup_document');
 const setupFilesBar = require('./setup_files_bar');
@@ -10,7 +12,7 @@ const setupTopMenu = require('./setup_top_menu');
 const setupWindow = require('./setup_window');
 
 /**
- * Initializes elements once the app loads in the DOM. 
+ * Initializes elements once the app loads in the DOM.
  */
 const setup = () => {
 
@@ -52,4 +54,4 @@ const setup = () => {
 
 module.exports = {
   setup
-};
\ No newline at end of file
+};

js/dom/setup/setup_dividers.js

+'use strict';
+
 const app = require('../../app');
 
 const addDividerToDom = (divider) => {
@@ -96,4 +98,4 @@ module.exports = () => {
   for (let i = 0; i < dividers.length; i++) {
     addDividerToDom(dividers[i]);
   }
-}
\ No newline at end of file
+}

js/dom/setup/setup_document.js

+'use strict';
+
 const app = require('../../app');
 
 module.exports = () => {
@@ -11,4 +13,4 @@ module.exports = () => {
   $(document).mouseup(function (e) {
     app.getTracerManager().command('mouseup', e);
   });
-};
\ No newline at end of file
+};

js/dom/setup/setup_files_bar.js

+'use strict';
+
 const definitelyBigger = (x, y) => x > (y + 2);
 
 module.exports = () => {
@@ -54,4 +56,4 @@ module.exports = () => {
     $('.files_bar > .btn-left').attr('disabled', !lefter);
     $('.files_bar > .btn-right').attr('disabled', !righter);
   });
-}
\ No newline at end of file
+}

js/dom/setup/setup_interval.js

+'use strict';
+
 const app = require('../../app');
 const Toast = require('../toast');
 
@@ -47,4 +49,4 @@ module.exports = () => {
     tracerManager.interval = seconds * 1000;
     Toast.showInfoToast(message);
   });
-};
\ No newline at end of file
+};

js/dom/setup/setup_module_container.js

+'use strict';
+
 const app = require('../../app');
 
 module.exports = () => {
@@ -15,4 +17,4 @@ module.exports = () => {
   $module_container.on('DOMMouseScroll mousewheel', '.module_wrapper', function(e) {
     app.getTracerManager().findOwner(this).mousewheel(e);
   });
-}
\ No newline at end of file
+}

js/dom/setup/setup_powered_by.js

+'use strict';
+
 module.exports = () => {
   $('#powered-by').click(function() {
     $('#powered-by-list button').toggleClass('collapse');
   });
-};
\ No newline at end of file
+};

js/dom/setup/setup_scratch_paper.js

+'use strict';
+
 const app = require('../../app');
 const Server = require('../../server');
 const showAlgorithm = require('../show_algorithm');
@@ -10,4 +12,4 @@ module.exports = () => {
       showAlgorithm(category, algorithm, data);
     });
   });
-};
\ No newline at end of file
+};

js/dom/setup/setup_side_menu.js

+'use strict';
+
 const app = require('../../app');
 
 let sidemenu_percent;
@@ -22,4 +24,4 @@ module.exports = () => {
 
     app.getTracerManager().resize();
   });
-}
\ No newline at end of file
+}

js/dom/setup/setup_top_menu.js

+'use strict';
+
 const app = require('../../app');
 const Server = require('../../server');
 const Toast = require('../toast');
+const TopMenu = require('../top_menu');
 
 module.exports = () => {
 
@@ -24,52 +27,66 @@ module.exports = () => {
 
   // control
 
-  $('#btn_run').click(function() {
-    $('#btn_trace').click();
-    $('#btn_pause').removeClass('active');
-    $(this).addClass('active');
+  const $btnRun   = $('#btn_run');
+  const $btnTrace = $('#btn_trace');
+  const $btnPause = $('#btn_pause');
+  const $btnPrev  = $('#btn_prev');
+  const $btnNext  = $('#btn_next');
+  const $btnDesc  = $('#btn_desc');
+
+  // initially, control buttons are disabled
+  TopMenu.disableFlowControl();
+
+  $btnRun.click(() => {
+    $btnTrace.click();
+    $btnPause.removeClass('active');
+    $btnRun.addClass('active');
+    TopMenu.enableFlowControl();
     var err = app.getEditor().execute();
     if (err) {
       console.error(err);
       Toast.showErrorToast(err);
     }
   });
-  $('#btn_pause').click(function() {
-    $('#btn_run').toggleClass('active');
-    $(this).toggleClass('active');
+
+  $btnPause.click(() => {
+    $btnRun.toggleClass('active');
+    $btnPause.toggleClass('active');
     if (app.getTracerManager().isPause()) {
       app.getTracerManager().resumeStep();
     } else {
       app.getTracerManager().pauseStep();
     }
   });
-  $('#btn_prev').click(() => {
-    $('#btn_run').removeClass('active');
-    $('#btn_pause').addClass('active');
+
+  $btnPrev.click(() => {
+    $btnRun.removeClass('active');
+    $btnPause.addClass('active');
     app.getTracerManager().pauseStep();
     app.getTracerManager().prevStep();
   });
-  $('#btn_next').click(() => {
-    $('#btn_run').removeClass('active');
-    $('#btn_pause').addClass('active');
+
+  $btnNext.click(() => {
+    $btnRun.removeClass('active');
+    $btnPause.addClass('active');
     app.getTracerManager().pauseStep();
     app.getTracerManager().nextStep();
   });
 
   // description & trace
 
-  $('#btn_desc').click(function() {
+  $btnDesc.click(() => {
     $('.tab_container > .tab').removeClass('active');
     $('#tab_desc').addClass('active');
     $('.tab_bar > button').removeClass('active');
-    $(this).addClass('active');
+    $btnDesc.addClass('active');
   });
 
-  $('#btn_trace').click(function() {
+  $btnTrace.click(() => {
     $('.tab_container > .tab').removeClass('active');
     $('#tab_module').addClass('active');
     $('.tab_bar > button').removeClass('active');
-    $(this).addClass('active');
+    $btnTrace.addClass('active');
   });
 
 };

js/dom/setup/setup_window.js

+'use strict';
+
 const app = require('../../app');
 
 module.exports = function() {
   $(window).resize(function() {
     app.getTracerManager().resize();
   });
-};
\ No newline at end of file
+};

js/dom/top_menu.js

+'use strict';
+
+const flowControlBtns = [ $('#btn_pause'), $('#btn_prev'), $('#btn_next') ];
+const setFlowControlState = (isDisabled) => {
+  flowControlBtns.forEach($btn => $btn.attr('disabled', isDisabled));
+};
+
+const enableFlowControl = () => {
+  setFlowControlState(false);
+};
+
+const disableFlowControl = () => {
+  setFlowControlState(true);
+};
+
+const resetTopMenuButtons = () => {
+  $('.top-menu-buttons button').removeClass('active');
+  disableFlowControl();
+};
+
+const setInterval = (val) => {
+  $('#interval').val(interval);
+};
+
+const activateBtnPause = () => {
+  $('#btn_pause').addClass('active');
+};
+
+const deactivateBtnPause = () => {
+  $('#btn_pause').removeClass('active');
+};
+
+module.exports = {
+  enableFlowControl,
+  disableFlowControl,
+  resetTopMenuButtons,
+  setInterval,
+  activateBtnPause,
+  deactivateBtnPause
+};

js/module/data/array1d.js

+'use strict';
+
 const Array2D = require('./array2d');
 
 const random = (N, min, max) => {

js/module/data/array2d.js

+'use strict';
+
 const random = (N, M, min, max) => {
   if (!N) N = 10;
   if (!M) M = 10;
@@ -24,4 +26,4 @@ const randomSorted = (N, M, min, max) => {
 module.exports = {
   random,
   randomSorted
-};
\ No newline at end of file
+};

js/module/data/coordinate_system.js

+'use strict';
+
 const random = (N, min, max) => {
   if (!N) N = 7;
   if (!min) min = 1;
@@ -12,4 +14,4 @@ const random = (N, min, max) => {
 
 module.exports = {
   random
-};
\ No newline at end of file
+};

js/module/data/directed_graph.js

+'use strict';
+
 const random = (N, ratio) => {
   if (!N) N = 5;
   if (!ratio) ratio = .3;
@@ -15,4 +17,4 @@ const random = (N, ratio) => {
 
 module.exports = {
   random
-};
\ No newline at end of file
+};

js/module/data/undirected_graph.js

+'use strict';
+
 const random = (N, ratio) => {
   if (!N) N = 5;
   if (!ratio) ratio = .3;
@@ -15,4 +17,4 @@ const random = (N, ratio) => {
 
 module.exports = {
   random
-};
\ No newline at end of file
+};

js/module/data/weighted_directed_graph.js

+'use strict';
+
 const random = (N, ratio, min, max) => {
   if (!N) N = 5;
   if (!ratio) ratio = .3;
@@ -17,4 +19,4 @@ const random = (N, ratio, min, max) => {
 
 module.exports = {
   random
-};
\ No newline at end of file
+};

js/module/data/weighted_undirected_graph.js

+'use strict';
+
 const random = (N, ratio, min, max) => {
   if (!N) N = 5;
   if (!ratio) ratio = .3;
@@ -17,4 +19,4 @@ const random = (N, ratio, min, max) => {
 
 module.exports = {
   random
-};
\ No newline at end of file
+};

js/module/tracer/array1d.js

+'use strict';
+
 const Array2DTracer = require('./array2d');
 
 class Array1DTracer extends Array2DTracer {
@@ -42,4 +44,4 @@ class Array1DTracer extends Array2DTracer {
   }
 }
 
-module.exports = Array1DTracer;
\ No newline at end of file
+module.exports = Array1DTracer;

js/module/tracer/array2d.js

+'use strict';
+
 const Tracer = require('./tracer');
 
 const {
@@ -335,4 +337,4 @@ const initView = (tracer) => {
   tracer.$container.append(tracer.$table);
 };
 
-module.exports = Array2DTracer;
\ No newline at end of file
+module.exports = Array2DTracer;

js/module/tracer/chart.js

+'use strict';
+
 const Tracer = require('./tracer');
 
 class ChartTracer extends Tracer {
@@ -135,4 +137,4 @@ const initView = (tracer) => {
   });
 };
 
-module.exports = ChartTracer;
\ No newline at end of file
+module.exports = ChartTracer;

js/module/tracer/coordinate_system.js

+'use strict';
+
 const DirectedGraphTracer = require('./directed_graph');
 
 class CoordinateSystemTracer extends DirectedGraphTracer {
@@ -137,4 +139,4 @@ const initView = (tracer) => {
   });
 };
 
-module.exports = CoordinateSystemTracer;
\ No newline at end of file
+module.exports = CoordinateSystemTracer;

js/module/tracer/directed_graph.js

+'use strict';
+
 const Tracer = require('./tracer');
 
 const {
@@ -398,4 +400,4 @@ sigma.canvas.edges.arrow = function (edge, source, target, context, settings) {
   }
 };
 
-module.exports = DirectedGraphTracer;
\ No newline at end of file
+module.exports = DirectedGraphTracer;

js/module/tracer/log.js

+'use strict';
+
 const Tracer = require('./tracer');
 
 class LogTracer extends Tracer {
@@ -53,4 +55,4 @@ const initView = (tracer) => {
   tracer.$container.append(tracer.$wrapper);
 };
 
-module.exports = LogTracer;
\ No newline at end of file
+module.exports = LogTracer;

js/module/tracer/tracer.js

+'use strict';
+
 const app = require('../../app');
 
 const {
@@ -9,7 +11,7 @@ class Tracer {
   static getClassName() {
     return 'Tracer';
   }
-  
+
   constructor(name) {
     this.module = this.constructor;
 
@@ -105,4 +107,4 @@ class Tracer {
   }
 }
 
-module.exports = Tracer;
\ No newline at end of file
+module.exports = Tracer;

js/module/tracer/undirected_graph.js

+'use strict';
+
 const DirectedGraphTracer = require('./directed_graph');
 
 class UndirectedGraphTracer extends DirectedGraphTracer {
@@ -80,4 +82,4 @@ const initView = (tracer) => {
   });
 };
 
-module.exports = UndirectedGraphTracer;
\ No newline at end of file
+module.exports = UndirectedGraphTracer;

js/module/tracer/weighted_directed_graph.js

+'use strict';
+
 const DirectedGraphTracer = require('./directed_graph');
 
 const {
@@ -193,4 +195,4 @@ const initView = (tracer) => {
   });
 };
 
-module.exports = WeightedDirectedGraphTracer;
\ No newline at end of file
+module.exports = WeightedDirectedGraphTracer;

js/module/tracer/weighted_undirected_graph.js

+'use strict';
+
 const WeightedDirectedGraphTracer = require('./weighted_directed_graph');
 const UndirectedGraphTracer = require('./undirected_graph');
 
@@ -46,4 +48,4 @@ const initView = (tracer) => {
   });
 };
 
-module.exports = WeightedUndirectedGraphTracer;
\ No newline at end of file
+module.exports = WeightedUndirectedGraphTracer;

js/tracer_manager/manager.js

 'use strict';
 
+const ModuleContainer = require('../dom/module_container');
+const TopMenu = require('../dom/top_menu');
+
+const {
+  each,
+  extend,
+  grep
+} = $;
+
 const stepLimit = 1e6;
 
 const TracerManager = function () {
@@ -13,8 +22,7 @@ TracerManager.prototype = {
 
   add(tracer) {
 
-    const $container = $('<section class="module_wrapper">');
-    $('.module_container').append($container);
+    const $container = ModuleContainer.create();
 
     const capsule = {
       module: tracer.module,
@@ -33,7 +41,7 @@ TracerManager.prototype = {
     let selectedCapsule = null;
     let count = 0;
 
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       if (capsule.module === newTracer.module) {
         count++;
         if (!capsule.allocated) {
@@ -60,7 +68,7 @@ TracerManager.prototype = {
   deallocateAll() {
     this.order = 0;
     this.reset();
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       capsule.allocated = false;
     });
   },
@@ -68,7 +76,7 @@ TracerManager.prototype = {
   removeUnallocated() {
     let changed = false;
 
-    this.capsules = $.grep(this.capsules, (capsule) => {
+    this.capsules = grep(this.capsules, (capsule) => {
       let removed = !capsule.allocated;
 
       if (capsule.isNew || removed) {
@@ -91,7 +99,7 @@ TracerManager.prototype = {
       capsules
     } = this;
 
-    $.each(capsules, (i, capsule) => {
+    each(capsules, (i, capsule) => {
       let width = 100;
       let height = (100 / capsules.length);
       let top = height * capsule.order;
@@ -115,7 +123,7 @@ TracerManager.prototype = {
   },
 
   setInterval(interval) {
-    $('#interval').val(interval);
+    TopMenu.setInterval(interval);
   },
 
   reset() {
@@ -137,7 +145,7 @@ TracerManager.prototype = {
     } else {
       last = this.traces[len - 1];
     }
-    last.push($.extend(step, {
+    last.push(extend(step, {
       capsule
     }));
   },
@@ -152,13 +160,13 @@ TracerManager.prototype = {
     if (this.timer) {
       clearTimeout(this.timer);
     }
-    $('#btn_pause').addClass('active');
+    TopMenu.activateBtnPause();
   },
 
   resumeStep() {
     this.pause = false;
     this.step(this.traceIndex + 1);
-    $('#btn_pause').removeClass('active');
+    TopMenu.deactivateBtnPause();
   },
 
   step(i, options = {}) {
@@ -180,7 +188,7 @@ TracerManager.prototype = {
 
     this.timer = setTimeout(() => {
       if (!tracer.nextStep(options)) {
-        $('#btn_run').removeClass('active');
+        TopMenu.resetTopMenuButtons();
       }
     }, this.interval);
   },
@@ -196,7 +204,7 @@ TracerManager.prototype = {
     }
 
     for (let i = 0; i < finalIndex; i++) {
-      this.step(i, $.extend(options, {
+      this.step(i, extend(options, {
         virtual: true
       }));
     }
@@ -223,7 +231,7 @@ TracerManager.prototype = {
 
   command(...args) {
     const functionName = args.shift();
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       if (capsule.allocated) {
         capsule.tracer.module.prototype[functionName].apply(capsule.tracer, args);
       }
@@ -232,7 +240,7 @@ TracerManager.prototype = {
 
   findOwner(container) {
     let selectedCapsule = null;
-    $.each(this.capsules, (i, capsule) => {
+    each(this.capsules, (i, capsule) => {
       if (capsule.$container[0] === container) {
         selectedCapsule = capsule;
         return false;
@@ -242,4 +250,4 @@ TracerManager.prototype = {
   }
 };
 
-module.exports = TracerManager;
\ No newline at end of file
+module.exports = TracerManager;

js/tracer_manager/util/from_json.js

+'use strict';
+
 const {
   parse
 } = JSON;
@@ -8,4 +10,4 @@ const fromJSON = (obj) => {
   });
 };
 
-module.exports = fromJSON;
\ No newline at end of file
+module.exports = fromJSON;

js/tracer_manager/util/index.js

+'use strict';
+
 const toJSON = require('./to_json');
 const fromJSON = require('./from_json');
 const refineByType = require('./refine_by_type');
@@ -6,4 +8,4 @@ module.exports = {
   toJSON,
   fromJSON,
   refineByType
-};
\ No newline at end of file
+};

js/tracer_manager/util/refine_by_type.js

+'use strict';
+
 const refineByType = (item) => {
   switch (typeof(item)) {
     case 'number':

js/tracer_manager/util/to_json.js

+'use strict';
+
 const {
   stringify
 } = JSON;
@@ -8,4 +10,4 @@ const toJSON = (obj) => {
   });
 };
 
-module.exports = toJSON;
\ No newline at end of file
+module.exports = toJSON;

public/algorithm_visualizer.css

@@ -224,7 +224,7 @@ nav h3 {
     display: none;
 }
 
-.buttons {
+.top-menu-buttons {
     float: right;
     height: 100%;
 }
@@ -630,11 +630,11 @@ input[type=number]::-webkit-outer-spin-button {
     font-weight: bold;
 }
 
-.buttons button.active {
+.top-menu-buttons button.active {
     font-weight: bold;
 }
 
-.buttons button.active .fa {
+.top-menu-buttons button.active .fa {
     color: #00e676;
 }
 
@@ -645,3 +645,22 @@ input[type=number]::-webkit-outer-spin-button {
 #btn_pause.active > .btn-text:before {
     content: 'Resume'
 }
+
+button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+#btn_pause {
+  width: 86px;
+}
+
+.top-menu-buttons button.active {
+  background: rgba(0, 0, 0, .15);
+  box-shadow: 0px 0px 10px 3px #1a1a1a inset;
+}
+
+.top-menu-buttons button:active {
+  background: rgba(0, 0, 0, .15);
+  box-shadow: 0px 0px 10px 3px #1a1a1a inset;
+}

public/algorithm_visualizer.min.css

@@ -13,4 +13,4 @@
  * "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
  * https://github.com/simonwhitaker/github-fork-ribbon-css
 */.github-fork-ribbon{width:12.1em;height:12.1em;position:absolute;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px}.github-fork-ribbon.fixed{position:fixed}.github-fork-ribbon:after,.github-fork-ribbon:before{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.15));box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);pointer-events:auto}.github-fork-ribbon:after{content:attr(title);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,.7)}.github-fork-ribbon.left-bottom,.github-fork-ribbon.left-top{right:auto;left:0}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before{right:auto;left:-3.23em}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{top:auto;bottom:3.23em}.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
-#explanation,.btn,button{white-space:nowrap;text-overflow:ellipsis}.tab>.wrapper,nav,pre,section{box-sizing:border-box}.btn,button,pre{margin:0;outline:0}body,html{margin:0;padding:0;overflow:hidden}body{background:#3f3f3f;font-family:Roboto,sans-serif;color:#bbb;-webkit-font-smoothing:subpixel-antialiased}::-webkit-scrollbar{display:none}a{text-decoration:none}*{color:inherit}:not(input){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.btn{display:inline-table}.btn>.wrapper{display:table-cell;vertical-align:middle}.btn,button{vertical-align:top;border:none;height:100%;padding:0 12px;background:0 0;font-size:12px;overflow:hidden}.btn:hover,button:not([disabled]):hover{background:rgba(0,0,0,.15)!important;cursor:pointer}.btn.active,button.active{background:#262626}.btn input,button input{outline:0;background:rgba(0,0,0,.3);padding:4px;border:none}.divider{position:absolute!important;z-index:3}.tab,.workspace{position:absolute}.divider.vertical{cursor:ew-resize}.divider.horizontal{cursor:ns-resize}nav{height:30px;width:100%;padding:0 16px}nav h3{display:inline}.nav-arrow{padding:0 4px}#navigation span:empty+.nav-arrow{display:none}.buttons{float:right;height:100%}#shared{width:128px}#shared.collapse{display:none}#interval{width:24px;text-align:right}.sidemenu{top:30px;right:85%;visibility:hidden;overflow:scroll;padding-bottom:120px}.sidemenu.active{visibility:visible}.sidemenu #footer{border-top:2px solid #262626}.sidemenu button{display:block;width:100%;height:30px;text-align:left}button.category{background:rgba(0,0,0,.1)}button.indent{padding-left:28px}button.collapse{display:none}.workspace{top:30px;bottom:0;left:15%;right:0}.editor_container,.viewer_container,nav,section{position:absolute;top:0;bottom:0;left:0;right:0}nav,section{border:1px solid #262626}.viewer_container{right:50%}.editor_container{left:50%}.module_container{overflow:hidden;border:none}.module_wrapper,.tab{overflow:scroll}.tab_container{top:30px}.tab{width:100%;height:100%;visibility:hidden}.tab>.wrapper{padding:16px}.tab.active{visibility:visible}.module_wrapper .name{position:fixed;z-index:5;padding:4px;font-size:14px;background:rgba(0,0,0,.4)}.module_wrapper>.wrapper{padding:24px 16px;box-sizing:border-box}#tab_desc h3{border-bottom:1px solid #515151;padding:5px;margin:2px}#tab_desc>.wrapper a{text-decoration:underline}.files_bar,.tab_bar{height:30px}.files_bar>*{position:absolute;height:100%}.files_bar>button{width:30px}.files_bar>button:disabled{background:rgba(0,0,0,.15)}.files_bar>.btn-left{left:0}.files_bar>.btn-right{right:0}.files_bar>.wrapper{left:30px;right:30px;overflow:scroll;white-space:nowrap}.files_bar>.wrapper>button{max-width:80%}.files_bar>.wrapper.shadow-left{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-right{box-shadow:inset -16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-left.shadow-right{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6),inset -16px 0 16px -16px rgba(0,0,0,.6)}.explanation_container{border:none;top:30px;height:30px;background:#262626;padding:8px;font-size:12px}#explanation:before{font-family:FontAwesome;content:'\f05a\00a0\00a0'}#explanation{display:block;overflow:hidden}.explanation_container:hover{z-index:5;height:auto;bottom:auto;box-shadow:0 8px 8px -8px rgba(0,0,0,.8)}.explanation_container:hover #explanation{white-space:normal}.data_container{top:60px;bottom:60%}.code_container{top:40%}pre{height:100%;width:100%;padding:0;border:1px solid #515151;background:#2b2b2b;resize:none}.toast_container{position:absolute;bottom:0;right:0;padding:12px;z-index:4}.toast{width:280px;border:1px solid;border-radius:4px;padding:16px;margin:16px}.toast.error{border-color:#960000;background:rgba(120,0,0,.8)}.toast.info{border-color:#009600;background:rgba(0,120,0,.8)}.github-fork-ribbon{position:fixed}#loading-slider,.break,.line{position:absolute}.github-fork-ribbon.left-bottom:before{background-color:#333}.fa-spin-faster{-webkit-animation:fa-spin 1s infinite ease-in-out;animation:fa-spin 1s infinite ease-in-out}.mtbl-wrapper{width:100%;height:100%}.mtbl-table{display:inline-table;color:#fff;table-layout:fixed}.mtbl-row{display:table-row}.mtbl-col{display:table-cell;vertical-align:middle;text-align:center;background:#888}.mtbl-empty-row{display:table-row;background:#3f3f3f;height:2px}.mtbl-empty-col{display:table-cell;background:#3f3f3f;width:2px}.mtbl-col.selected{background:#00f}.mtbl-col.notified{background:red}.mchrt-chart{width:100%;height:100%}#loading-slider{z-index:6;width:100%;height:2px}#loading-slider.loaded{visibility:hidden}.line{background:#4a8df8;width:100%;left:0;right:0;top:0;height:3px}.break{background:#222;width:6px;height:2px}.dot1{-webkit-animation:loading 2s infinite;animation:loading 2s infinite}.dot2{-webkit-animation:loading 2s .5s infinite;animation:loading 2s .5s infinite}.dot3{-webkit-animation:loading 2s 1s infinite;animation:loading 2s 1s infinite}@-webkit-keyframes loading{from{left:0}to{left:100%}}@keyframes loading{from{left:0}to{left:100%}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.applications li,.complexity{margin:10px 0}.buttons button.active,.complexity-type{font-weight:700}.buttons button.active .fa{color:#00e676}#btn_pause>.btn-text:before{content:'Pause'}#btn_pause.active>.btn-text:before{content:'Resume'}
\ No newline at end of file
+#explanation,.btn,button{white-space:nowrap;text-overflow:ellipsis}.tab>.wrapper,nav,pre,section{box-sizing:border-box}.btn,button,pre{margin:0;outline:0}body,html{margin:0;padding:0;overflow:hidden}body{background:#3f3f3f;font-family:Roboto,sans-serif;color:#bbb;-webkit-font-smoothing:subpixel-antialiased}::-webkit-scrollbar{display:none}a{text-decoration:none}*{color:inherit}:not(input){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.btn{display:inline-table}.btn>.wrapper{display:table-cell;vertical-align:middle}.btn,button{vertical-align:top;border:none;height:100%;padding:0 12px;background:0 0;font-size:12px;overflow:hidden}.btn:hover,button:not([disabled]):hover{background:rgba(0,0,0,.15)!important;cursor:pointer}.btn.active,button.active{background:#262626}.btn input,button input{outline:0;background:rgba(0,0,0,.3);padding:4px;border:none}.divider{position:absolute!important;z-index:3}.tab,.workspace{position:absolute}.divider.vertical{cursor:ew-resize}.divider.horizontal{cursor:ns-resize}nav{height:30px;width:100%;padding:0 16px}nav h3{display:inline}.nav-arrow{padding:0 4px}#navigation span:empty+.nav-arrow{display:none}.top-menu-buttons{float:right;height:100%}#shared{width:128px}#shared.collapse{display:none}#interval{width:24px;text-align:right}.sidemenu{top:30px;right:85%;visibility:hidden;overflow:scroll;padding-bottom:120px}.sidemenu.active{visibility:visible}.sidemenu #footer{border-top:2px solid #262626}.sidemenu button{display:block;width:100%;height:30px;text-align:left}button.category{background:rgba(0,0,0,.1)}button.indent{padding-left:28px}button.collapse{display:none}.workspace{top:30px;bottom:0;left:15%;right:0}.editor_container,.viewer_container,nav,section{position:absolute;top:0;bottom:0;left:0;right:0}nav,section{border:1px solid #262626}.viewer_container{right:50%}.editor_container{left:50%}.module_container{overflow:hidden;border:none}.module_wrapper,.tab{overflow:scroll}.tab_container{top:30px}.tab{width:100%;height:100%;visibility:hidden}.tab>.wrapper{padding:16px}.tab.active{visibility:visible}.module_wrapper .name{position:fixed;z-index:5;padding:4px;font-size:14px;background:rgba(0,0,0,.4)}.module_wrapper>.wrapper{padding:24px 16px;box-sizing:border-box}#tab_desc h3{border-bottom:1px solid #515151;padding:5px;margin:2px}#tab_desc>.wrapper a{text-decoration:underline}.files_bar,.tab_bar{height:30px}.files_bar>*{position:absolute;height:100%}.files_bar>button{width:30px}.files_bar>button:disabled{background:rgba(0,0,0,.15)}.files_bar>.btn-left{left:0}.files_bar>.btn-right{right:0}.files_bar>.wrapper{left:30px;right:30px;overflow:scroll;white-space:nowrap}.files_bar>.wrapper>button{max-width:80%}.files_bar>.wrapper.shadow-left{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-right{box-shadow:inset -16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-left.shadow-right{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6),inset -16px 0 16px -16px rgba(0,0,0,.6)}.explanation_container{border:none;top:30px;height:30px;background:#262626;padding:8px;font-size:12px}#explanation:before{font-family:FontAwesome;content:'\f05a\00a0\00a0'}#explanation{display:block;overflow:hidden}.explanation_container:hover{z-index:5;height:auto;bottom:auto;box-shadow:0 8px 8px -8px rgba(0,0,0,.8)}.explanation_container:hover #explanation{white-space:normal}.data_container{top:60px;bottom:60%}.code_container{top:40%}pre{height:100%;width:100%;padding:0;border:1px solid #515151;background:#2b2b2b;resize:none}.toast_container{position:absolute;bottom:0;right:0;padding:12px;z-index:4}.toast{width:280px;border:1px solid;border-radius:4px;padding:16px;margin:16px}.toast.error{border-color:#960000;background:rgba(120,0,0,.8)}.toast.info{border-color:#009600;background:rgba(0,120,0,.8)}.github-fork-ribbon{position:fixed}#loading-slider,.break,.line{position:absolute}.github-fork-ribbon.left-bottom:before{background-color:#333}.fa-spin-faster{-webkit-animation:fa-spin 1s infinite ease-in-out;animation:fa-spin 1s infinite ease-in-out}.mtbl-wrapper{width:100%;height:100%}.mtbl-table{display:inline-table;color:#fff;table-layout:fixed}.mtbl-row{display:table-row}.mtbl-col{display:table-cell;vertical-align:middle;text-align:center;background:#888}.mtbl-empty-row{display:table-row;background:#3f3f3f;height:2px}.mtbl-empty-col{display:table-cell;background:#3f3f3f;width:2px}.mtbl-col.selected{background:#00f}.mtbl-col.notified{background:red}.mchrt-chart{width:100%;height:100%}#loading-slider{z-index:6;width:100%;height:2px}#loading-slider.loaded{visibility:hidden}.line{background:#4a8df8;width:100%;left:0;right:0;top:0;height:3px}.break{background:#222;width:6px;height:2px}.dot1{-webkit-animation:loading 2s infinite;animation:loading 2s infinite}.dot2{-webkit-animation:loading 2s .5s infinite;animation:loading 2s .5s infinite}.dot3{-webkit-animation:loading 2s 1s infinite;animation:loading 2s 1s infinite}@-webkit-keyframes loading{from{left:0}to{left:100%}}@keyframes loading{from{left:0}to{left:100%}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.applications li,.complexity{margin:10px 0}.complexity-type,.top-menu-buttons button.active{font-weight:700}.top-menu-buttons button.active .fa{color:#00e676}#btn_pause>.btn-text:before{content:'Pause'}#btn_pause.active>.btn-text:before{content:'Resume'}button[disabled]{cursor:not-allowed;opacity:.6}#btn_pause{width:86px}.top-menu-buttons button.active,.top-menu-buttons button:active{background:rgba(0,0,0,.15);box-shadow:0 0 10px 3px #1a1a1a inset}
\ No newline at end of file