From 8b080b2ad888af69ce0a0c414c5888dcd97e467d Mon Sep 17 00:00:00 2001 From: Nataliia Bobrova Date: Wed, 5 Mar 2025 14:09:52 +0000 Subject: [PATCH] misc scrollspy fixes and styling fixes --- assets/js/custom.js | 31 ++++++++++++--------------- assets/scss/_bootscore-custom.scss | 30 +++++++++++++++++++++++++- assets/scss/_bootscore-variables.scss | 6 ++++++ functions.php | 3 ++- 4 files changed, 51 insertions(+), 19 deletions(-) diff --git a/assets/js/custom.js b/assets/js/custom.js index 5f08d19..13cb94f 100644 --- a/assets/js/custom.js +++ b/assets/js/custom.js @@ -2,31 +2,31 @@ jQuery(function ($) { // Getting links from a page and turning them into a scroll-spy bespoke menu - // FIXME when page loads with #... in url, the scroll spy gets messed up. - let links; - - links = document.querySelectorAll("#one, #two, #three, #four, #fivenav_menu-7") + let sections; + sections = document.querySelectorAll(".add-to-sidebar") let url = window.location.href; + // Create the correct menu let innerContent = ""; - - links.forEach(link => { - let fullUrl = url + "#" + link.id; - innerContent += "
  • " + link.attributes.name.value + "
  • " + sections.forEach(link => { + let itemTitle = link.querySelector("h2:first-of-type"); + if (itemTitle) { + link.setAttribute("id", itemTitle.id) + let fullUrl = url.split("#")[0] + "#" + itemTitle.id; + innerContent += "
  • " + itemTitle.innerText + "
  • " + } }); - console.log(innerContent) - + // Update existing menu with the created one let menu; menu = document.getElementById("menu-scroll-spy"); - menu.innerHTML = innerContent // Activate Scrollspy - $('.entry-content').scrollspy({ + $('body').scrollspy({ target: '#nav_menu-4' }); @@ -38,17 +38,14 @@ jQuery(function ($) { $('[data-spy="scroll"]').each(function () { $(this).scrollspy("refresh"); }); - - - }); + }); document.addEventListener("DOMContentLoaded", function(event) { var elements = document.querySelectorAll('.view-team-member-button'); - - elements.forEach(function(element) { + elements.forEach(function(element) { element.addEventListener('click', function() { for (elem of document.getElementsByClassName("view-team-member-bio")) { diff --git a/assets/scss/_bootscore-custom.scss b/assets/scss/_bootscore-custom.scss index 0b0e01b..f361bfb 100644 --- a/assets/scss/_bootscore-custom.scss +++ b/assets/scss/_bootscore-custom.scss @@ -21,11 +21,31 @@ } } + /* Is required to show the svg logo */ .navbar-brand { width: 150px; } +.offcanvas-body #bootscore-navbar { + li { + border-top: 1px dotted #fff; + padding: 0.5rem 0; + &:last-of-type { + border-bottom: 1px dotted #fff; + } + } +} + + +@include media-breakpoint-up(lg) { + .offcanvas-body #bootscore-navbar { + li, + li:last-of-type { + border-color: transparent; + } + } +} /* CUSTOM BLOCK MOBILE SUPPORT */ @include media-breakpoint-up(md) { @@ -181,6 +201,7 @@ #sidebar { // padding-left: 8rem; // padding-right: 2rem; + top: 30px; font-size: 24px; position: sticky; a:not(.active) { @@ -188,7 +209,6 @@ } li { border-top: 1px dotted #000; - // border-bottom: padding: 0.5rem 0; &:last-of-type { border-bottom: 1px dotted #000; @@ -392,3 +412,11 @@ body:not(.wp-admin) .wp-block-group.team { } } +.add-to-sidebar { + position: relative; + height: 100%; +} + +body:not(.wp-admin) { + --wp--style--global--content-size: 100%; +} \ No newline at end of file diff --git a/assets/scss/_bootscore-variables.scss b/assets/scss/_bootscore-variables.scss index bbd8a5e..299ef2d 100644 --- a/assets/scss/_bootscore-variables.scss +++ b/assets/scss/_bootscore-variables.scss @@ -65,3 +65,9 @@ $container-max-widths: ( xl: 1140px, xxl: 1400px ); + + + +$offcanvas-bg-color: $primary; +$offcanvas-color: #fff; + diff --git a/functions.php b/functions.php index f0b5e93..bf43caf 100644 --- a/functions.php +++ b/functions.php @@ -229,4 +229,5 @@ add_action( 'init', 'register_list_block_popout' ); function my_fancy_filter_function() { return "featured-full-width-img bg-dark text-light mb-5"; } -add_filter('bootscore/class/featured-full-width-img', 'my_fancy_filter_function', 10, 2); \ No newline at end of file +add_filter('bootscore/class/featured-full-width-img', 'my_fancy_filter_function', 10, 2); +