diff --git a/web/assets/css/bs5.wallview.css b/web/assets/css/bs5.wallview.css index 2e0bcaad..335114a3 100644 --- a/web/assets/css/bs5.wallview.css +++ b/web/assets/css/bs5.wallview.css @@ -90,13 +90,20 @@ } #wallview-monitorList { + z-index: 11; + width: 100%; + overflow: auto; +} + +#wallview-monitorList-container { position: absolute; + display: flex; + flex-flow: column; z-index: 11; width: 300px; - height: 80vh; + height: 70vh; background: rgba(0,0,0,0.6); right: 0; bottom: 10vh; - overflow: auto; border-radius: 10px 0 0 10px;; } diff --git a/web/assets/js/bs5.wallview.js b/web/assets/js/bs5.wallview.js index b2dad5a0..c175d98f 100644 --- a/web/assets/js/bs5.wallview.js +++ b/web/assets/js/bs5.wallview.js @@ -2,6 +2,7 @@ var loadedMonitors = {} var selectedMonitors = {} PNotify.prototype.options.styling = "fontawesome"; var wallViewMonitorList = $('#wallview-monitorList') +var wallViewMonitorListContainer = $('#wallview-monitorList-container') var wallViewControls = $('#wallview-controls') var wallViewCanvas = $('#wallview-canvas') var wallViewInfoScreen = $('#wallview-info-screen') @@ -106,7 +107,7 @@ function drawMonitorList(){ label, }) }) - var html = allFound.map(item => `
`).join('') + var html = allFound.map(item => ``).join('') wallViewMonitorList.html(html) resolve(monitors) }) @@ -398,7 +399,7 @@ $(document).ready(function(){ }) .on('click', '.wallview-toggle-monitor-list', function(e){ e.preventDefault(); - wallViewMonitorList.toggleClass('d-none') + wallViewMonitorListContainer.toggleClass('d-none') return false; }) .on('click', '.wallview-open-monitor-group', function(e){ @@ -420,6 +421,16 @@ $(document).ready(function(){ displayInfoScreen() saveLayout() return false; + }) + .on('keyup','.search-parent .search-controller',function(){ + var _this = this; + var parent = $(this).parents('.search-parent') + $.each(parent.find(".search-body .search-row"), function() { + if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) + $(this).hide(); + else + $(this).show(); + }); }); createWebsocket(location.origin,{ path: websocketPath diff --git a/web/pages/wallview.ejs b/web/pages/wallview.ejs index 9df26c15..f91bc5c4 100644 --- a/web/pages/wallview.ejs +++ b/web/pages/wallview.ejs @@ -79,7 +79,17 @@ <%- lang.Monitors %> - +