Skip to content

Commit b027c4c

Browse files
kennethriojakennethrioja
committed
feat(navbar): optional, can have navbar stuck on top of the window
1 parent a27bd01 commit b027c4c

5 files changed

Lines changed: 101 additions & 10 deletions

File tree

app/assets/javascripts/application.js renamed to app/assets/javascripts/application.js.erb

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,3 +373,34 @@ $(document).on('click', '[href="#activity_log"]', function () {
373373

374374
return false;
375375
});
376+
377+
<% if TeSS::Config.feature['sticky_navbar'] %>
378+
/**
379+
* Created by Kenneth Rioja on 02.07.2025
380+
*
381+
* Sticky Navbar
382+
*/
383+
384+
/*
385+
* Allows navbar to shrink when scrolling
386+
*/
387+
388+
document.addEventListener('turbolinks:load', function () {
389+
const header = document.querySelector('.unified-header');
390+
const navbar = document.querySelector('.navbar');
391+
const logoImg = document.querySelector('.navbar-brand img');
392+
393+
window.addEventListener('scroll', function () {
394+
if (window.scrollY > 0) {
395+
header?.classList.add('scrolled');
396+
navbar?.classList.add('scrolled');
397+
logoImg?.classList.add('scrolled');
398+
399+
} else {
400+
header?.classList.remove('scrolled');
401+
navbar?.classList.remove('scrolled');
402+
logoImg?.classList.remove('scrolled');
403+
}
404+
});
405+
});
406+
<% end %>

app/assets/stylesheets/application.scss renamed to app/assets/stylesheets/application.scss.erb

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1016,3 +1016,57 @@ td.day .calendar-text {
10161016
opacity: 0.7;
10171017
background: $state-success-bg;
10181018
}
1019+
1020+
<% if TeSS::Config.feature['sticky_navbar'] %>
1021+
.navbar {
1022+
border-radius: 0;
1023+
font-size: larger;
1024+
padding-top: 20px;
1025+
padding-bottom: 20px;
1026+
margin-bottom: 0px;
1027+
transition: font-size 0.3s ease, padding-bottom 0.3s ease, padding-top 0.3s ease;
1028+
1029+
&.scrolled {
1030+
font-size: medium;
1031+
padding-bottom: 0;
1032+
padding-top: 0;
1033+
}
1034+
}
1035+
1036+
.unified-header {
1037+
z-index: 100000;
1038+
position: sticky;
1039+
top: 0;
1040+
background-color: $navbar-default-bg;
1041+
1042+
.navbar-brand {
1043+
1044+
img {
1045+
padding: 0px 0px 0px 0px;
1046+
transition: padding 0.3s ease;
1047+
1048+
&.scrolled {
1049+
padding: 10px 5px 5px 5px;
1050+
}
1051+
}
1052+
}
1053+
}
1054+
1055+
.header-notice + .navbar {
1056+
padding-bottom: 20px;
1057+
padding-top: 20px;
1058+
&.scrolled {
1059+
padding-top: 0px;
1060+
padding-bottom: 0px;
1061+
}
1062+
}
1063+
¨
1064+
<% if TeSS::Config.header_notice&.strip.present? %>
1065+
.header-notice {
1066+
z-index: 100001;
1067+
position: sticky;
1068+
top: 0;
1069+
}
1070+
<% end %>
1071+
1072+
<% end %>

‎app/views/layouts/_header.html.erb‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
<%# header notice -%>
2-
<% if TeSS::Config.header_notice&.strip.present? %>
3-
<nav class="header-notice">
4-
<div class="container">
5-
<div class="text-center">
6-
<%== TeSS::Config.header_notice %>
1+
<header class="unified-header">
2+
<%# header notice -%>
3+
<% if TeSS::Config.header_notice&.strip.present? %>
4+
<nav class="header-notice">
5+
<div class="container">
6+
<div class="text-center">
7+
<%== TeSS::Config.header_notice %>
8+
</div>
79
</div>
8-
</div>
9-
</nav>
10-
<% end %>
10+
</nav>
11+
<% end %>
1112

12-
<header class="unified-header">
1313
<nav class="navbar navbar-default">
1414
<div class="container-fluid" id="header-container">
1515
<div class="navbar-header">

‎app/views/layouts/application.html.erb‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
4+
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
5+
36
<%= render 'layouts/head' %>
47

58
<body>
@@ -16,3 +19,5 @@
1619

1720
</body>
1821
</html>
22+
23+
<%= javascript_include_tag "application", "data-turbo-track": "reload" %>

‎config/tess.example.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ default: &default
150150
user_source_creation: true
151151
edit_suggestions: false
152152
geocoding: false
153+
sticky_navbar: false # when true, allows navbar (and header_notice if enabled) to stick to the top of the window and shrink when scrolling
153154
# Possible features to disable:
154155
# biotools, topics, operations, sponsors, fairshare, county, ardc_fields_of_research,
155156
# other_types, subsets, syllabus, approved_editors, address_finder

0 commit comments

Comments
 (0)