features: Fix scrollspy

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 9a776c01269cafb73484241f3a46b923101ef523..aac1fd61ed43069e2e27feddf5cf08bc6666a191 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -82,6 +82,9 @@ $h6-font-size:                                1.25rem;
 
 $display1-size:                                7.5rem;
 
+// Links
+$link-color:                           $primary;
+
 // Navbar
 $navbar-brand-font-size:       36px;
 $navbar-brand-height:          32px;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index bd2712f20e11ee7515f167dfcb30f3880cbfac34..a48e2d40e2b140fbbff14cfba70fe970584d2706 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -41,6 +41,9 @@
 @import '_icons';
 
 body {
+       // For scrollspy
+       position: relative;
+
        min-height: 75rem;
        padding-top: 6rem;
 }
@@ -80,6 +83,17 @@ h6 {
        box-shadow: $shadow-1;
 }
 
+.nav {
+       .nav-link {
+               color: $blue-grey-900;
+
+               &.active {
+                       color: $link-color;
+                       border-left: 2px solid $link-color;
+               }
+       }
+}
+
 footer {
        .btn-toolbar .icon {
                height: 2.25rem;
@@ -185,6 +199,12 @@ footer {
        }
 }
 
+// Sidebar navigation
+
+#sidebar .nav {
+       position: fixed;
+}
+
 .page-scroll {
        display: block;
        visibility: visible;

diff --git a/src/templates/base.html b/src/templates/base.html
index c4ad31e9b9d62b85dd53a774d3213eca2e192dc6..6dd9532a21d692031e092e45fb8f7843592aa300 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -229,6 +229,7 @@
                <script src="{{ static_url("js/popper.min.js") }}"></script>
                <script src="{{ static_url("js/bootstrap.min.js") }}"></script>
                <script src="{{ static_url("js/site.js") }}"></script>
+               {% block javascript %}{% end block %}
 
                <!-- <script src="{{ static_url("js/jquery.easing.js") }}"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

diff --git a/src/templates/static/features.html b/src/templates/static/features.html
index 92283cd23e66effcb363e829fa11526374d0dbb4..023bb46a47dad59853857c7b25d9dc2743a2ef3c 100644 (file)
--- a/src/templates/static/features.html
+++ b/src/templates/static/features.html
@@ -6,8 +6,6 @@
        <div class="container">
                <div class="row">
                        <nav id="sidebar" class="col-12 col-md-3" role="dropdown">
-                               <input type="checkbox" id="menu">
-                               <label for="menu" onclick></label>
                                <ul class="nav flex-column features_nav">
                                        <li class="nav-item"><a class="nav-link active" href="#about">About IPFire</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#security">Security</a></li>
@@ -37,7 +35,7 @@
                                </ul>
                        </nav>
 
-                       <section class="content col-12 col-md-9 features">
+                       <section class="content col-12 col-md-9">
                                <div class="card">
                                        <div class="card-body">
                                                <section id="about">
@@ -825,22 +823,6 @@
                </div>
        </div>
 
-       <script>
-               $(document).ready(function () {
-                       $('body').scrollspy({ target: '#sidebar', offset: 148 })
-
-                       $('a[href^="#"]').on('click', function(event) {
-                               var target = $(this.getAttribute('href'));
-                               if( target.length ) {
-                                       event.preventDefault();
-                                       $('html, body').stop().animate({
-                                               scrollTop: target.offset().top -147
-                                       }, 750);
-                               }
-                       });
-               });
-       </script>
-
        <!-- Gallery Lightbox -->
        <!-- Root element of PhotoSwipe. Must have class pswp. -->
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
@@ -915,3 +897,22 @@
                </symbol>
        </svg>
 {% end block %}
+
+{% block javascript %}
+       <script>
+               $(document).ready(function () {
+                       $("body").scrollspy({ target: "#sidebar", offset: 148 })
+
+                       $("a[href^='#']").on("click", function(event) {
+                               var target = $(this.getAttribute("href"));
+                               if (target.length) {
+                                       event.preventDefault();
+
+                                       $("html, body").stop().animate({
+                                               scrollTop: target.offset().top - 147
+                                       }, 750);
+                               }
+                       });
+               });
+       </script>
+{% end block %}