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,7 +1,10 @@
-{% 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 -->
+  <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
       <span class="sr-only">Toggle navigation</span>
@@ -9,66 +12,55 @@
       <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"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
-                  <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"><img src="{% static 'datacenterlight/img/logo_white.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">
-           <li class="dropdown">
+        <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  visible-mobile" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
+        <ul class="dropdown-menu">
-                <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>
+          <li><a class="url" href="#your">{% trans "Scale out" %}</a></li>
-            <ul class="dropdown-menu">
+          <li><a class="url" href="#our">{% trans "Reliable and light" %}</a></li>
-                <li><a class="url menu-url" data-url="#your" href="#your">{% trans "Scale out" %}</a></li>
+          <li> <a class="url" href="#price">{% trans "Order VM" %}</a></li>
-                <li><a class="url menu-url" data-url="#our" href="#our">{% trans "Reliable and light" %}</a></li>
+        </ul>
-                <li> <a class="url menu-url" data-url="#price" href="#price">{% trans "Order VM" %}</a></li>
+      </li>
-            </ul>
+			<li>
-          </li>
+				<a href="{% url 'datacenterlight:whydatacenterlight' %}" >{% trans "Why Data Center Light?" %}</a>
-    			<li>
+			</li>
-    				<a href="{% url 'datacenterlight:whydatacenterlight' %}" >{% trans "Why Data Center Light?" %}</a>
+			<li>
-    			</li>
+				<a class="url" href="#contact">{% trans "Contact" %}</a>
-    			<li>
+			</li>
-    				<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact"  >{% trans "Contact" %}</a>
+      <li>
-    			</li>
+        {% if LANGUAGE_CODE == 'en-us'%}
-  			{% endif %}
+          <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
-
+        {% else %}
-        <li>
+          <a class="on-hover-border" href="{% change_lang 'en-us' %}">English&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
-          {% if LANGUAGE_CODE == 'en-us'%}
+        {% endif %}
-            <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
+      </li>
-          {% else %}
+      {% comment %}
-            <a class="on-hover-border" href="{% change_lang 'en-us' %}">English&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
+      <!-- to be used when more than one option for language -->
-          {% endif %}
+      <li class="nav-language">
-        </li>
+        <div class="dropdown">
-        {% comment %}
+          <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-        <!-- to be used when more than one option for language -->
+            {% if LANGUAGE_CODE == 'en-us'%}
-        <li class="nav-language">
+              <span>English</span>
-          <div class="dropdown">
+            {% else %}
-            <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+              <span>Deutsch</span>
-              {% if LANGUAGE_CODE == 'en-us'%}
+            {% endif %}
-                <span>English</span>
+            <i class="fa fa-globe" aria-hidden="true"></i>
-              {% else %}
-                <span>Deutsch</span>
-              {% endif %}
-              <i class="fa fa-globe" aria-hidden="true"></i>
-            </div>
-            <ul class="dropdown-menu drop-language dropdown-menu-right">
-              {% if LANGUAGE_CODE == 'en-us'%}
-                <li><a class="url" href="{% change_lang 'de' %}">Deutsch</a></li>
-              {% else %}
-                <li><a class="url" href="{% change_lang 'en-us' %}">English</a></li>
-              {% endif %}
-            </ul>
           </div>
-        </li>
+          <ul class="dropdown-menu drop-language dropdown-menu-right">
-        {% endcomment %}
+            {% if LANGUAGE_CODE == 'en-us'%}
-      </ul>
+              <li><a class="url" href="{% change_lang 'de' %}">Deutsch</a></li>
-    </div>
+            {% else %}
+              <li><a class="url" href="{% change_lang 'en-us' %}">English</a></li>
+            {% endif %}
+          </ul>
+        </div>
+      </li>
+      {% endcomment %}
+    </ul>
     <!-- /.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%}