diff --git a/datacenterlight/templates/datacenterlight/order_detail.html b/datacenterlight/templates/datacenterlight/order_detail.html
index 2fcddd51..b55953bf 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 %}
diff --git a/datacenterlight/views.py b/datacenterlight/views.py
index 25c2b87f..b6a644e4 100644
--- a/datacenterlight/views.py
+++ b/datacenterlight/views.py
@@ -554,7 +554,7 @@ class OrderConfirmationView(DetailView):
stripe_subscription_obj = subscription_result.get('response_object')
# Check if the subscription was approved and is active
if stripe_subscription_obj is None or \
- stripe_subscription_obj.status != 'active':
+ stripe_subscription_obj.status != 'active':
msg = subscription_result.get('error')
messages.add_message(self.request, messages.ERROR, msg,
extra_tags='failed_payment')
diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index 1ebae4b4..cb7cdd8e 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -1,3 +1,9 @@
+@media (min-width: 768px) {
+ .navbar-right {
+ margin-right: 10px;
+ }
+}
+
.dashboard-container {
padding-top:70px;
padding-bottom: 70px;
diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css
index 3672552e..8c6e5e2d 100644
--- a/hosting/static/hosting/css/landing-page.css
+++ b/hosting/static/hosting/css/landing-page.css
@@ -39,11 +39,28 @@ h6 {
.topnav {
font-size: 14px;
}
+.topnav .navbar-fixed-top .navbar-collapse {
+ max-height: 740px;
+}
+.navbar-brand {
+ padding: 10px 15px;
+}
+
+.navbar-default {
+ background: #fff;
+ box-shadow: 0 3px 3px -2px hsla(0,0%,78%,.72);
+}
+
+.navbar-default .navbar-header {
+ position: relative;
+ z-index: 1;
+}
.navbar-transparent {
background: transparent;
border: none;
padding: 20px;
+ box-shadow: none;
}
.navbar-transparent.topnav {
@@ -71,6 +88,42 @@ h6 {
/* color: #fff; */
}
+.navbar-right .highlights-dropdown .dropdown-menu {
+ left: 0 !important;
+ min-width: 155px;
+ margin-left: 15px;
+ padding: 5px !important;
+}
+@media(min-width: 768px) {
+ .navbar-right .highlights-dropdown .dropdown-menu {
+ border: 1px solid #fff;
+ }
+ .navbar-right .highlights-dropdown .dropdown-menu:before {
+ content: '';
+ display: block;
+ height: 1px;
+ background: #e7e7e7;
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ }
+}
+.navbar-right .highlights-dropdown .dropdown-menu > li > a{
+ font-size: 13px;
+ font-weight: 300;
+ font-family: 'Lato', sans-serif;
+ padding: 1px 10px !important;
+ background: transparent;
+ color: #333;
+}
+.navbar-right .highlights-dropdown .dropdown-menu > li > a:hover,
+.navbar-right .highlights-dropdown .dropdown-menu > li > a:focus,
+.navbar-right .highlights-dropdown .dropdown-menu > li > a:active {
+ background: transparent;
+ text-decoration: underline !important;
+}
+
.lead {
font-size: 18px;
font-weight: 400;
@@ -761,6 +814,30 @@ a.unlink:hover {
color: #ddd;
}
+.visible-mobile {
+ display: none !important;
+}
+
+@media(max-width:767px) {
+ .visible-mobile {
+ display: block !important;
+ }
+ .visible-desktop {
+ display: none !important;
+ }
+}
+
+.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover,
+.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
+ background-color: transparent;
+}
+
+@media (max-width: 767px) {
+ .navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {
+ background-color: transparent;
+ }
+}
+
/* bootstrap danger color override from #a94442 */
.text-danger,
.has-error .help-block,
diff --git a/hosting/static/hosting/css/user_keys.css b/hosting/static/hosting/css/user_keys.css
index 7935344f..4b788da6 100644
--- a/hosting/static/hosting/css/user_keys.css
+++ b/hosting/static/hosting/css/user_keys.css
@@ -163,8 +163,8 @@
/* margin-left: 0; */
}
.col-md-12, .col-sm-12{
- padding-left: 5px;
- padding-right: 5px;
+ /*padding-left: 5px;*/
+ /*padding-right: 5px;*/
}
}
@media (max-width: 360px){
@@ -172,8 +172,8 @@
/* width: 100% !important; */
}
.container {
- padding-right: 5px;
- padding-left: 5px;
+ /*padding-right: 5px;
+ padding-left: 5px;*/
}
}
.dashboard-choice-container {
diff --git a/hosting/static/hosting/js/initial.js b/hosting/static/hosting/js/initial.js
index 2f00c996..4408a299 100644
--- a/hosting/static/hosting/js/initial.js
+++ b/hosting/static/hosting/js/initial.js
@@ -1,5 +1,59 @@
-$( 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;
+ // }
+ // });
+ $('.url-init').each(function(idx, el) {
+ var $this = $(el);
+ var currentPath = window.location.pathname;
+ var thisPaths = $this.attr('href').split('#')
+ if ($this.hasClass('dropdown-toggle') && window.matchMedia("(max-width: 767px)").matches) {
+ $this.removeClass('url-init');
+ $this.attr('href', '');
+ } else if ($('#'+thisPaths[1]).length) {
+ $this.removeClass('url-init').addClass('url');
+ $this.attr('href', '#' + thisPaths[1]);
+ } else {
+ $this.removeClass('url-init');
+ }
+ });
+ $('.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);
+ }
+ });
+}
+/* ---------------------------------------------
+ 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,6 +67,8 @@ $( document ).ready(function() {
}, 1000);
});
+ _initNavUrl();
+
/*
* Replace all SVG images with inline SVG
*/
diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html
index 4dcf5074..5030d9ab 100644
--- a/hosting/templates/hosting/base_short.html
+++ b/hosting/templates/hosting/base_short.html
@@ -58,12 +58,14 @@
{% if request.user.is_authenticated %}
diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html
index 543234f0..f4974a56 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 %}
@@ -207,7 +212,6 @@
window.hasCreditcard = true;
})();
-
{%endif%}
{%endblock%}