public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Auto resize the subscribers lists

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
public/css/mailtrain.css
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 */ /* Supporting wider description lists */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@ -99,26 +113,26 @@ span.subscriber-status-4 {
/* subscriber line status */ /* subscriber line status */
tr.subscriber-status-1 td:first-child { tr.subscriber-status-1 td:first-child {
border-right: solid 3px #87ad77; border-right: solid 3px #87ad77;
text-align:center; text-align: center;
padding-right: 10px; padding-right: 10px;
} }
tr.subscriber-status-0 td:first-child, tr.subscriber-status-0 td:first-child,
tr.subscriber-status-2 td:first-child { tr.subscriber-status-2 td:first-child {
border-right: solid 3px #c7bfb4; border-right: solid 3px #c7bfb4;
text-align:center; text-align: center;
padding-right: 10px; padding-right: 10px;
} }
tr.subscriber-status-3 td:first-child { tr.subscriber-status-3 td:first-child {
border-right: solid 3px #df6b3d; border-right: solid 3px #df6b3d;
text-align:center; text-align: center;
padding-right: 10px; padding-right: 10px;
} }
tr.subscriber-status-4 td:first-child { tr.subscriber-status-4 td:first-child {
border-right: solid 3px #c94475; border-right: solid 3px #c94475;
text-align:center; text-align: center;
padding-right: 10px; padding-right: 10px;
} }

41
views/lists/view.hbs
View file

@ -207,14 +207,39 @@
</div> </div>
{{#if statusColored }} {{#if statusColored }}
<script> <script>
function updateSubscribersRows () { (function(){
for (i = 0; i < 5; i++) { function updateSubscribersRows () {
$('.dataTable tr:has(span.subscriber-status-' + i + ')').addClass('subscriber-status-' + i); $('.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');
} }
} function updateTableWidth () {
document.addEventListener("DOMContentLoaded", function (event) { var container = $('.container');
updateSubscribersRows(); var containerWidth = container.width();
$('body').on('DOMSubtreeModified', '.dataTables_info', updateSubscribersRows); 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> </script>
{{/if}} {{/if}}