features page added spyscoll to navigation

diff --git a/static/css/style.css b/static/css/style.css
index ab4a7d7b80ef9422147b6db0940ac48b428d15da..4ac2968c2116b023b464e09ab2f795d8023187d5 100644 (file)
--- 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 c30c758cee9d4f79fd4a4d99ba2a6ac3c1e1260b..76078aecfe1ec97dfbba538f6a35280999aabea4 100644 (file)
--- 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 4ea649fab0f0a10812ce1e7c9faee956ac543d16..66a660dd73a6ec7d650a2dc57e89a215b2b6528e 100644 (file)
--- 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 e31db2adc9bfc560edd72d6469540659d103eefa..20bb379792ec539175dc64c09efa2cf33ca88751 100644 (file)
--- 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 18128ff5cd2e28b54da05a9b046dc2a518324f87..bc95de2b8cbb033b48ed5c13dd74010ca9ac18a1 100644 (file)
--- 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 234db580c93548cdc8f5015e0c012ba107750653..8377933085774b23ae4dea27bc6b0fa048c7c6ef 100644 (file)
--- 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 0268caada9fc52e85ba8c63be97b49ec134a5bf7..5469b6ac529fd8ddfc3818d112fdff51b03395f0 100644 (file)
--- 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