CC-6131 - add div to show when search is active; css tweaks

airtime_mvc/application/views/scripts/showbuilder/index.phtml

@@ -7,6 +7,7 @@
     <div class="panel-header">
         <div id="advanced-options" class="btn-group">
             <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
+                <span id="filter_message"></span>
                 <span class="caret"></span>
             </button>
             <div id="advanced_search" class="advanced_search form-horizontal dropdown-menu"></div>

airtime_mvc/public/css/dashboard.css

@@ -161,9 +161,9 @@ div.btn > span {
 #library_empty {
     display: none;
     font-size: 16px;
-    position: absolute;
+    position: fixed;
-    width: 100%;
+    /*width: 100%;*/
-    top: 44%;
+    /*top: 44%;*/
     text-align: center;
     color: #efefef;
 }
@@ -205,9 +205,9 @@ thead th.ui-state-default:focus {
 
 #advanced_search {
     position: absolute;
-    left: -420px;
+    left: -450px;
     padding: 5px;
-    margin-top: -2px;
+    margin-top: 28px;
     z-index: 1005;
 }
 
@@ -232,12 +232,19 @@ thead th.ui-state-default:focus {
     margin-top: 4px;
 }
 
+#filter_message {
+    border-top: none !important;
+    text-shadow: none;
+}
+
 #advanced-options {
     float: right;
     z-index: 1004;
 }
 
 #advanced-options > button {
+    position: absolute;
+    right: 0;
     background: transparent none;
     color: transparent;
     border: none;
@@ -250,6 +257,7 @@ thead th.ui-state-default:focus {
 }
 
 #advanced-options > button > span {
+    color: #000;
     border-top: 4px solid #242424;
 }
 

airtime_mvc/public/js/airtime/library/events/library_showbuilder.js

@@ -88,16 +88,20 @@ var AIRTIME = (function(AIRTIME) {
             });
             // TODO: once the new manual pages are added, change links!
             $.getJSON( "ajax/library_placeholders.json", function( data ) {
-                var opts = data[mediaType];
+                var opts = data[mediaType],
+                    wrapper = $('#library_display_wrapper').find('.dataTables_scrolling');
                 img.addClass("icon-white " + opts.icon);
                 $('#library_empty_text').html(
                     $.i18n._("You haven't added any " + opts.media + ".")
                     + "<br/>" + $.i18n._(opts.subtext)
                     + "<br/><a target='_blank' href='" + opts.href + "'>" + $.i18n._("Learn about " + opts.media) + "</a>"
-                );
-            });
 
-            libEmpty.show();
+                );
+
+                libEmpty.show();
+                libEmpty.css('margin-left', (wrapper.width() / 2) - (libEmpty.width() / 2));
+                libEmpty.css('margin-top', (wrapper.height() / 2) - (libEmpty.height() / 2)  - 19);
+            });
         } else {
             libEmpty.hide();
         }
@@ -373,6 +377,14 @@ var AIRTIME = (function(AIRTIME) {
         }
     };
 
+    mod.onResize = function() {
+        var libEmpty = $('#library_empty'), wrapper = $('#library_display_wrapper').find('.dataTables_scrolling');
+        libEmpty.css('margin-left', (wrapper.width() / 2) - (libEmpty.width() / 2));
+        libEmpty.css('margin-top', (wrapper.height() / 2) - (libEmpty.height() / 2) - 19);
+    };
+
     return AIRTIME;
 
 }(AIRTIME || {}));
+
+$(window).resize(AIRTIME.library.onResize);

airtime_mvc/public/js/airtime/library/library.js

@@ -712,9 +712,18 @@ var AIRTIME = (function(AIRTIME) {
                     "error": handleAjaxError
                 }).done(function(data) {
                     if (data.iTotalRecords > data.iTotalDisplayRecords) {
+                        $('#filter_message').text(
+                            $.i18n._("Filtering out ") + (data.iTotalRecords - data.iTotalDisplayRecords)
+                            + $.i18n._(" of ") + data.iTotalRecords
+                            + $.i18n._(" records")
+                        );
                         $('#library_empty').hide();
                         $('#library_display').find('tr:has(td.dataTables_empty)').show();
+                    } else {
+                        $('#filter_message').text("");
                     }
+                    $('#library_content').find('.dataTables_filter input[type="text"]')
+                        .css('padding-right', $('#advanced-options').find('button').outerWidth());
                 });
             },
             "fnRowCallback": AIRTIME.library.fnRowCallback,