smartblock ui: add collapsed "advanced options" section

airtime_mvc/public/css/dashboard.css

@@ -684,20 +684,6 @@ li.ui-state-default {
     height: 26px;
 }
 
-.smart-block-form input[type='radio'] {
-    vertical-align: bottom;
-    margin: 0 5px -2px;
-}
-
-.smart-block-form input[type='checkbox'] {
-    vertical-align: bottom;
-    margin: 0 4px;
-}
-
-.smart-block-form ~ .btn-toolbar {
-    padding-top: 4px;
-}
-
 /* Schedule tab DataTable */
 
 #show_builder_table_wrapper .fg-toolbar.ui-corner-tl.ui-corner-tr {

airtime_mvc/public/css/playlist_builder.css

@@ -634,4 +634,41 @@ li.spl_empty {
 
 #criteria_add {
     margin-bottom: 5px;
+}
+
+.smart-block-form dt, .smart-block-form dd {
+    float: none;
+}
+.smart-block-form dl:not(.search-criteria) {
+    display: flex;
+    width: 100%;
+}
+.smart-block-form dt {
+    flex: 1 0 20%;
+    margin: 0;
+}
+.smart-block-form dd {
+    flex: 0 0 80%;
+    margin: 0;
+}
+.collapsible-header .arrow-icon {
+    transition: 0.3s;
+}
+.collapsible-header.visible .arrow-icon {
+    transform: rotate(90deg);
+}
+.smart-block-advanced {
+    display: none;
+}
+.smart-block-form .smart-block-advanced dt {
+    flex: 0 0 40%;
+    margin: 0;
+}
+.smart-block-form .smart-block-advanced dd {
+    flex: 0 0 60%;
+    margin: 0;
+}
+.smart-block-form input[type='radio'], .smart-block-form input[type='checkbox'] {
+    vertical-align: middle;
+    margin: 0 5px;
 }

airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js

@@ -566,6 +566,11 @@ function setupUI() {
             at: "right center"
         }
     });
+
+    activeTab.find('.smart-block-form .collapsible-header').click(function(){
+        $(this).toggleClass('visible');
+        $('.smart-block-advanced').toggle();
+    })
 }
 
 /* Utilizing jQuery this function finds the #datetime_select element on the given row