diff --git a/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml b/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml
index 7bee4b03a..f2aabc598 100644
--- a/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml
+++ b/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml
@@ -44,7 +44,7 @@
- ' >
+ >
diff --git a/airtime_mvc/public/css/media_library.css b/airtime_mvc/public/css/media_library.css
index 82ef848c1..ac397dee9 100644
--- a/airtime_mvc/public/css/media_library.css
+++ b/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;
diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css
index a7751923d..91e5f024e 100644
--- a/airtime_mvc/public/css/playlist_builder.css
+++ b/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 {
diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css
index af356effa..7814b1daa 100644
--- a/airtime_mvc/public/css/styles.css
+++ b/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 {
- top: 42px;
+.search-row-and .db-logic-label {
+ 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{
- flex: 0 0 33%;
+.sp_input_select, .sp_input_text {
+ 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{
diff --git a/airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js b/airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js
index c4db72bf3..fddf6ca34 100644
--- a/airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js
+++ b/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();
}
});
@@ -48,7 +49,7 @@ function setSmartBlockEvents() {
/********** ADD MODIFIER ROW **********/
form.find('a[id^="modifier_add"]').live('click', function(){
var criteria_value = $(this).siblings('select[name^="sp_criteria_field"]').val();
-
+
//make new modifier row
var newRow = $(this).parent().clone(),
@@ -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