navbar fixed on payment, order-success, order-confirmation

datacenterlight/static/datacenterlight/js/main.js

@@ -88,7 +88,7 @@
     function _initNavUrl() {
         $('.url').click(function(event) {
             event.preventDefault();
-            var href = $(this).attr('data-url');
+            var href = $(this).attr('href');
             $('.navbar-collapse').removeClass('in');
             $('.navbar-collapse').addClass('collapsing');
             if ($(href).length) {

datacenterlight/templates/datacenterlight/includes/_navbar.html

@@ -1,4 +1,7 @@
-{% load staticfiles i18n%} {% get_current_language as LANGUAGE_CODE %} {% load custom_tags %}
+{% load staticfiles i18n%}
+{% load custom_tags %}
+{% get_current_language as LANGUAGE_CODE %}
+
 <nav class="navbar navbar-default navbar-fixed-top topnav">
   <div class="topnav">
   <!-- Brand and toggle get grouped for better mobile display -->
@@ -9,35 +12,25 @@
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
-                  <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav" data-url="#home"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
-                  <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav" data-url="#home"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
-                {% else %}
     <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
     <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
-                {% endif %}
-
   </div>
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
     <ul class="nav navbar-nav navbar-right">
-        {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
       <li class="dropdown">
-                <a class="dropdown-toggle  visible-mobile" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
+        <a class="dropdown-toggle url" href="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}&nbsp;<span class="caret"></span></a>
-                <a class="dropdown-toggle url disabled visible-desktop menu-url" data-url="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
         <ul class="dropdown-menu">
-                <li><a class="url menu-url" data-url="#your" href="#your">{% trans "Scale out" %}</a></li>
+          <li><a class="url" href="#your">{% trans "Scale out" %}</a></li>
-                <li><a class="url menu-url" data-url="#our" href="#our">{% trans "Reliable and light" %}</a></li>
+          <li><a class="url" href="#our">{% trans "Reliable and light" %}</a></li>
-                <li> <a class="url menu-url" data-url="#price" href="#price">{% trans "Order VM" %}</a></li>
+          <li> <a class="url" href="#price">{% trans "Order VM" %}</a></li>
         </ul>
       </li>
 			<li>
 				<a href="{% url 'datacenterlight:whydatacenterlight' %}" >{% trans "Why Data Center Light?" %}</a>
 			</li>
 			<li>
-    				<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact"  >{% trans "Contact" %}</a>
+				<a class="url" href="#contact">{% trans "Contact" %}</a>
 			</li>
-  			{% endif %}
-
       <li>
         {% if LANGUAGE_CODE == 'en-us'%}
           <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
@@ -68,7 +61,6 @@
       </li>
       {% endcomment %}
     </ul>
-    </div>
     <!-- /.navbar-collapse -->
   </div>
 </nav>

datacenterlight/templates/datacenterlight/order_detail.html

@@ -2,6 +2,11 @@
 {% load staticfiles bootstrap3 %}
 {% load i18n %}
 {% load custom_tags %}
+
+{% block navbar %}
+    {% include "datacenterlight/includes/_navbar.html" %}
+{% endblock navbar %}
+
 {% block content %}
 
     <div class="order-detail-container">

hosting/static/hosting/js/initial.js

@@ -1,5 +1,34 @@
-$( document ).ready(function() {
+// also declared in datacenterlight/js/main.js
+function _initNavUrl() {
+    $('.url').click(function(event) {
+        event.preventDefault();
+        var href = $(this).attr('href');
+        $('.navbar-collapse').removeClass('in');
+        $('.navbar-collapse').addClass('collapsing');
+        if ($(href).length) {
+            $('html, body').animate({
+                scrollTop: $(href).offset().top
+            }, 1000);
+        } else {
+            window.location.href = '/datacenterlight' + href;
+        }
+    });
+}
 
+/* ---------------------------------------------
+ Nav panel classic
+ --------------------------------------------- */
+if (window.matchMedia("(min-width: 767px)").matches) {
+    $('ul.nav li.dropdown').hover(function() {
+        $(this).find('.dropdown-menu').stop(true, true).fadeIn(500);
+    }, function() {
+        $(this).find('.dropdown-menu').stop(true, true).fadeOut(500);
+    });
+} else {
+    /* the viewport is less than 400 pixels wide */
+}
+
+$( document ).ready(function() {
 
 	$('[data-toggle="tooltip"]').tooltip();
 
@@ -13,4 +42,6 @@ $( document ).ready(function() {
         }, 1000);
     });
 
+    _initNavUrl();
+
 });

hosting/templates/hosting/payment.html

@@ -1,5 +1,10 @@
 {% extends "hosting/base_short.html" %}
 {% load staticfiles bootstrap3 i18n %}
+
+{% block navbar %}
+    {% include "datacenterlight/includes/_navbar.html" %}
+{% endblock navbar %}
+
 {% block content %}
 <!-- Credit card form -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
@@ -190,7 +195,6 @@
         window.hasCreditcard = true;
     })();
 </script>
-
 {%endif%}
 
 {%endblock%}