From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sun, 15 Jul 2018 12:01:58 +0000 (+0100)
Subject: features: Fix scrollspy
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=9f043320c252637e0b040ebd7cabaa6107bd86f2;p=ipfire.org.git

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 9a776c01..aac1fd61 100644
--- 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 bd2712f2..a48e2d40 100644
--- 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 c4ad31e9..6dd9532a 100644
--- 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 92283cd2..023bb46a 100644
--- 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 %}