-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #44 from SciCatProject/ui-updates-pt2
New ui updates
- Loading branch information
Showing
7 changed files
with
112 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,87 @@ | ||
| <script> | ||
| onClick = (event) => { | ||
| // Map element Ids to the respective navbar item | ||
| const sections = { | ||
| intro: "nav-link-intro", | ||
| facilities: "nav-link-facilities", | ||
| team: "nav-link-team", | ||
| effort: "nav-link-effort", | ||
| resources: "nav-link-resources" | ||
| }; | ||
|
|
||
| // Remove class "active" from all navbar items | ||
| function deactivateNavLinks() { | ||
| let navLinks = document.querySelectorAll(".nav-link"); | ||
| for (let i = 0; i < navLinks.length; i++) { | ||
| navLinks[i].classList.remove("active"); | ||
| } | ||
| } | ||
|
|
||
| // Given a specific element Id, check if the element is currenty visible on the screen | ||
| function isElementVisible(elemId) { | ||
| let elm = document.getElementById(elemId).getBoundingClientRect(); | ||
| let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); | ||
| return !(elm.bottom < 0 || elm.top - viewHeight >= 0); | ||
| } | ||
|
|
||
| /* | ||
| 1. Indicate the active section, by changing the navbar item background color. | ||
| Changes are applied either when clicking on a navbar item or when reaching a section by scrolling. | ||
| When scrolling all the way to the top of the page, highlight the navbar item "Home". | ||
| 2. Show or hide the project logo from the left corner of the navbar, depending on the scroll position. | ||
| Hide it when the intro section logo appears on screen. | ||
| */ | ||
| onClick = (event) => { | ||
| deactivateNavLinks(); | ||
| event.target.classList.add("active"); | ||
| } | ||
|
|
||
| function activateNavLink(id) { | ||
| deactivateNavLinks(); | ||
| document.getElementById(id).classList.add("active"); | ||
| } | ||
|
|
||
| window.onscroll = function() { | ||
| Object.keys(sections).forEach((elemId) => { | ||
| if (window.scrollY == 0) { | ||
| activateNavLink("nav-link-home"); | ||
| } | ||
| else if (isElementVisible(elemId)) { | ||
| activateNavLink(sections[elemId]); | ||
| } | ||
| }); | ||
|
|
||
| // show/hide logo | ||
| document.getElementById("nav-logo").style.display = isElementVisible("header-logo") ? "none" : "block"; | ||
| }; | ||
| </script> | ||
|
|
||
| <nav class="navbar fixed-top affix-top navbar-expand-lg navbar-light bg-light navbar-fixed-top"> | ||
| <div class="container-fluid"> | ||
| <div class="navbar-header"> | ||
| <a class="navbar-brand" href="#"><img src="assets/images/SciCat_logo_full_100x48.png"></a> | ||
| <a id="nav-logo" class="navbar-brand" href="#"><img src="assets/images/SciCat_logo_full_100x48.png"></a> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| </div> | ||
| <div class="navbar-menu collapse navbar-collapse justify-content-center" id="navbarSupportedContent"> | ||
| <ul class="nav navbar-nav nav-pills mb-2 mb-lg-0"> | ||
| <li class="nav-item mx-lg-3"> | ||
| <a class="page-scroll nav-link active" aria-current="page" href="#" onclick="onClick(event);">Home</a> | ||
| <a class="page-scroll nav-link active" id="nav-link-home" aria-current="page" href="#" onclick="onClick(event);">Home</a> | ||
| </li> | ||
| <li class="nav-item mx-lg-3"> | ||
| <a class="page-scroll nav-link" href="#intro" onclick="onClick(event);">Intro</a> | ||
| <a class="page-scroll nav-link" id="nav-link-intro" href="#intro" onclick="onClick(event);">Intro</a> | ||
| </li> | ||
| <li class="nav-item mx-lg-3"> | ||
| <a class="page-scroll nav-link" href="#facilities" onclick="onClick(event);">Facilities</a> | ||
| <a class="page-scroll nav-link" id="nav-link-facilities" href="#facilities" onclick="onClick(event);">Facilities</a> | ||
| </li> | ||
| <li class="nav-item mx-lg-3"> | ||
| <a class="page-scroll nav-link" href="#team" onclick="onClick(event);">Team</a> | ||
| <a class="page-scroll nav-link" id="nav-link-team" href="#team" onclick="onClick(event);">Team</a> | ||
| </li> | ||
| <li class="nav-item mx-lg-3"> | ||
| <a class="page-scroll nav-link" href="#effort" onclick="onClick(event);">Effort</a> | ||
| <a class="page-scroll nav-link" id="nav-link-effort" href="#effort" onclick="onClick(event);">Effort</a> | ||
| </li> | ||
| <li class="nav-item mx-lg-3"> | ||
| <a class="page-scroll nav-link" href="#resources" onclick="onClick(event);">Resources</a> | ||
| <a class="page-scroll nav-link" id="nav-link-resources" href="#resources" onclick="onClick(event);">Resources</a> | ||
| </li> | ||
| </div> | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters