From aa44ed562fd241cce4e2a8683f860f490d6ca7a3 Mon Sep 17 00:00:00 2001
From: Sven <sven.hoehn@posteo.de>
Date: Wed, 27 Sep 2017 18:06:35 +0200
Subject: [PATCH] features page added spyscoll to navigation

---
 static/css/style.css           | 40 +++++++++++++++++------
 static/js/site-min.js          |  2 +-
 static/js/site.js              |  8 +----
 static/scss/style.scss         |  1 +
 templates/base.html            |  9 +++---
 templates/index.html           | 14 ++++++--
 templates/static/features.html | 59 ++++++++++++++++++++++------------
 7 files changed, 88 insertions(+), 45 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index ab4a7d7..4ac2968 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4687,14 +4687,35 @@ h5.fireinfo {
   .navbar-nav .nav-link:hover:after {
     transform: scaleX(1); } }
 
-#sidebar ul {
-  list-style: none; }
-  #sidebar ul ul {
-    margin: 24px 0 0 0;
-    padding-left: 0; }
-  #sidebar ul li {
-    padding: 0 16px;
-    margin-bottom: 24px; }
+#sidebar {
+  padding: 0; }
+  #sidebar ul {
+    list-style: none; }
+    #sidebar ul.features_nav {
+      padding: 0 0 24px 0;
+      max-height: calc(100vh - 96px);
+      overflow-x: auto; }
+    #sidebar ul ul {
+      margin: 24px 0 0 0;
+      padding-left: 0; }
+      #sidebar ul ul li:last-child {
+        margin-bottom: 0; }
+    #sidebar ul li {
+      padding: 0 16px;
+      margin: 8px 0; }
+      #sidebar ul li a.nav-link {
+        padding: inherit;
+        color: #263238;
+        height: 32px;
+        padding: 0 8px;
+        line-height: 2; }
+        #sidebar ul li a.nav-link.active {
+          color: #b71c1c;
+          border-left: 2px solid #b71c1c;
+          padding: 0 8px 0 6px; }
+  #sidebar ul.features_nav.fixed {
+    position: fixed;
+    top: 120px; }
 
 .btn-red900 {
   color: #fff !important;
@@ -4990,7 +5011,8 @@ section#appliances {
     background: white;
     border-radius: 4px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    padding: 40px 24px; }
+    padding: 40px 24px;
+    position: relative; }
 
 .divider {
   width: 128px;
diff --git a/static/js/site-min.js b/static/js/site-min.js
index c30c758..76078ae 100644
--- a/static/js/site-min.js
+++ b/static/js/site-min.js
@@ -1 +1 @@
-function getCookie(o){var e=document.cookie.match("\\b"+o+"=([^;]*)\\b");return e?e[1]:void 0}$(document).ready(function(){$("#scrollto").click(function(o){o.preventDefault(),$("body").animate({scrollTop:$("#features").offset().top-72},1e3)}),$(window).scroll(function(){$(document).scrollTop()>100?($(".fixed-top").addClass("scrolled"),$(".menu-text").addClass("hidden")):($(".fixed-top").removeClass("scrolled"),$(".menu-text").removeClass("hidden"))}),$(".navbar-toggler-left").click(function(){$("#navbarSupportedContent, #mask").addClass("open"),$(".scrolled").addClass("fadeout")}),$("#mask").click(function(){$("#navbarSupportedContent, #mask").removeClass("open"),$(".scrolled").removeClass("fadeout")})}),$.query=function(o){return new RegExp("[\\?&]"+o+"=([^&#]*)").exec(window.location.href)[1]||0},$("a.download-splash").click(function(o){o.preventDefault(),linkLocation=this.href,window.location="http://downloads.ipfire.org/download-splash?file="+linkLocation}),/.*download-splash.*/i.test(window.location.href)&&$("p.download-path").ready(function(){var o=!1,e=["http://downloads.ipfire.org/"],n=$.query("file");for(i in e)prefix=e[i],n.substring(0,prefix.length)==prefix&&(o=!0);o&&($("p.download-path").prepend($("<a>",{href:encodeURI(n),text:n})),setTimeout(function(){window.location=n},"2000"))}),jQuery.postJSON=function(url,args,callback){args._xsrf=getCookie("_xsrf"),$.ajax({url:url,data:$.param(args),dataType:"text",type:"POST",success:function(response){callback(eval("("+response+")"))}})};
\ No newline at end of file
+function getCookie(o){var e=document.cookie.match("\\b"+o+"=([^;]*)\\b");return e?e[1]:void 0}$(document).ready(function(){$(window).scroll(function(){$(document).scrollTop()>100?($(".fixed-top").addClass("scrolled"),$(".menu-text").addClass("hidden")):($(".fixed-top").removeClass("scrolled"),$(".menu-text").removeClass("hidden"))}),$(".navbar-toggler-left").click(function(){$("#navbarSupportedContent, #mask").addClass("open"),$(".scrolled").addClass("fadeout")}),$("#mask").click(function(){$("#navbarSupportedContent, #mask").removeClass("open"),$(".scrolled").removeClass("fadeout")})}),$.query=function(o){return new RegExp("[\\?&]"+o+"=([^&#]*)").exec(window.location.href)[1]||0},$("a.download-splash").click(function(o){o.preventDefault(),linkLocation=this.href,window.location="http://downloads.ipfire.org/download-splash?file="+linkLocation}),/.*download-splash.*/i.test(window.location.href)&&$("p.download-path").ready(function(){var o=!1,e=["http://downloads.ipfire.org/"],n=$.query("file");for(i in e)prefix=e[i],n.substring(0,prefix.length)==prefix&&(o=!0);o&&($("p.download-path").prepend($("<a>",{href:encodeURI(n),text:n})),setTimeout(function(){window.location=n},"2000"))}),jQuery.postJSON=function(url,args,callback){args._xsrf=getCookie("_xsrf"),$.ajax({url:url,data:$.param(args),dataType:"text",type:"POST",success:function(response){callback(eval("("+response+")"))}})};
\ No newline at end of file
diff --git a/static/js/site.js b/static/js/site.js
index 93d0d12..b1dbd48 100644
--- a/static/js/site.js
+++ b/static/js/site.js
@@ -1,10 +1,4 @@
-$(document).ready(function () {
-	$("#scrollto").click(function(e) {
-		e.preventDefault();
-	    $('body').animate({
-	        scrollTop: $("#features").offset().top -72
-	    }, 1000);
-	});
+$(document).ready(function () {	
     $(window).scroll(function () {
         if ($(document).scrollTop() > 100) {
             $(".fixed-top").addClass("scrolled");
diff --git a/static/scss/style.scss b/static/scss/style.scss
index e31db2a..20bb379 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -268,6 +268,7 @@ section#appliances {
 		border-radius: 4px;
 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 		padding: 40px 24px;
+		position: relative;
 	}
 }
 
diff --git a/templates/base.html b/templates/base.html
index 97d7f91..d80b324 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -21,10 +21,13 @@
 		{% end %}
 		
 		<script src="{{ static_url("js/jquery.js") }}"></script>
+		<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>
+		<script src="{{ static_url("js/site.js") }}"></script>
 		<script src="{{ static_url("js/circle-progress.min.js") }}"></script>
 	</head>
 
-	<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+	<body id="page-top">
 		
 		<div class="fixed-top">
 			<div class="container d-flex justify-content-between">
@@ -192,10 +195,6 @@
 			</footer>
 			<div id="mask"></div>
 		{% 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>
-		<script src="{{ static_url("js/site.js") }}"></script>
 		
 		<!-- Hidden icon data -->
 		<svg aria-hidden="true" style="display:none">
diff --git a/templates/index.html b/templates/index.html
index 234db58..8377933 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,8 +16,8 @@
 			</div>
 		</div>
 		
-		<div id="scrollto" class="page-scroll">
-			<a href="#features" class="btn btn-outline-primary rounded-circle">
+		<div class="page-scroll">
+			<a href="#features" class="btn btn-outline-primary rounded-circle scroll">
 				<svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
 			</a>
 		</div>
@@ -330,4 +330,14 @@
 			</div>
 		</div>
 	</section>
+<script>
+$(document).ready(function () {
+	$('.scroll').on('click', function(event) {
+			event.preventDefault();
+			$('html, body').stop().animate({
+				scrollTop: $('#features').offset().top -72
+			}, 1000);
+	});
+});
+</script>
 {% end block %}
diff --git a/templates/static/features.html b/templates/static/features.html
index 0268caa..5469b6a 100644
--- a/templates/static/features.html
+++ b/templates/static/features.html
@@ -6,32 +6,32 @@
 	<div class="container features-content">
 		<div class="row">
 			<nav id="sidebar" class="col-3">
-				<ul>
-					<li><a href="#">About IPFire</a></li>
-					<li><a href="#">Security</a></li>
-					<li><a href="#">Firewall</a></li>
-					<li><a href="#">PakFire</a></li>
-					<li><a href="#">Updates</a></li>
-					<li><a href="#">Dialup</a></li>
-					<li><a href="#">Web Proxy</a>
+				<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>
+					<li class="nav-item"><a class="nav-link" href="#firewall">Firewall</a></li>
+					<li class="nav-item"><a class="nav-link" href="#pakfire">PakFire</a></li>
+					<li class="nav-item"><a class="nav-link" href="#updates">Updates</a></li>
+					<li class="nav-item"><a class="nav-link" href="#dialup">Dialup</a></li>
+					<li class="nav-item"><a class="nav-link" href="#proxy">Web Proxy</a>
 						<ul>
-							<li><a href="#">Content Filter</a></li>
-							<li><a href="#">Update Accelerator</a></li>
-							<li><a href"#">Transparent Virus Scanner</a></li>
+							<li class="nav-item"><a class="nav-link" href="#">Content Filter</a></li>
+							<li class="nav-item"><a class="nav-link" href="#">Update Accelerator</a></li>
+							<li class="nav-item"><a class="nav-link" href="#">Transparent Virus Scanner</a></li>
 						</ul>
 					</li>
-					<li><a href="#">Cryptography</a></li>
-					<li><a href="#">VPN</a>
+					<li class="nav-item"><a class="nav-link" href="#crypto">Cryptography</a></li>
+					<li class="nav-item"><a class="nav-link" href="#vpn">VPN</a>
 						<ul>
-							<li><a href="#">IPsec</a></li>
-							<li><a href="#">OpenVPN</a></li>
+							<li class="nav-item"><a class="nav-link" href="#">IPsec</a></li>
+							<li class="nav-item"><a class="nav-link" href="#">OpenVPN</a></li>
 						</ul>
 					</li>
-					<li><a href"#">Intrusion Detection System</a></li>
-					<li><a href="#">Quality of Service</a></li>
-					<li><a href="#">Hardware</a></li>
-					<li><a href="#">Virtualisation</a></li>
-					<li><a href="#">Wireless Access Point</a></li>
+					<li class="nav-item"><a class="nav-link" href="#ids">Intrusion Detection System</a></li>
+					<li class="nav-item"><a class="nav-link" href="#qos">Quality of Service</a></li>
+					<li class="nav-item"><a class="nav-link" href="#hardware">Hardware</a></li>
+					<li class="nav-item"><a class="nav-link" href="#virtualization">Virtualisation</a></li>
+					<li class="nav-item"><a class="nav-link" href="#wlanap">Wireless Access Point</a></li>
 				</ul>
 			</nav>
 		
@@ -1270,6 +1270,8 @@
 						</p>
 					{% end %}
 			</section>
+			
+			<div class="divider"></div>
 		
 			<section id="hardware">
 				<h3 class="headline">{{ _("Hardware") }}</h3>
@@ -1511,4 +1513,19 @@
 		</div>
 	</div>
 </div>
-{% end block %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+<script>
+	$(document).ready(function () {
+		$(window).scroll(function () {
+	        if ($(document).scrollTop() > 40) {
+	            $("#sidebar ul.features_nav").addClass("fixed");
+	        } else {
+	            $("#sidebar ul.features_nav").removeClass("fixed");
+	        }
+	    });
+	    
+		$('body').scrollspy({ target: '#sidebar', offset: 148 })
+	});
+</script>
+{% end block %}
\ No newline at end of file
-- 
2.39.2