From b0a1f07818cc1454bb823933a783035f753d72e8 Mon Sep 17 00:00:00 2001
From: Alanna Scott <alanna.scott@airbnb.com>
Date: Mon, 8 Aug 2016 10:55:03 -0700
Subject: [PATCH] ui update (#879)

* caravel ui update

* make headings bold on /explore

* bump back pagination color
---
 caravel/assets/images/caravel.png             | Bin 0 -> 3053 bytes
 .../javascripts/dashboard/Dashboard.jsx       |   2 +-
 .../dashboard/components/SliceCell.js         |   8 +-
 .../explore/components/QueryAndSaveBtns.jsx   |   2 +-
 .../assets/javascripts/explore/explore.jsx    |  37 +--
 caravel/assets/javascripts/welcome.js         |   4 +-
 caravel/assets/package.json                   |   1 -
 caravel/assets/stylesheets/caravel.css        |  36 +-
 .../main.css => stylesheets/dashboard.css}    |  22 +-
 caravel/assets/stylesheets/explore.css        |  31 +-
 .../assets/stylesheets/less/bootswatch.less   |  47 ++-
 .../assets/stylesheets/less/variables.less    |  40 +--
 caravel/assets/stylesheets/welcome.css        |   5 +
 caravel/templates/appbuilder/navbar.html      |   7 +-
 caravel/templates/caravel/dashboard.html      | 125 +++----
 caravel/templates/caravel/explore.html        | 312 +++++++++---------
 caravel/templates/caravel/standalone.html     |  12 +-
 caravel/templates/caravel/welcome.html        |   7 +-
 caravel/views.py                              |   1 -
 19 files changed, 371 insertions(+), 328 deletions(-)
 create mode 100644 caravel/assets/images/caravel.png
 rename caravel/assets/{javascripts/dashboard/main.css => stylesheets/dashboard.css} (90%)

diff --git a/caravel/assets/images/caravel.png b/caravel/assets/images/caravel.png
new file mode 100644
index 0000000000000000000000000000000000000000..87c16abe298711482c4f37aa58db49a5fae60626
GIT binary patch
literal 3053
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

literal 0
HcmV?d00001

diff --git a/caravel/assets/javascripts/dashboard/Dashboard.jsx b/caravel/assets/javascripts/dashboard/Dashboard.jsx
index 054f7d8ffb5a..4fc8c009bc51 100644
--- a/caravel/assets/javascripts/dashboard/Dashboard.jsx
+++ b/caravel/assets/javascripts/dashboard/Dashboard.jsx
@@ -14,7 +14,7 @@ const ace = require('brace');
 require('bootstrap');
 require('brace/mode/css');
 require('brace/theme/crimson_editor');
-require('./main.css');
+require('../../stylesheets/dashboard.css');
 require('../caravel-select2.js');
 
 // Injects the passed css string into a style sheet with the specified className
