Skip to content

Option: navbar sticks on top of the window #1121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fbacall merged 3 commits into from
Jul 14, 2025
Merged

Option: navbar sticks on top of the window #1121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a98e8a
feat(navbar): optional, can have navbar stuck on top of the window
kennethrioja Jul 2, 2025
c9265d5
refactor(sticky-navbar-feature): attributes instead of switching to erb
kennethrioja Jul 7, 2025
334ca8c
Merge branch 'master' into ui-navbar-reduction
kennethrioja Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions app/assets/javascripts/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
});
});
53 changes: 53 additions & 0 deletions app/assets/stylesheets/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
20 changes: 10 additions & 10 deletions app/views/layouts/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<%# header notice -%>
<% if TeSS::Config.header_notice&.strip.present? %>
<nav class="header-notice">
<div class="container">
<div class="text-center">
<%== TeSS::Config.header_notice %>
<header class="unified-header">
<%# header notice -%>
<% if TeSS::Config.header_notice&.strip.present? %>
<nav class="header-notice">
<div class="container">
<div class="text-center">
<%== TeSS::Config.header_notice %>
</div>
</div>
</div>
</nav>
<% end %>
</nav>
<% end %>

<header class="unified-header">
<nav class="navbar navbar-default">
<div class="container-fluid" id="header-container">
<div class="navbar-header">
Expand Down
3 changes: 2 additions & 1 deletion app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<!DOCTYPE html>
<html lang="en">

<%= render 'layouts/head' %>

<body>
<body class=<%= 'sticky-navbar-enabled' if TeSS::Config.feature['sticky_navbar'] %> <%= 'header-notice-present' if TeSS::Config.header_notice&.strip.present? %>>
<%= render partial: 'layouts/header' %>

<div id="main-container" class="<%= @container_class || 'container-fluid' %>">
Expand Down
1 change: 1 addition & 0 deletions config/tess.example.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ default: &default
user_source_creation: true
edit_suggestions: false
geocoding: false
sticky_navbar: false # when true, allows navbar (and header_notice if enabled) to stick to the top of the window and shrink when scrolling
# Possible features to disable:
# biotools, topics, operations, sponsors, fairshare, county, ardc_fields_of_research,
# other_types, subsets, syllabus, approved_editors, address_finder
Expand Down
28 changes: 28 additions & 0 deletions test/controllers/static_controller_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,34 @@ class StaticControllerTest < ActionController::TestCase
end
end

test 'should not find header-notice when header_notice is disabled' do
with_settings({ header_notice: '' }) do
get :home
assert_select 'nav.header-notice', count: 0
end
end

test 'should find header-notice when header_notice is enabled' do
with_settings({ header_notice: 'Test' }) do
get :home
assert_select 'nav.header-notice', count: 1
end
end

test 'should not find sticky-navbar-enabled when sticky_navbar is disable' do
with_settings({ feature: { sticky_navbar: false } }) do
get :home
assert_select 'body.sticky-navbar-enabled', count: 0
end
end

test 'should find sticky-navbar-enabled when sticky_navbar is enabled' do
with_settings({ feature: { sticky_navbar: true } }) do
get :home
assert_select 'body.sticky-navbar-enabled', count: 1
end
end

test 'sets current space based on subdomain' do
get :home
assert_equal 'TTI', Space.current_space.title
Expand Down
Loading