group smartblock search criteria fields to accurately reflect query

airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml

@@ -44,7 +44,7 @@
                 <a style='margin-right:3px' class='btn btn-small btn-danger' id='criteria_remove_<?php echo $i ?>'>
                     <i class='icon-white icon-remove spl-no-r-margin'></i>
                 </a>
-                <span class='db-logic-label<?php echo ' db-logic-label-' . $logicLabel; ?>' <?php if ($nextDisabled) echo 'style="display:none"';?>>
+                <span class='db-logic-label' <?php if ($nextDisabled) echo 'style="display:none"';?>>
                     <?php echo $logicLabel;?>
                 </span>
                 

airtime_mvc/public/css/media_library.css

@@ -217,9 +217,10 @@ tr.lib-selected > td > div.library_actions_btn:hover {
 .search-criteria .criteria-element > div {
 	margin-bottom: 5px;
 	display: flex;
+	flex-wrap: wrap;
 	position: relative;
 	}
-	.search-criteria .criteria-element > div.search-row-and { margin-bottom: 36px; }
+	.search-criteria .criteria-element > div.search-row-and { margin-bottom: 42px; }
 	.search-criteria .criteria-element > div input[type="text"],
 	.search-criteria .criteria-element > div select  {
 		-webkit-box-sizing: border-box;

airtime_mvc/public/css/playlist_builder.css

@@ -634,7 +634,7 @@ li.spl_empty {
 }
 
 #criteria_add {
-    margin-bottom: 5px;
+    margin: -10px 0 5px;
 }
 
 .smart-block-form dt, .smart-block-form dd {

airtime_mvc/public/css/styles.css

@@ -706,26 +706,39 @@ table.library-get-file-md.table-small{
 .modifier_add_link {
     font-size: 12px;
     display: block;
-    margin: 0 0 10px 33%;
+    margin: 0 0 10px 29%;
     text-decoration: underline;
     cursor: pointer;
     position: absolute;
-    top: 30px;
+    top: calc(100% + 5px);
 }
 .db-logic-label {
-    font-size:14px;
+    font-size:12px;
     position: absolute;
-    top: 36px;
+    top: calc(100% + 5px);
+    margin: 7px;
 }
-.db-logic-label-and {
+.search-row-and .db-logic-label {
-    top: 42px;
+    display: table;
+    white-space: nowrap;
+    width: 100%;
+    text-align: center;
+    margin: 1.5em 0 0;
+}
+.search-row-and .db-logic-label:before, .search-row-and .db-logic-label:after {
+    border-top: 1px solid hsl(0, 0%, 29%);
+    content: '';
+    display: table-cell;
+    position: relative;
+    top: 0.5em;
+    width: 45%;
 }
 .sp-invisible{
     visibility: hidden;
 }
 
-.sp_input_select{
+.sp_input_select, .sp_input_text {
-    flex: 0 0 33%;
+    flex: 0 0 29%;
 }
 
 .sp_input_text_limit{
@@ -737,18 +750,13 @@ table.library-get-file-md.table-small{
     margin-right: 0px !important;
 }
 
-input.input_text.sp_input_text{
-    width: 139px !important;
-}
-
-input.input_text.sp_extra_input_text{
-    width: 139px !important;
-}
-
 .sp_text_font{
-    font-size: 13px;
+    font-size: 12px;
     font-family: Helvetica, Arial, sans-serif;
     color: #FFFFFF;
+    line-height: 26px;
+    display: inline-block;
+    margin-right: 4px;
 }
 
 .sp_text_font_bold{

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

@@ -24,7 +24,7 @@ function setSmartBlockEvents() {
 
         } else {
 
-            div.find('.db-logic-label').text('and').show();
+            div.find('.db-logic-label').text('and').css('display', 'table');
             div.removeClass('search-row-or').addClass('search-row-and');
             
             div = div.next().show();
@@ -41,6 +41,7 @@ function setSmartBlockEvents() {
             appendModAddButton();
             removeButtonCheck();
             // disableAndHideDateTimeDropdown(newRowVal);
+            groupCriteriaRows();
 
         }
     });
@@ -83,13 +84,14 @@ function setSmartBlockEvents() {
 
         $(this).parent().after(newRow);
         
+        // remove extra spacing from previous row
         newRow.prev().removeClass('search-row-and').addClass('search-row-or');
-        newRow.prev().find(".db-logic-label").removeClass('db-logic-label-and').addClass('db-logic-label-or');
 
         reindexElements();
         appendAddButton();
         appendModAddButton();
         removeButtonCheck();
+        groupCriteriaRows();
     });
 	
     /********** REMOVE ROW **********/
@@ -277,6 +279,9 @@ function setSmartBlockEvents() {
         
         // remove the 'x' button if only one row is enabled
         removeButtonCheck();
+
+        groupCriteriaRows();
+        
     });
 	
     /********** SAVE ACTION **********/
@@ -313,7 +318,7 @@ function setSmartBlockEvents() {
 
 
         /********** CRITERIA CHANGE **********/
-    form.find('select[id^="sp_criteria"]:not([id^="sp_criteria_modifier"])').live("change", function(){
+    form.find('select[id^="sp_criteria"]:not([id^="sp_criteria_modifier"]):not([id^="sp_criteria_datetime"]):not([id^="sp_criteria_extra_datetime"])').live("change", function(){
         var index = getRowIndex($(this).parent());
         //need to change the criteria value for any modifier rows
         var critVal = $(this).val();
@@ -813,6 +818,30 @@ function enableLoadingIcon() {
 function disableLoadingIcon() {
     $(".side_playlist.active-tab").unblock()
 }
+
+function groupCriteriaRows() {
+    // check whether rows should be "grouped" and shown with an "or" "logic label", or separated by an "and" "logic label"
+    var visibleRows = $("#sp_criteria-element > div:visible"), 
+        prevRowGroup = "0";
+
+    visibleRows.each(function (index){
+        if (index > 0) {
+            var fieldId = $(this).find('select[id^="sp_criteria_field"]').attr("id");
+            var currRowGroup = fieldId[fieldId.length - 3];
+            if (currRowGroup === prevRowGroup) {
+                $(this).prev().addClass("search-row-or").removeClass("search-row-and")
+            } else {
+                $(this).prev().addClass("search-row-and").removeClass("search-row-or")
+            }
+            prevRowGroup = currRowGroup;
+        }
+    });
+
+    // ensure spacing below last visible row 
+    $("#sp_criteria-element > div:visible:last").addClass("search-row-and").removeClass("search-row-or");
+}
+
+
 // We need to know if the criteria value will be a string
 // or numeric value in order to populate the modifier
 // select list