diff --git a/caravel/assets/javascripts/dashboard/components/SliceCell.js b/caravel/assets/javascripts/dashboard/components/SliceCell.js
index 0d37343d7121..a9e3a184d5ba 100644
--- a/caravel/assets/javascripts/dashboard/components/SliceCell.js
+++ b/caravel/assets/javascripts/dashboard/components/SliceCell.js
@@ -11,19 +11,17 @@ function SliceCell({ expandedSlices, removeSlice, slice }) {
     <div>
       <div className="chart-header">
         <div className="row">
-          <div className="col-md-12 text-center header">
-            {slice.slice_name}
+          <div className="col-md-12 header">
+            <span>{slice.slice_name}</span>
           </div>
           <div className="col-md-12 chart-controls">
-            <div className="pull-left">
+            <div className="pull-right">
               <a title="Move chart" data-toggle="tooltip">
                 <i className="fa fa-arrows drag" />
               </a>
               <a className="refresh" title="Force refresh data" data-toggle="tooltip">
                 <i className="fa fa-repeat" />
               </a>
-            </div>
-            <div className="pull-right">
               {slice.description &&
                 <a title="Toggle chart description">
                   <i
diff --git a/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx b/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
index bc7c54b90906..be2c77640563 100644
--- a/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
+++ b/caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
@@ -13,7 +13,7 @@ export default function QueryAndSaveBtns({ canAdd, onQuery }) {
 
   return (
     <div className="btn-group query-and-save">
-      <button type="button" className="btn btn-primary" onClick={onQuery}>
+      <button type="button" className="btn btn-default" onClick={onQuery}>
         <i className="fa fa-bolt"></i>Query
       </button>
       <button
diff --git a/caravel/assets/javascripts/explore/explore.jsx b/caravel/assets/javascripts/explore/explore.jsx
index 70f8ad9a2c09..3c4a160ff06a 100644
--- a/caravel/assets/javascripts/explore/explore.jsx
+++ b/caravel/assets/javascripts/explore/explore.jsx
@@ -3,10 +3,10 @@
 // nb: to add a new vis, you must also add a Python fn in viz.py
 //
 // js
-var $ = window.$ = require('jquery');
-var jQuery = window.jQuery = $;
-var px = require('./../modules/caravel.js');
-var showModal = require('./../modules/utils.js').showModal;
+const $ = window.$ = require('jquery');
+const jQuery = window.jQuery = $;
+const px = require('./../modules/caravel.js');
+const showModal = require('./../modules/utils.js').showModal;
 
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -25,21 +25,21 @@ require('../../vendor/pygments.css');
 require('../../stylesheets/explore.css');
 require('../../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
 
-var slice;
+let slice;
 
-var getPanelClass = function (fieldPrefix) {
+const getPanelClass = function (fieldPrefix) {
   return (fieldPrefix === 'flt' ? 'filter' : 'having') + '_panel';
 };
 
 function prepForm() {
   // Assigning the right id to form elements in filters
-  var fixId = function ($filter, fieldPrefix, i) {
+  const fixId = function ($filter, fieldPrefix, i) {
     $filter.attr('id', function () {
       return fieldPrefix + '_' + i;
     });
 
     ['col', 'op', 'eq'].forEach(function (fieldMiddle) {
-      var fieldName = fieldPrefix + '_' + fieldMiddle;
+      const fieldName = fieldPrefix + '_' + fieldMiddle;
       $filter.find('[id^=' + fieldName + '_]')
           .attr('id', function () {
             return fieldName + '_' + i;
@@ -51,7 +51,7 @@ function prepForm() {
   };
 
   ['flt', 'having'].forEach(function (fieldPrefix) {
-    var i = 1;
+    let i = 1;
     $('#' + getPanelClass(fieldPrefix) + ' #filters > div').each(function () {
       fixId($(this), fieldPrefix, i);
       i++;
@@ -59,7 +59,8 @@ function prepForm() {
   });
 }
 
-function query(force, pushState) {
+function query(forceUpdate, pushState) {
+  let force = forceUpdate;
   if (force === undefined) {
     force = false;
   }
@@ -470,29 +471,19 @@ function saveSlice() {
 }
 
 $(document).ready(function () {
+  const data = $('.slice').data('slice');
+
   initExploreView();
 
   // Dynamically register this visualization
-  var visType = window.viz_type.value;
-  px.registerViz(visType);
+  px.registerViz(data.viz_name);
 
-  var data = $('.slice').data('slice');
   slice = px.Slice(data);
 
-  //
   $('.slice').data('slice', slice);
 
   // call vis render method, which issues ajax
   query(false, false);
 
-  // make checkbox inputs display as toggles
-  $(':checkbox')
-    .addClass('pull-right')
-    .attr('data-onstyle', 'default')
-    .bootstrapToggle({
-      size: 'mini',
-    });
-
-  $('div.toggle').addClass('pull-right');
   slice.bindResizeToWindowResize();
 });
diff --git a/caravel/assets/javascripts/welcome.js b/caravel/assets/javascripts/welcome.js
index 46ce74cdeecf..d83cd3e7ee92 100644
--- a/caravel/assets/javascripts/welcome.js
+++ b/caravel/assets/javascripts/welcome.js
@@ -68,11 +68,13 @@ $(document).ready(function () {
         '#D6E685',
         '#1E6823',
       ],
-      // Based on github's colors
       domain: 'month',
       subDomain: 'day',
       itemName: 'action',
       tooltip: true,
+      cellSize: 10,
+      cellPadding: 2,
+      domainGutter: 22,
     });
   });
   modelViewTable('#dash_table', 'DashboardModelViewAsync', 'changed_on', 'desc');
diff --git a/caravel/assets/package.json b/caravel/assets/package.json
index 36549b1e9511..17a81bebce4e 100644
--- a/caravel/assets/package.json
+++ b/caravel/assets/package.json
@@ -38,7 +38,6 @@
     "autobind-decorator": "^1.3.3",
     "bootstrap": "^3.3.6",
     "bootstrap-datepicker": "^1.6.0",
-    "bootstrap-toggle": "^2.2.1",
     "brace": "^0.7.0",
     "brfs": "^1.4.3",
     "cal-heatmap": "3.5.4",
diff --git a/caravel/assets/stylesheets/caravel.css b/caravel/assets/stylesheets/caravel.css
index 1e825b8a1fc9..22c25e551ad3 100644
--- a/caravel/assets/stylesheets/caravel.css
+++ b/caravel/assets/stylesheets/caravel.css
@@ -28,6 +28,12 @@ body {
 input.form-control {
     background-color: white;
 }
+input.form-control[type=text], input.form-control[type=search] {
+  border: 1px solid #ccc!important;
+  box-shadow: none!important;
+  padding: 2px;
+  border-radius: 2px;
+}
 
 .chart-header a.danger {
     color: red;
@@ -50,6 +56,8 @@ input.form-control {
     margin-right: 10px;
     opacity: 0.5;
     cursor: pointer;
+    float: left;
+    margin-top: 13px;
 }
 
 .slice_description{
@@ -83,13 +91,6 @@ input[type="checkbox"] {
   height: 16px;
   float: right;
 }
-form div {
-  padding-top: 1px;
-}
-
-.header span {
-    margin-left: 5px;
-}
 
 .widget-is-cached {
     display: none;
@@ -132,9 +133,6 @@ span.title-block {
     font-size: 11px !important;
 }
 div.navbar {
-  -webkit-box-shadow: 0px 2px 2px #CCC;
-  -moz-box-shadow: 0px 2px 2px #CCC;
-  box-shadow: 0px 2px 2px #ccc;
   z-index: 999;
 }
 .panel.panel-primary {
@@ -171,10 +169,24 @@ li.widget:hover {
 }
 
 div.widget .chart-header {
-  padding: 5px;
-  background-color: #f1f1f1;
+  padding-top: 8px;
+  background-color: #fff;
+  color: #333;
+  border-bottom: 1px solid #aaa;
+  margin: 0 10px;
+}
+
+.chart-header .header-text {
+  font-size: 20px;
+  line-height: 22px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #888;
+  margin-top: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
+
 div.widget .chart-header a {
   margin-left: 5px;
 }
diff --git a/caravel/assets/javascripts/dashboard/main.css b/caravel/assets/stylesheets/dashboard.css
similarity index 90%
rename from caravel/assets/javascripts/dashboard/main.css
rename to caravel/assets/stylesheets/dashboard.css
index f36a08ccd919..6675fe1ec26b 100644
--- a/caravel/assets/javascripts/dashboard/main.css
+++ b/caravel/assets/stylesheets/dashboard.css
@@ -24,8 +24,8 @@ div.widget .chart-controls {
 }
 .slice-grid div.widget {
   border-radius: 0;
-  border: 1px solid #ccc;
-  box-shadow: 2px 1px 5px -2px #aaa;
+  border: 0px;
+  box-shadow: none;
   background-color: #fff;
   overflow: visible;
 }
@@ -39,9 +39,7 @@ div.widget .chart-controls {
   margin: 5px;
   position: absolute;
 }
-.dashboard .title {
-  text-align: center;
-}
+
 .dashboard .slice_title {
   text-align: center;
   font-weight: bold;
@@ -69,7 +67,7 @@ div.widget .chart-controls {
 }
 
 .slice-grid div.separator.widget {
-  border: 1px solid transparent;
+ border: 1px solid transparent;
   box-shadow: none;
   z-index: 1;
 }
@@ -98,3 +96,15 @@ div.widget .chart-controls {
   top: 0;
   bottom: 0;
 }
+
+.dashboard .title {
+  margin: 0 20px;
+}
+
+.dashboard .title .favstar {
+  font-size: 24px;
+}
+
+.chart-header .header {
+  font-size: 16px;
+}
diff --git a/caravel/assets/stylesheets/explore.css b/caravel/assets/stylesheets/explore.css
index 8aa0ae21a114..ce856f763cac 100644
--- a/caravel/assets/stylesheets/explore.css
+++ b/caravel/assets/stylesheets/explore.css
@@ -6,13 +6,36 @@
     position: absolute;
     left: 0;
     top: 0;
+    background-color: #fff;
 }
 
-.header hr {
-    margin-top: 10px;
-    margin-bottom: 10px;
+.slice-name__container {
+  background-color: #fff;
+  padding: 16px 20px 20px 20px;
+}
+.slice-name__text {
+  color: #333;
+  font-size: 20px;
+  border-bottom: 1px solid #aaa;
+  padding-bottom: 10px;
+  padding-left: 42px;
+  font-weight: bold;
+}
+
+.edit-slice-description-icon {
+  float: left;
+  margin-top: -33px;
+  margin-left: 20px;
+}
+
+.slice-meta {
+  margin-top: -52px;
 }
 
 .navbar {
-    margin-bottom: 10px;
+  margin-bottom: 22px;
+}
+
+.query-and-save-btns-container {
+  margin-bottom: 22px;
 }
diff --git a/caravel/assets/stylesheets/less/bootswatch.less b/caravel/assets/stylesheets/less/bootswatch.less
index 4e9cf7888a58..3f55fca1c00a 100644
--- a/caravel/assets/stylesheets/less/bootswatch.less
+++ b/caravel/assets/stylesheets/less/bootswatch.less
@@ -13,10 +13,10 @@
 
 .navbar {
   border: none;
-  .box-shadow(0 1px 2px rgba(0,0,0,.3));
 
   &-brand {
     font-size: 24px;
+    padding: 17px 15px!important;
   }
 
   &-inverse {
@@ -25,16 +25,17 @@
       input[type=text],
       input[type=password] {
         color: #fff;
-        .box-shadow(inset 0 -1px 0 @navbar-inverse-link-color);
         .placeholder(@navbar-inverse-link-color);
 
         &:focus {
-          .box-shadow(inset 0 -2px 0 #fff);
         }
       }
     }
   }
 }
+.navbar-inverse .navbar-nav > li > a {
+  color: #333;
+}
 
 // Buttons ====================================================================
 
@@ -56,7 +57,6 @@
       background-color: darken(@bg, 12%);
       #gradient > .radial(darken(@bg, 12%) 10%, @bg 11%);
       background-size: 1000%;
-      .box-shadow(2px 2px 4px rgba(0,0,0,.4));
     }
   }
 }
@@ -68,21 +68,21 @@
 #btn(warning,@btn-warning-bg);
 #btn(danger,@btn-danger-bg);
 #btn(link,#fff);
-
+.btn-group {
+  padding: 5px;
+  background-color: #fff;
+}
 .btn {
   text-transform: uppercase;
   border: none;
-  .box-shadow(1px 1px 4px rgba(0,0,0,.4));
   .transition(all 0.4s);
 
   &-link {
     border-radius: @btn-border-radius-base;
-    .box-shadow(none);
     color: @btn-default-color;
 
     &:hover,
     &:focus {
-      .box-shadow(none);
       color: @btn-default-color;
       text-decoration: none;
     }
@@ -169,11 +169,9 @@ input[type=number],
   border: none;
   border-radius: 0;
   -webkit-appearance: none;
-  .box-shadow(inset 0 -1px 0 #ddd);
   font-size: 16px;
 
   &:focus {
-    .box-shadow(inset 0 -2px 0 @brand-primary);
   }
 
   &[disabled],
@@ -206,7 +204,6 @@ select.form-control {
   background-size: 13px;
   background-repeat: no-repeat;
   background-position: right center;
-  .box-shadow(inset 0 -1px 0 #ddd);
   font-size: 16px;
   line-height: 1.5;
 
@@ -332,7 +329,7 @@ input[type="checkbox"],
     height: 18px;
     margin-top: -2px;
     margin-right: 5px;
-    border: 2px solid @gray;
+    border: 1px solid #333;
     border-radius: 2px;
     .transition(240ms);
   }
@@ -345,15 +342,15 @@ input[type="checkbox"],
     display: table;
     width: 6px;
     height: 12px;
-    border: 2px solid #fff;
+    border: 2px solid #333;
     border-top-width: 0;
     border-left-width: 0;
     .rotate(45deg);
   }
 
   &:checked:after {
-    background-color: @brand-primary;
-    border-color: @brand-primary;
+    background-color: #FFFFFF;
+    border-color: #333;
   }
 
   &:disabled:after {
@@ -423,12 +420,10 @@ input[type="checkbox"],
     background-color: transparent;
     border: none;
     color: @navbar-default-link-color;
-    .box-shadow(inset 0 -1px 0 #ddd);
     .transition(all 0.2s);
 
     &:hover {
       background-color: transparent;
-      .box-shadow(inset 0 -2px 0 @brand-primary);
       color: @brand-primary;
     }
   }
@@ -436,7 +431,6 @@ input[type="checkbox"],
   & > li.active > a,
   & > li.active > a:focus {
     border: none;
-    .box-shadow(inset 0 -2px 0 @brand-primary);
     color: @brand-primary;
 
     &:hover {
@@ -446,7 +440,6 @@ input[type="checkbox"],
   }
 
   & > li.disabled > a {
-    .box-shadow(inset 0 -1px 0 #ddd);
   }
 
   &.nav-justified {
@@ -469,7 +462,6 @@ input[type="checkbox"],
 .dropdown-menu {
   margin-top: 0;
   border: none;
-  .box-shadow(0 1px 4px rgba(0,0,0,.3));
 }
 
 // Indicators =================================================================
@@ -597,9 +589,8 @@ input[type="checkbox"],
 
 .panel {
   border: none;
-  border-radius: 2px;
-  .box-shadow(0 1px 4px rgba(0,0,0,.3));
-
+  border-radius: 0;
+  box-shadow: none;
   &-heading {
     border-bottom: none;
   }
@@ -609,9 +600,16 @@ input[type="checkbox"],
   }
 }
 
+.panel-default > .panel-heading {
+  color: #333!important;
+  border-bottom: 1px solid #aaa;
+  background-color: #fff!important;
+  margin: 10px;
+  font-weight: bold;
+}
+
 .popover {
   border: none;
-  .box-shadow(0 1px 4px rgba(0,0,0,.3));
 }
 
 .carousel {
@@ -621,4 +619,3 @@ input[type="checkbox"],
     }
   }
 }
-
diff --git a/caravel/assets/stylesheets/less/variables.less b/caravel/assets/stylesheets/less/variables.less
index b8d050974d00..de5f6e6b6ab5 100644
--- a/caravel/assets/stylesheets/less/variables.less
+++ b/caravel/assets/stylesheets/less/variables.less
@@ -22,15 +22,15 @@
 @gray-base:              #000;
 @gray-darker:            lighten(@gray-base, 13.5%); // #222
 @gray-dark:              #212121;
-@gray:                   #666;
+@gray:                   #333;
 @gray-light:             #bbb;
 @gray-lighter:           lighten(@gray-base, 93.5%); // #eee
 
-@brand-primary:         @kazan;
-@brand-success:         darken(@lima, 25%);
-@brand-warning:         darken(@beach, 10%);
-@brand-info:            darken(@babu, 10%);
-@brand-danger:          darken(@rausch, 15%);
+@brand-primary:         #000;
+@brand-success:         darken(@lima, 15%);
+@brand-info:            @beach;
+@brand-warning:         @hackberry;
+@brand-danger:          darken(@rausch, 5%);
 
 @default-color:         #444;
 @default-bg:            #fff;
@@ -61,7 +61,7 @@
 //## Settings for some of the most global styles.
 
 //** Background color for `<body>`.
-@body-bg:               #fff;
+@body-bg:               #EDEDED;
 //** Global text color on `<body>`.
 @text-color:            @gray;
 
@@ -83,16 +83,16 @@
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
-@font-size-base:          13px;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+@font-size-base:          12px;
+@font-size-large:         ceil((@font-size-base * 1.25));
+@font-size-small:         ceil((@font-size-base * 0.75));
 
 @font-size-h1:            56px;
 @font-size-h2:            45px;
 @font-size-h3:            34px;
 @font-size-h4:            24px;
 @font-size-h5:            20px;
-@font-size-h6:            14px;
+@font-size-h6:            12px;
 
 //** Unit-less `line-height` for use in components like buttons.
 @line-height-base:        1.846; // 20/14
@@ -101,9 +101,9 @@
 
 //** By default, this inherits from the `<body>`.
 @headings-font-family:    inherit;
-@headings-font-weight:    400;
+@headings-font-weight:    900;
 @headings-line-height:    1.1;
-@headings-color:          #444;
+@headings-color:          #333;
 
 
 //== Iconography
@@ -137,9 +137,9 @@
 @line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
 @line-height-small:         1.5;
 
-@border-radius-base:        3px;
-@border-radius-large:       3px;
-@border-radius-small:       3px;
+@border-radius-base:        2px;
+@border-radius-large:       2px;
+@border-radius-small:       2px;
 
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;
@@ -490,9 +490,9 @@
 @pagination-hover-bg:                  @gray-lighter;
 @pagination-hover-border:              #ddd;
 
-@pagination-active-color:              #fff;
-@pagination-active-bg:                 @brand-primary;
-@pagination-active-border:             @brand-primary;
+@pagination-active-color:              #333;
+@pagination-active-bg:                 #fff;
+@pagination-active-border:             #333;
 
 @pagination-disabled-color:            @gray-light;
 @pagination-disabled-bg:               #fff;
@@ -735,7 +735,7 @@
 
 @panel-bg:                    #fff;
 @panel-body-padding:          15px;
-@panel-heading-padding:       10px 15px;
+@panel-heading-padding:       5px 15px 3px 0px;
 @panel-footer-padding:        @panel-heading-padding;
 @panel-border-radius:         @border-radius-base;
 
diff --git a/caravel/assets/stylesheets/welcome.css b/caravel/assets/stylesheets/welcome.css
index b46aab7d066a..2d893e53df17 100644
--- a/caravel/assets/stylesheets/welcome.css
+++ b/caravel/assets/stylesheets/welcome.css
@@ -19,3 +19,8 @@ input {
 .panel-body {
     overflow: auto;
 }
+
+.cal-heatmap-panel {
+  padding: 20px;
+  background-color: #fff;
+}
diff --git a/caravel/templates/appbuilder/navbar.html b/caravel/templates/appbuilder/navbar.html
index 353cb017be6e..fd1d01fb6dcf 100644
--- a/caravel/templates/appbuilder/navbar.html
+++ b/caravel/templates/appbuilder/navbar.html
@@ -9,12 +9,9 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" style="padding:7px;opacity:0.9;" href="{{appbuilder.get_url_for_index}}">
-        <img width="50" src="{{ appbuilder.app_icon }}">
+      <a class="navbar-brand" href="{{appbuilder.get_url_for_index}}">
+        <img width="75" src="/static/assets/images/caravel.png" style="padding-top:8px;" alt="">
       </a>
-      <span class="navbar-brand">
-          {{ appbuilder.app_name }}
-      </span>
     </div>
     <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
diff --git a/caravel/templates/caravel/dashboard.html b/caravel/templates/caravel/dashboard.html
index afdf144114d8..d5a62cf266eb 100644
--- a/caravel/templates/caravel/dashboard.html
+++ b/caravel/templates/caravel/dashboard.html
@@ -7,75 +7,77 @@
 {% block title %}[dashboard] {{ dashboard.dashboard_title }}{% endblock %}
 {% block body %}
 
-<div class="dashboard container-fluid" data-dashboard="{{ dashboard.json_data }}" data-css="{{ dashboard.css }}" data-user="{{ user_id }}">
+<div
+  class="dashboard container-fluid"
+  data-dashboard="{{ dashboard.json_data }}"
+  data-css="{{ dashboard.css }}"
+  data-user="{{ user_id }}"
+>
   {% include 'caravel/flash_wrapper.html' %}
 
-<!-- Modal -->
-<div class="modal fade" id="css_modal" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content css">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
-        <h6><strong>Styling applies to this dashboard only</strong></h6>
-      </div>
-      <div class="modal-body">
-        <select id="css_template" class="select2" style="margin-bottom: 5px;">
-          <option value="" data-css="">CSS template</option>
-          {% for t in templates %}
-            <option value="{{ t.id }}" data-css="{{t.css}}">
-              {{ t.template_name }}
-            </option>
-          {% endfor %}
-        </select><br>
-        <textarea id="dash_css" rows="30" cols="60">{{ dashboard.css }}</textarea>
-        <input type="hidden" id="dashboard_id" value="{{ dashboard.id }}" />
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">
-          Close
-        </button>
+  <!-- Modal -->
+  <div class="modal fade" id="css_modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content css">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
+          <h6><strong>Styling applies to this dashboard only</strong></h6>
+        </div>
+        <div class="modal-body">
+          <select id="css_template" class="select2" style="margin-bottom: 5px;">
+            <option value="" data-css="">CSS template</option>
+            {% for t in templates %}
+              <option value="{{ t.id }}" data-css="{{t.css}}">
+                {{ t.template_name }}
+              </option>
+            {% endfor %}
+          </select><br>
+          <textarea id="dash_css" rows="30" cols="60">{{ dashboard.css }}</textarea>
+          <input type="hidden" id="dashboard_id" value="{{ dashboard.id }}" />
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">
+            Close
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
-<div class="modal fade" id="refresh_modal" tabindex="-1" role="dialog">
+  <div class="modal fade" id="refresh_modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="myModalLabel">Refresh Interval</h4>
-                <h6><strong>Choose how frequent should the dashboard refresh</strong></h6>
-            </div>
-            <div class="modal-body">
-                <select id="refresh_dash_interval" class="select2" style="margin-bottom: 5px;">
-                    <option value="0">Don't refresh</option>
-                    <option value="10">10 seconds</option>
-                    <option value="30">30 seconds</option>
-                    <option value="60">1 minute</option>
-                    <option value="300">5 minutes</option>
-                </select><br>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">
-                    Close
-                </button>
-            </div>
+      <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title" id="myModalLabel">Refresh Interval</h4>
+            <h6><strong>Choose how frequent should the dashboard refresh</strong></h6>
+        </div>
+        <div class="modal-body">
+            <select id="refresh_dash_interval" class="select2" style="margin-bottom: 5px;">
+                <option value="0">Don't refresh</option>
+                <option value="10">10 seconds</option>
+                <option value="30">30 seconds</option>
+                <option value="60">1 minute</option>
+                <option value="300">5 minutes</option>
+            </select><br>
         </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">
+              Close
+          </button>
+        </div>
+      </div>
     </div>
-</div>
-<div id="add-slice-container"></div>
+  </div>
+  <div id="add-slice-container"></div>
 
-<div class="title">
+  <div class="title">
     <div class="row">
-      <div class="col-md-3"></div>
-      <div class="col-md-6">
-        <h2>
-          <span class="favstar" class_name="Dashboard" obj_id="{{ dashboard.id }}"></span>
-          {{ dashboard.dashboard_title }}
-        </h2>
+      <div class="col-md-8">
+        <span class="favstar" class_name="Dashboard" obj_id="{{ dashboard.id }}"></span>
+        <h2>{{ dashboard.dashboard_title }}</h2>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-4">
         <div class="btn-group pull-right" role="group" >
           <button type="button" id="refresh_dash" class="btn btn-default" data-toggle="tooltip" title="Force refresh the whole dashboard">
             <i class="fa fa-refresh"></i>
@@ -101,11 +103,10 @@ <h2>
         </div>
       </div>
     </div>
-</div>
+  </div>
 
-<!-- gridster class used for backwards compatibility -->
-<div id="grid-container" class="slice-grid gridster">
-</div>
+  <!-- gridster class used for backwards compatibility -->
+  <div id="grid-container" class="slice-grid gridster"></div>
 
 </div>
 {% endblock %}
diff --git a/caravel/templates/caravel/explore.html b/caravel/templates/caravel/explore.html
index 106b0fabfee9..7d2fde9b4ede 100644
--- a/caravel/templates/caravel/explore.html
+++ b/caravel/templates/caravel/explore.html
@@ -18,7 +18,7 @@
       <div>
         {{ field.label }}
         {% if field.description %}
-        <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
+        <i class="fa fa-question-circle-o" data-toggle="tooltip" data-placement="right"
           title="{{ field.description }}"></i>
         {% endif %}
         {{ field(class_=form.field_css_classes(field.name)) }}
@@ -28,37 +28,159 @@
 
   <div class="datasource container-fluid">
     <form id="query" method="GET" style="display: none;">
-      <div class="header">
-          <span id="js-query-and-save-btns"
-               data-can-add="{{ can_add }}"
-          ></span>
+      <div id="form_container" class="col-left-fixed">
+        <div
+          id="js-query-and-save-btns"
+          class="query-and-save-btns-container"
+          data-can-add="{{ can_add }}"
+        ></div>
 
-          <span title="Data Source" data-toggle="tooltip">
-            <select id="datasource_id" class="select2">
-              {% for ds in datasources %}
-                <option url="{{ ds.explore_url }}" {{ "selected" if ds.id == datasource.id }} value="{{ ds.id }}">{{ ds.full_name }}<i class="fa fa-info"></i></option>
-              {% endfor %}
-            </select>
-          </span>
-          <a href="{{ datasource.url }}" class="btn btn-default-outline" data-toggle="tooltip" title="Edit/configure datasource">
-            <i class="fa fa-edit"></i>&nbsp;
-          </a>
-          <span title="Visualization Type" data-toggle="tooltip">
-            {{ form.get_field("viz_type")(class_="select2-with-images") }}
-          </span>
-          {% if slice %}
-            <span class="btn btn-default notbtn" title="Slice" data-toggle="tooltip" data-placement="bottom">
-                <span class="favstar" class_name="Slice" obj_id="{{ slice.id }}"></span>
-                {{ slice.slice_name }}
-                <a class="" href="/slicemodelview/edit/{{ slice.id }}" data-toggle="tooltip" title="Edit">
-                  {% if slice.description %}
-                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="{{ slice.description }}"></i>
+        <div class="panel panel-default">
+          <div class="panel-heading">Datasource & Chart Type</div>
+          <div class="panel-body">
+            <div>
+              <!-- DATASOURCE -->
+              <span title="Data Source" data-toggle="tooltip">
+                <select id="datasource_id" class="select2">
+                  {% for ds in datasources %}
+                    <option url="{{ ds.explore_url }}" {{ "selected" if ds.id == datasource.id }} value="{{ ds.id }}">{{ ds.full_name }}<i class="fa fa-info"></i></option>
+                  {% endfor %}
+                </select>
+              </span>
+              <a href="{{ datasource.url }}" class="btn btn-default-outline" data-toggle="tooltip" title="Edit/configure datasource">
+                <i class="fa fa-edit"></i>&nbsp;
+              </a>
+            </div>
+            <br/>
+            <!-- CHART TYPE -->
+            <div title="Visualization Type" data-toggle="tooltip">
+              {{ form.get_field("viz_type")(class_="select2-with-images") }}
+            </div>
+          </div>
+        </div>
+        {% for fieldset in form.fieldsets %}
+            <div class="panel panel-default">
+              {% if fieldset.label %}
+                <div class="panel-heading">
+                  <span class="legend_label">{{ fieldset.label }}</span>
+                  {% if fieldset.description %}
+                    <i    class="fa fa-question-circle-o" data-toggle="tooltip"
+                          data-placement="bottom"
+                          title="{{ fieldset.description }}"></i>
                   {% endif %}
-                  <i class="fa fa-edit"></i>
-                </a>
-            </span>
+                  <!-- <span class="collapser"> [-]</span> -->
+                </div>
+              {% endif %}
+              <div class="panel-body">
+              {% for fieldname in fieldset.fields %}
+                {% if not fieldname %}
+                  <hr/>
+                {% elif fieldname is string %}
+                  {{ panofield(fieldname) }}
+                {% else %}
+                <div class="row">
+                  <div class="form-group">
+                    {% for name in fieldname %}
+                    <div class="col-xs-{{ (12 / fieldname|length) | int }}">
+                      {% if name %}
+                        {{ panofield(name) }}
+                      {% endif %}
+                    </div>
+                    {% endfor %}
+                  </div>
+                </div>
+                {% endif %}
+              {% endfor %}
+              </div>
+            </div>
+          {% endfor %}
+          <div id="filter_panel" class="panel panel-default">
+            <div class="panel-heading">
+              <span class="legend_label">{{ _("Filters") }}</span>
+              <i  class="fa fa-question-circle-o" data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="{{_("Filters are defined using comma delimited strings as in 'US,FR,Other'")}}. {{_("Leave the value field empty to filter empty strings or nulls")}}"></i>
+              <!--<span class="collapser"> [-]</span>-->
+            </div>
+            <div class="panel-body">
+              <div id="flt0" style="display: none;">
+                <span class="">{{ form.flt_col_0(class_="form-control inc") }}</span>
+                <div class="row">
+                  <span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
+                  <span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
+                  <button type="button" class="btn btn-default btn-sm remove" aria-label="Delete filter">
+                    <span class="fa fa-minus"  aria-hidden="true"></span>
+
+                  </button>
+                </div>
+              </div>
+              <div id="filters"></div>
+              <button type="button" id="plus" class="btn btn-default btn-sm" aria-label="Add a filter">
+                <span class="fa fa-plus" aria-hidden="true"></span>
+                <span>{{ _("Add filter") }}</span>
+              </button>
+            </div>
+          </div>
+
+
+          {% if form.having_col_0 %}
+            <div id="having_panel" class="panel panel-default">
+              <div class="panel-heading">
+                <span class="legend_label">Result Filters ("having" filters)</span>
+                <i class="fa fa-info-circle" data-toggle="tooltip"
+                   data-placement="bottom"
+                   title="{{_("The filters to apply after post-aggregation.")}} {{_("Leave the value field empty to filter empty strings or nulls")}}"></i>
+                <span class="collapser"> [-]</span>
+              </div>
+              <div class="panel-body">
+                <div id="having0" style="display: none;">
+                  <span class="">{{ form.having_col_0(class_="form-control inc") }}</span>
+                  <div class="row">
+                    <span class="col col-sm-4">{{ form.having_op_0(class_="form-control inc") }}</span>
+                    <span class="col col-sm-6">{{ form.having_eq_0(class_="form-control inc") }}</span>
+                    <button type="button"
+                            class="btn btn-default btn-sm remove"
+                            aria-label="Delete filter">
+                                  <span class="fa fa-minus"
+                                        aria-hidden="true"></span>
+                    </button>
+                  </div>
+                </div>
+                <div id="filters"></div>
+                <button type="button" id="plus"
+                        class="btn btn-default btn-sm"
+                        aria-label="Add a filter">
+                  <span class="fa fa-plus" aria-hidden="true"></span>
+                  <span>Add filter</span>
+                </button>
+              </div>
+            </div>
           {% endif %}
-          <div class="pull-right">
+          {{ form.slice_id() }}
+          {{ form.slice_name() }}
+          {{ form.collapsed_fieldsets() }}
+          <input type="hidden" name="action" id="action" value="">
+          <input type="hidden" name="userid" id="userid" value="{{ userid }}">
+          <input type="hidden" name="goto_dash" id="goto_dash" value="false">
+          <input type="hidden" name="datasource_name" value="{{ datasource.name }}">
+          <input type="hidden" name="datasource_id" value="{{ datasource.id }}">
+          <input type="hidden" name="datasource_type" value="{{ datasource.type }}">
+          <input type="hidden" name="previous_viz_type" value="{{ viz.viz_type or "table" }}">
+      </div>
+
+      <div class="col-offset">
+        {% block messages %}{% endblock %}
+        {% include 'appbuilder/flash.html' %}
+        <div class="slice-name__container">
+          <span class="favstar" class_name="Slice" obj_id="{{ slice.id }}"></span>
+          <div class="slice-name__text">{{slice.slice_name}}</div>
+          <a href="/slicemodelview/edit/{{ slice.id }}" data-toggle="tooltip" title="Edit Description" class="edit-slice-description-icon">
+            {% if slice.description %}
+              <i class="fa fa-question-circle-o" data-toggle="tooltip" data-placement="bottom" title="{{ slice.description }}"></i>
+            {% endif %}
+            <i class="fa fa-edit"></i>
+          </a>
+          <div class="slice-meta pull-right">
             <span id="is_cached" class="label label-default" title="{{ _("Force refresh" )}}" data-toggle="tooltip">
               cached
             </span>
@@ -93,132 +215,16 @@
               </span>
             </div>
           </div>
-        <hr/>
-      </div>
-        <div id="form_container" class="col-left-fixed">
-          {% for fieldset in form.fieldsets %}
-              <div class="panel panel-default">
-                {% if fieldset.label %}
-                  <div class="panel-heading">
-                    <span class="legend_label">{{ fieldset.label }}</span>
-                    {% if fieldset.description %}
-                      <i    class="fa fa-info-circle" data-toggle="tooltip"
-                            data-placement="bottom"
-                            title="{{ fieldset.description }}"></i>
-                    {% endif %}
-                    <span class="collapser"> [-]</span>
-                  </div>
-                {% endif %}
-                <div class="panel-body">
-                {% for fieldname in fieldset.fields %}
-                  {% if not fieldname %}
-                    <hr/>
-                  {% elif fieldname is string %}
-                    {{ panofield(fieldname) }}
-                  {% else %}
-                  <div class="row">
-                    <div class="form-group">
-                      {% for name in fieldname %}
-                      <div class="col-xs-{{ (12 / fieldname|length) | int }}">
-                        {% if name %}
-                          {{ panofield(name) }}
-                        {% endif %}
-                      </div>
-                      {% endfor %}
-                    </div>
-                  </div>
-                  {% endif %}
-                {% endfor %}
-                </div>
-              </div>
-            {% endfor %}
-            <div id="filter_panel" class="panel panel-default">
-              <div class="panel-heading">
-                <span class="legend_label">{{ _("Filters") }}</span>
-                <i  class="fa fa-info-circle" data-toggle="tooltip"
-                    data-placement="bottom"
-                    title="{{_("Filters are defined using comma delimited strings as in 'US,FR,Other'")}}. {{_("Leave the value field empty to filter empty strings or nulls")}}"></i>
-                <span class="collapser"> [-]</span>
-              </div>
-              <div class="panel-body">
-                <div id="flt0" style="display: none;">
-                  <span class="">{{ form.flt_col_0(class_="form-control inc") }}</span>
-                  <div class="row">
-                    <span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
-                    <span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
-                    <button type="button" class="btn btn-default btn-sm remove" aria-label="Delete filter">
-                      <span class="fa fa-minus"  aria-hidden="true"></span>
-
-                    </button>
-                  </div>
-                </div>
-                <div id="filters"></div>
-                <button type="button" id="plus" class="btn btn-default btn-sm" aria-label="Add a filter">
-                  <span class="fa fa-plus" aria-hidden="true"></span>
-                  <span>{{ _("Add filter") }}</span>
-                </button>
-              </div>
-            </div>
-
-
-            {% if form.having_col_0 %}
-              <div id="having_panel" class="panel panel-default">
-                <div class="panel-heading">
-                  <span class="legend_label">Result Filters ("having" filters)</span>
-                  <i class="fa fa-info-circle" data-toggle="tooltip"
-                     data-placement="bottom"
-                     title="{{_("The filters to apply after post-aggregation.")}} {{_("Leave the value field empty to filter empty strings or nulls")}}"></i>
-                  <span class="collapser"> [-]</span>
-                </div>
-                <div class="panel-body">
-                  <div id="having0" style="display: none;">
-                    <span class="">{{ form.having_col_0(class_="form-control inc") }}</span>
-                    <div class="row">
-                      <span class="col col-sm-4">{{ form.having_op_0(class_="form-control inc") }}</span>
-                      <span class="col col-sm-6">{{ form.having_eq_0(class_="form-control inc") }}</span>
-                      <button type="button"
-                              class="btn btn-default btn-sm remove"
-                              aria-label="Delete filter">
-                                    <span class="fa fa-minus"
-                                          aria-hidden="true"></span>
-                      </button>
-                    </div>
-                  </div>
-                  <div id="filters"></div>
-                  <button type="button" id="plus"
-                          class="btn btn-default btn-sm"
-                          aria-label="Add a filter">
-                    <span class="fa fa-plus" aria-hidden="true"></span>
-                    <span>Add filter</span>
-                  </button>
-                </div>
-              </div>
-            {% endif %}
-            {{ form.slice_id() }}
-            {{ form.slice_name() }}
-            {{ form.collapsed_fieldsets() }}
-            <input type="hidden" name="action" id="action" value="">
-            <input type="hidden" name="userid" id="userid" value="{{ userid }}">
-            <input type="hidden" name="goto_dash" id="goto_dash" value="false">
-            <input type="hidden" name="datasource_name" value="{{ datasource.name }}">
-            <input type="hidden" name="datasource_id" value="{{ datasource.id }}">
-            <input type="hidden" name="datasource_type" value="{{ datasource.type }}">
-            <input type="hidden" name="previous_viz_type" value="{{ viz.viz_type or "table" }}">
         </div>
-
-        <div class="col-offset">
-          {% block messages %}{% endblock %}
-          {% include 'appbuilder/flash.html' %}
-          <div
-            id="{{ viz.token }}"
-            class="widget viz slice {{ viz.viz_type }}"
-            data-slice="{{ viz.json_data }}"
-            style="height: 700px;">
-            <img src="{{ url_for("static", filename="assets/images/loading.gif") }}" class="loading" alt="loading">
-            <div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
-          </div>
-          <div class="credits pull-right">{{ "credits: " + viz.credits |safe if viz. credits else "" }}</div>
+        <div
+          id="{{ viz.token }}"
+          class="widget viz slice {{ viz.viz_type }}"
+          data-slice="{{ viz.json_data }}"
+          style="height: 700px;">
+          <img src="{{ url_for("static", filename="assets/images/loading.gif") }}" class="loading" alt="loading">
+          <div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
         </div>
+      </div>
       <div class="modal fade" id="query_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
diff --git a/caravel/templates/caravel/standalone.html b/caravel/templates/caravel/standalone.html
index 3952804726e6..c69f3d0e6fe4 100644
--- a/caravel/templates/caravel/standalone.html
+++ b/caravel/templates/caravel/standalone.html
@@ -1,15 +1,18 @@
 <html>
   <head>
-    <script src="/static/assets/javascripts/dist/css-theme.entry.js"></script>
-    <script src="/static/assets/javascripts/dist/standalone.entry.js"></script>
-    <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/caravel.css" />
+    <title>{{viz.token}}</title>
     <link rel="stylesheet" type="text/css" href="/static/assets/node_modules/font-awesome/css/font-awesome.min.css" />
+    <link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/caravel.css" />
+    <link rel="stylesheet" type="text/css" href="/static/appbuilder/css/flags/flags16.css" />
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
+
     {% set CSS_THEME = appbuilder.get_app.config.get("CSS_THEME") %}
     {% set height = request.args.get("height", 700) %}
     {% if CSS_THEME %}
       <link rel="stylesheet" type="text/css" href="{{ CSS_THEME }}" />
     {% endif %}
   </head>
+
   <body>
     <div
       id="{{ viz.token }}"
@@ -20,4 +23,7 @@
       <div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
     </div>
   </body>
+  <script src="/static/assets/javascripts/dist/css-theme.entry.js"></script>
+  <script src="/static/assets/javascripts/dist/standalone.entry.js"></script>
 </html>
+
diff --git a/caravel/templates/caravel/welcome.html b/caravel/templates/caravel/welcome.html
index b43adcb2260a..5f2ec40db5a8 100644
--- a/caravel/templates/caravel/welcome.html
+++ b/caravel/templates/caravel/welcome.html
@@ -10,12 +10,9 @@
 {% block body %}
 <div class="container welcome">
   {% include 'caravel/flash_wrapper.html' %}
-  <div class="header">
-    <h3>{{ _("Welcome!") }}</h3>
+  <div class="cal-heatmap-panel">
+    <div id="cal-heatmap"></div>
   </div>
-  <hr/>
-  <div id="cal-heatmap"></div>
-  <hr/>
   <div class="row">
     <div class="col-md-12">
       <div class="panel panel-default">
diff --git a/caravel/views.py b/caravel/views.py
index cdb796bcbd03..b850b1431d65 100755
--- a/caravel/views.py
+++ b/caravel/views.py
@@ -605,7 +605,6 @@ class SliceAsync(SliceModelView):  # noqa
     label_columns = {
         'icons': ' ',
         'slice_link': _('Slice'),
-        'viz_type': _('Visualization Type'),
     }
 
 appbuilder.add_view_no_menu(SliceAsync)