Using boostrap panels for form fieldsets in explore view

caravel/assets/javascripts/explore.js

@@ -54,7 +54,7 @@ function prepForm() {
   });
 }
 
-function druidify(force, pushState) {
+function query(force, pushState) {
   if (force === undefined) {
     force = false;
   }
@@ -90,9 +90,9 @@ function initExploreView() {
 
     if (parent.hasClass("collapsed")) {
       if (animation) {
-        parent.find(".fieldset_content").slideDown();
+        parent.find(".panel-body").slideDown();
       } else {
-        parent.find(".fieldset_content").show();
+        parent.find(".panel-body").show();
       }
       parent.removeClass("collapsed");
       parent.find("span.collapser").text("[-]");
@@ -104,9 +104,9 @@ function initExploreView() {
       }
     } else { // not collapsed
       if (animation) {
-        parent.find(".fieldset_content").slideUp();
+        parent.find(".panel-body").slideUp();
       } else {
-        parent.find(".fieldset_content").hide();
+        parent.find(".panel-body").hide();
       }
 
       parent.addClass("collapsed");
@@ -122,8 +122,9 @@ function initExploreView() {
 
   px.initFavStars();
 
-  $('legend').click(function () {
+  $('form .panel-heading').click(function () {
     toggle_fieldset($(this), true);
+    $(this).css('cursor', 'pointer');
   });
 
   function copyURLToClipboard(url) {
@@ -265,8 +266,8 @@ function initExploreView() {
     }
   });
 
-  $(".druidify").click(function () {
-    druidify(true);
+  $(".query").click(function () {
+    query(true);
   });
 
   function create_choices(term, data) {
@@ -330,7 +331,7 @@ $(document).ready(function () {
   $('.slice').data('slice', slice);
 
   // call vis render method, which issues ajax
-  druidify(false, false);
+  query(false, false);
 
   // make checkbox inputs display as toggles
   $(':checkbox')

caravel/assets/stylesheets/caravel.css

@@ -116,25 +116,6 @@ span.title-block {
     font-size: 20px;
 }
 
-fieldset.fs-style {
-    font-family: Verdana, Arial, sans-serif;
-    font-size: small;
-    font-weight: normal;
-    border: 1px solid #CCC;
-    background-color: #F4F4F4;
-    border-radius: 6px;
-    padding: 10px;
-    margin: 0px 0px 10px 0px;
-}
-legend.legend-style {
-    font-size: 14px;
-    padding: 0px 6px;
-    cursor: pointer;
-    margin: 0px;
-    color: #444;
-    background-color: transparent;
-    font-weight: bold;
-}
 .nvtooltip {
     //position: relative !important;
     z-index: 888;
@@ -142,10 +123,6 @@ legend.legend-style {
 .nvtooltip table td{
     font-size: 11px !important;
 }
-legend {
-    width: auto;
-    border-bottom: 0px;
-}
 .navbar {
   -webkit-box-shadow: 0px 3px 3px #AAA;
   -moz-box-shadow: 0px 3px 3px #AAA;

caravel/templates/caravel/explore.html

@@ -81,7 +81,7 @@
         <div id="form_container" class="col-left-fixed">
           <div class="row center-block">
             <div class="btn-group query-and-save">
-              <button type="button" class="btn btn-primary druidify">
+              <button type="button" class="btn btn-primary query">
                 <i class="fa fa-bolt"></i>Query
               </button>
               {% if viz.form_data.slice_id %}
@@ -96,9 +96,9 @@
           </div>
           <br/>
           {% for fieldset in form.fieldsets %}
-              <fieldset class="fs-style">
+              <div class="panel panel-default">
                 {% if fieldset.label %}
-                  <legend class="legend-style">
+                  <div class="panel-heading">
                     <span class="legend_label">{{ fieldset.label }}</span>
                     {% if fieldset.description %}
                       <i    class="fa fa-info-circle" data-toggle="tooltip"
@@ -106,9 +106,9 @@
                             title="{{ fieldset.description }}"></i>
                     {% endif %}
                     <span class="collapser"> [-]</span>
-                  </legend>
+                  </div>
                 {% endif %}
-                <div class="fieldset_content">
+                <div class="panel-body">
                 {% for fieldname in fieldset.fields %}
                   {% if not fieldname %}
                     <hr/>
@@ -129,17 +129,17 @@
                   {% endif %}
                 {% endfor %}
                 </div>
-              </fieldset>
+              </div>
             {% endfor %}
-            <fieldset class="fs-style">
-              <legend class="legend-style">
+            <div 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'"></i>
                 <span class="collapser"> [-]</span>
-              </legend>
-              <div class="fieldset_content">
+              </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">
@@ -157,7 +157,7 @@
                   <span>Add filter</span>
                 </button>
               </div>
-            </fieldset>
+            </div>
             {{ form.slice_id() }}
             {{ form.slice_name() }}
             {{ form.collapsed_fieldsets() }}