Auto resize the subscribers lists
This commit is contained in:
parent
d9edce1ea7
commit
3bf90bac3a
2 changed files with 51 additions and 12 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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}}
|
Loading…
Add table
Add a link
Reference in a new issue