diff --git a/templates/main.html b/templates/main.html index 153b1bff2c19eac774b7ba700bc2d202c44d08d9..66297ddaef85744f91a03518498b5a0775ba1319 100644 --- a/templates/main.html +++ b/templates/main.html @@ -86,12 +86,12 @@ {% block footer %} {% if not current_user.is_anonymous %} {% set version_label = 'Version' %} - <!-- Use a wrapper div to detach the footer from the content. --> - <div style="padding-bottom: 3rem !important; visibility: hidden !important; flex-grow: 1 !important; -ms-flex-direction: column !important; display: flex !important; + <!-- Use a wrapper div to detach the footer from the content -> just nice to have --> + <div style="padding-bottom: 1rem !important; visibility: hidden !important; flex-grow: 1 !important; -ms-flex-direction: column !important; display: flex !important; flex-direction: column !important;"> . </div> - <footer class="footer" style="background-image: url(https://eflows4hpc.eu/wp-content/uploads/2021/02/Barra-gris-footer.png) !important; height: auto; color: #575756 !important; background-repeat: no-repeat !important; background-size: cover !important; margin-top: 2rem;"> + <footer class="footer" style="background-image: url(https://eflows4hpc.eu/wp-content/uploads/2021/02/Barra-gris-footer.png) !important; height: auto; color: #575756 !important; background-repeat: no-repeat !important; background-size: cover !important; margin-top: auto !important;"> <div class="container p-0" style="padding: 0px !important"> <div class="p-0 w-100" style="background-image: url(https://eflows4hpc.eu/wp-content/uploads/2021/01/barra-3-color-8.png) !important; width: 100%; height: 15px; background-repeat: no-repeat !important; background-size: cover !important; padding: 0px; !important"></div> <div class="row mt-2 px-3" style="margin-top: 0.5rem; padding-right: 1rem;"> @@ -143,6 +143,24 @@ var csrfToken = '{{ csrf_token() }}'; $('time[title]').tooltip(); </script> + <!-- Calculate the size of the dynamic footer to make sure that it doesn't cover the content of the page. Helps also on mobile devices. --> + <script> + function footerAlign() { + $('footer').css('display', 'block'); + $('footer').css('height', 'auto'); + var footerHeight = $('footer').outerHeight(); + $('body').css('padding-bottom', footerHeight); + $('footer').css('height', footerHeight); + } + + $(document).ready(function(){ + footerAlign(); + }); + + $( window ).resize(function() { + footerAlign(); + }); + </script> <!--[if IE ]> <script src="{{ url_for_asset('ie.js') }}"></script> <![endif]-->