Dev: Console tool

src/DevTools/DevTools.scss

@@ -1,3 +1,5 @@
+@import "../color";
+
 #eruda {
     .dev-tools {
         position: absolute;
@@ -24,6 +26,7 @@
                 position: absolute;
                 left: 0;
                 top: 0;
+                background: $gray-light;
                 width: 100%;
                 height: 100%;
             }

src/DevTools/HomeBtn.es6

@@ -1,6 +1,5 @@
 import util from '../util'
-
-var Draggabilly = require('draggabilly');
+import Draggabilly from 'draggabilly'
 
 require('./HomeBtn.scss');
 
@@ -12,6 +11,7 @@ export default class HomeBtn
 
         this._appendTpl();
         this._makeDraggable();
+        this._setPos();
         this._bindEvent();
 
         util.Emitter.mixin(this);
@@ -24,9 +24,27 @@ export default class HomeBtn
 
         this._$el = $parent.find('.home-btn');
     }
+    _setPos()
+    {
+        var wh = window.innerHeight,
+            ww = window.innerWidth;
+
+        this._$el.css({
+            left: ww - 50,
+            top: wh - 50
+        });
+    }
     _bindEvent()
     {
         this._draggabilly.on('staticClick', () => this.emit('click') );
+
+        window.addEventListener('orientationchange', () =>
+        {
+            setTimeout(() =>
+            {
+                this._setPos();
+            }, 150);
+        }, false);
     }
     _makeDraggable()
     {

src/DevTools/HomeBtn.scss

@@ -7,8 +7,6 @@
         border-radius: 10px;
         padding-top: 10px;
         position: relative;
-        top: 200px;
-        left: 10px;
         z-index: 1000;
         transition: opacity .3s;
         .circle {

src/DevTools/NavBar.es6

@@ -18,7 +18,7 @@ export default class NavBar
         this._len++;
         this._$el.append('<li>' + name + '</li>')
                  .css({
-                     width: this._len * 80
+                     width: this._len * 69
                  });
     }
     activeTool(name)

src/DevTools/NavBar.scss

@@ -1,26 +1,31 @@
+@import "../color";
+
 #eruda { .dev-tools {
     .nav-bar {
-        height: 51px;
+        height: 50px;
         overflow-y: scroll;
         position: absolute;
         width: 100%;
         left: 0;
         top: 0;
-        border-bottom: 1px solid #ccc;
         z-index: 100;
+        background: $blue;
         ul {
             font-size: 0;
             li {
                 display: inline-block;
                 height: 50px;
                 line-height: 50px;
-                width: 80px;
-                font-size: 15px;
+                width: 69px;
+                color: $gray-light;
+                font-size: 12px;
                 text-align: center;
+                opacity: 0.5;
                 text-transform: capitalize;
                 &.active {
-                    color: #76a2ee;
-                    border-bottom: 3px solid #76a2ee;
+                    color: #fff;
+                    opacity: 1;
+                    border-bottom: 3px solid #fff;
                 }
             }
         }