diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index ed64c0f0b..05cdaf77c 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -373,3 +373,26 @@ $(document).on('click', '[href="#activity_log"]', function () { return false; }); + +// sticky-navbar feature +document.addEventListener('turbolinks:load', function () { + + if (!document.querySelector('.sticky-navbar-enabled')) return; + + const header = document.querySelector('.unified-header'); + const navbar = document.querySelector('.navbar'); + const logoImg = document.querySelector('.navbar-brand img'); + + window.addEventListener('scroll', function () { + if (window.scrollY > 0) { + header?.classList.add('scrolled'); + navbar?.classList.add('scrolled'); + logoImg?.classList.add('scrolled'); + + } else { + header?.classList.remove('scrolled'); + navbar?.classList.remove('scrolled'); + logoImg?.classList.remove('scrolled'); + } + }); +}); \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 581a0caa6..9b3cf82d1 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1015,3 +1015,56 @@ td.day .calendar-text { opacity: 0.7; background: $state-success-bg; } + +.sticky-navbar-enabled { + .navbar { + border-radius: 0; + font-size: larger; + padding-top: 20px; + padding-bottom: 20px; + margin-bottom: 0px; + transition: font-size 0.3s ease, padding-bottom 0.3s ease, padding-top 0.3s ease; + + &.scrolled { + font-size: medium; + padding-bottom: 0; + padding-top: 0; + } + } + + .unified-header { + z-index: 100000; + position: sticky; + top: 0; + background-color: $navbar-default-bg; + + .navbar-brand { + + img { + padding: 0px 0px 0px 0px; + transition: padding 0.3s ease; + + &.scrolled { + padding: 10px 5px 5px 5px; + } + } + } + } + + .header-notice + .navbar { + padding-bottom: 20px; + padding-top: 20px; + &.scrolled { + padding-top: 0px; + padding-bottom: 0px; + } + } + + .header-notice-present { + .header-notice { + z-index: 100001; + position: sticky; + top: 0; + } + } +} \ No newline at end of file diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index ac3898c94..c4acc9572 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,15 +1,15 @@ -<%# header notice -%> -<% if TeSS::Config.header_notice&.strip.present? %> - -<% end %> + + <% end %> -