From 3f43c9abb5a4766ec5cec7acea5722aefacdf909 Mon Sep 17 00:00:00 2001 From: r Date: Mon, 4 Feb 2019 14:18:02 -0600 Subject: [PATCH] group smartblock search criteria fields to accurately reflect query --- .../scripts/form/smart-block-criteria.phtml | 2 +- airtime_mvc/public/css/media_library.css | 3 +- airtime_mvc/public/css/playlist_builder.css | 2 +- airtime_mvc/public/css/styles.css | 42 +++++++++++-------- .../js/airtime/playlist/smart_blockbuilder.js | 37 ++++++++++++++-- 5 files changed, 62 insertions(+), 24 deletions(-) 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