Auto resize the subscribers lists

This commit is contained in:
Dominique Da Silva 2019-11-12 05:07:35 +00:00
parent d9edce1ea7
commit 3bf90bac3a
2 changed files with 51 additions and 12 deletions

View file

@ -25,6 +25,20 @@
}
}
.highlight {
animation: highlight 0.5s;
}
@keyframes highlight {
0% {
background-color: rgba(230, 90, 10, 1.0);
}
100% {
background-color: rgba(255, 255, 255, 0);
}
}
#
/* Supporting wider description lists */
@media screen and (min-width: 768px) {
@ -99,26 +113,26 @@ span.subscriber-status-4 {
/* subscriber line status */
tr.subscriber-status-1 td:first-child {
border-right: solid 3px #87ad77;
text-align:center;
text-align: center;
padding-right: 10px;
}
tr.subscriber-status-0 td:first-child,
tr.subscriber-status-2 td:first-child {
border-right: solid 3px #c7bfb4;
text-align:center;
text-align: center;
padding-right: 10px;
}
tr.subscriber-status-3 td:first-child {
border-right: solid 3px #df6b3d;
text-align:center;
text-align: center;
padding-right: 10px;
}
tr.subscriber-status-4 td:first-child {
border-right: solid 3px #c94475;
text-align:center;
text-align: center;
padding-right: 10px;
}

View file

@ -207,14 +207,39 @@
</div>
{{#if statusColored }}
<script>
function updateSubscribersRows () {
for (i = 0; i < 5; i++) {
$('.dataTable tr:has(span.subscriber-status-' + i + ')').addClass('subscriber-status-' + i);
(function(){
function updateSubscribersRows () {
$('.dataTable thead tr').removeClass('highlight');
if ($(document).scrollTop() > 400) {
$('html, body').stop().animate({ scrollTop: 0 }, 300, function () {
$('.dataTable thead tr').addClass('highlight');
});
}
for (i = 0; i < 5; i++) {
$('.dataTable tr:has(span.subscriber-status-' + i + ')').addClass('subscriber-status-' + i);
}
$(window).trigger('resize');
}
}
document.addEventListener("DOMContentLoaded", function (event) {
updateSubscribersRows();
$('body').on('DOMSubtreeModified', '.dataTables_info', updateSubscribersRows);
});
function updateTableWidth () {
var container = $('.container');
var containerWidth = container.width();
var tableWidth = $('.dataTable').width();
console.log(containerWidth);
console.log(tableWidth);
if (tableWidth > containerWidth) {
container.css({ width: 'auto', 'max-width': tableWidth + 100 + 'px' });
$(window).off('resize', updateTableWidth);
}
}
document.addEventListener("DOMContentLoaded", function (event) {
updateSubscribersRows();
$('body').on('DOMSubtreeModified', '.dataTables_info', updateSubscribersRows);
$(window).resize(updateTableWidth);
});
})();
</script>
{{/if}}