Bootstrap 4

Not happy with the responsive handling of the app in the browser I decided to go the Bootstrap route. So I have been busy the last weeks going from a custom html/css interface to a bootstrap interface. And I am very happy with the result. Custom theme via SASS works very wel, and for those little things I really want to customise I just left it in a separate css file.

Did some customisations for the bootstrap modals because I wanted to have multiple layers of modals :

$(document).on(‘show.bs.modal’, ‘.modal’, function () {
var zIndex = 1040 + (10 * $(‘.modal:visible’).length);
$(this).css(‘z-index’, zIndex);
setTimeout(function() { $(‘.modal-backdrop’).not(‘.modal-stack’).css(‘z-index’, zIndex – 1).addClass(‘modal-stack’);
}, 0);
});

This handles the z-index of the modals and nicely adds them on top of each other. So all in all, lot of work but a much better user experience.  (Source : https://stackoverflow.com/questions/19305821/multiple-modals-overlay )