diff --git a/datacenterlight/static/datacenterlight/js/main.js b/datacenterlight/static/datacenterlight/js/main.js
index 5594fe11..2c5333ae 100644
--- a/datacenterlight/static/datacenterlight/js/main.js
+++ b/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) {
diff --git a/datacenterlight/templates/datacenterlight/includes/_navbar.html b/datacenterlight/templates/datacenterlight/includes/_navbar.html
index 99f6a4a8..87534b66 100644
--- a/datacenterlight/templates/datacenterlight/includes/_navbar.html
+++ b/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" 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 %}
-
+ <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>
</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 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 menu-url" data-url="#our" href="#our">{% trans "Reliable and light" %}</a></li>
- <li> <a class="url menu-url" data-url="#price" 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>
- </li>
- {% endif %}
-
- <li>
- {% if LANGUAGE_CODE == 'en-us'%}
- <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch <i class="fa fa-globe" aria-hidden="true"></i></a>
- {% else %}
- <a class="on-hover-border" href="{% change_lang 'en-us' %}">English <i class="fa fa-globe" aria-hidden="true"></i></a>
- {% endif %}
- </li>
- {% comment %}
- <!-- to be used when more than one option for language -->
- <li class="nav-language">
- <div class="dropdown">
- <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
- {% if LANGUAGE_CODE == 'en-us'%}
- <span>English</span>
- {% 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>
+ <li class="dropdown">
+ <a class="dropdown-toggle url" href="#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" href="#your">{% trans "Scale out" %}</a></li>
+ <li><a class="url" href="#our">{% trans "Reliable and light" %}</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="#contact">{% trans "Contact" %}</a>
+ </li>
+ <li>
+ {% if LANGUAGE_CODE == 'en-us'%}
+ <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch <i class="fa fa-globe" aria-hidden="true"></i></a>
+ {% else %}
+ <a class="on-hover-border" href="{% change_lang 'en-us' %}">English <i class="fa fa-globe" aria-hidden="true"></i></a>
+ {% endif %}
+ </li>
+ {% comment %}
+ <!-- to be used when more than one option for language -->
+ <li class="nav-language">
+ <div class="dropdown">
+ <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+ {% if LANGUAGE_CODE == 'en-us'%}
+ <span>English</span>
+ {% else %}
+ <span>Deutsch</span>
+ {% endif %}
+ <i class="fa fa-globe" aria-hidden="true"></i>
</div>
- </li>
- {% endcomment %}
- </ul>
- </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>
+ {% endcomment %}
+ </ul>
<!-- /.navbar-collapse -->
</div>
</nav>
\ No newline at end of file
diff --git a/datacenterlight/templates/datacenterlight/order_detail.html b/datacenterlight/templates/datacenterlight/order_detail.html
index 8b1180bb..f3c946a1 100644
--- a/datacenterlight/templates/datacenterlight/order_detail.html
+++ b/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">
diff --git a/hosting/static/hosting/js/initial.js b/hosting/static/hosting/js/initial.js
index da2887c6..9d1cabe8 100644
--- a/hosting/static/hosting/js/initial.js
+++ b/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();
+
});
\ No newline at end of file
diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html
index d03713c1..8b4f2800 100644
--- a/hosting/templates/hosting/payment.html
+++ b/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%}