moep/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #415 from tiwariav/bugfix/3553/navbar

Browse source 
Task #3553 fix page "blinks" on click on navbar link
This commit is contained in:
Pcoder 2017-07-27 21:55:27 +02:00 committed by GitHub
commit 8dd1cbda19
3 changed files with 538 additions and 373 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

752
datacenterlight/static/datacenterlight/css/landing-page.css
View file

File diff suppressed because it is too large Load diff

126
datacenterlight/static/datacenterlight/js/main.js
View file

@ -1,22 +1,22 @@
(function($){ (function($) {
"use strict"; // Start of use strict "use strict"; // Start of use strict
/* --------------------------------------------- /* ---------------------------------------------
Scripts initialization Scripts initialization
--------------------------------------------- */ --------------------------------------------- */
var cardPricing ={ var cardPricing = {
'cpu': { 'cpu': {
'id': 'coreValue', 'id': 'coreValue',
'value': 1, 'value': 1,
'min':1, 'min': 1,
'max': 48, 'max': 48,
'interval': 1 'interval': 1
}, },
'ram': { 'ram': {
'id': 'ramValue', 'id': 'ramValue',
'value': 2, 'value': 2,
'min':2, 'min': 2,
'max': 200, 'max': 200,
'interval': 1 'interval': 1
}, },
@ -28,21 +28,21 @@
'interval': 10 'interval': 10
} }
}; };
$(window).load(function(){ $(window).load(function() {
}); });
$(document).ready(function(){ $(document).ready(function() {
verifiedUrl(); verifiedUrl();
_navScroll(); _navScroll();
_initScroll(); _initScroll();
_initNavUrl(); _initNavUrl();
_initPricing(); _initPricing();
}); });
$(window).resize(function(){ $(window).resize(function() {
@ -53,102 +53,112 @@
/* --------------------------------------------- /* ---------------------------------------------
Nav panel classic Nav panel classic
--------------------------------------------- */ --------------------------------------------- */
if (window.matchMedia("(min-width: 767px)").matches) { if (window.matchMedia("(min-width: 767px)").matches) {
$('ul.nav li.dropdown').hover(function() { $('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() { }, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
} else {
/* the viewport is less than 400 pixels wide */
}
function _initScroll(){
$(window).scroll(function(){
_navScroll();
}); });
} else {
/* the viewport is less than 400 pixels wide */
} }
function _navScroll(){
if($(window).scrollTop() > 10 ){
function _initScroll() {
$(window).scroll(function() {
_navScroll();
});
}
function _navScroll() {
if ($(window).scrollTop() > 10) {
$(".navbar").removeClass("navbar-transparent"); $(".navbar").removeClass("navbar-transparent");
$(".navbar-default .btn-link").css("color", "#777"); $(".navbar-default .btn-link").css("color", "#777");
$(".dropdown-menu").removeClass("navbar-transparent"); $(".dropdown-menu").removeClass("navbar-transparent");
$(".dropdown-menu > li > a").css("color", "#777"); $(".dropdown-menu > li > a").css("color", "#777");
}else{ } else {
$(".navbar").addClass("navbar-transparent"); $(".navbar").addClass("navbar-transparent");
$(".navbar-default .btn-link").css("color", "#fff"); $(".navbar-default .btn-link").css("color", "#fff");
$(".dropdown-menu").addClass("navbar-transparent"); $(".dropdown-menu").addClass("navbar-transparent");
$(".dropdown-menu > li > a").css("color", "#fff"); $(".dropdown-menu > li > a").css("color", "#fff");
} }
} }
function _initNavUrl(){
$('.url').click(function(){ function _initNavUrl() {
var href = $(this).attr('data-url'); $('.url').click(function(event) {
$('.navbar-collapse').removeClass('in'); event.preventDefault();
$('.navbar-collapse').addClass('collapsing'); var href = $(this).attr('data-url');
$('html, body').animate({ $('.navbar-collapse').removeClass('in');
scrollTop: $(href).offset().top $('.navbar-collapse').addClass('collapsing');
}, 1000); var url = window.location.pathname;
var urlSplit = url.split('/');
if (urlSplit.length === 3 && urlSplit[2] === 'datacenterlight') {
$('html, body').animate({
scrollTop: $(href).offset().top
}, 1000);
} else {
var allUrl = window.location.href;
var redirect = allUrl.split('whydatacenterlight')
window.location.href = '/en-us/datacenterlight' + href;
}
}); });
} }
function verifiedUrl(){
if(window.location.href.indexOf('#success') > -1){ function verifiedUrl() {
if (window.location.href.indexOf('#success') > -1) {
form_success(); form_success();
console.log('epa');
} }
} }
function _initPricing(){ function _initPricing() {
_fetchPricing(); _fetchPricing();
$('.fa-minus-circle.left').click(function(event){ $('.fa-minus-circle.left').click(function(event) {
var data = $(this).data('minus'); var data = $(this).data('minus');
if(cardPricing[data].value > cardPricing[data].min){ if (cardPricing[data].value > cardPricing[data].min) {
cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval; cardPricing[data].value = Number(cardPricing[data].value) - cardPricing[data].interval;
} }
_fetchPricing(); _fetchPricing();
}); });
$('.fa-plus-circle.right').click(function(event){ $('.fa-plus-circle.right').click(function(event) {
var data = $(this).data('plus'); var data = $(this).data('plus');
if(cardPricing[data].value < cardPricing[data].max){ if (cardPricing[data].value < cardPricing[data].max) {
cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval; cardPricing[data].value = Number(cardPricing[data].value) + cardPricing[data].interval;
} }
_fetchPricing(); _fetchPricing();
}); });
$('.input-price').change(function(){ $('.input-price').change(function() {
var data = $(this).attr("name"); var data = $(this).attr("name");
cardPricing[data].value = $('input[name='+data+']').val(); cardPricing[data].value = $('input[name=' + data + ']').val();
_fetchPricing(); _fetchPricing();
}); });
} }
function _fetchPricing(){
Object.keys(cardPricing).map(function(element){ function _fetchPricing() {
Object.keys(cardPricing).map(function(element) {
//$('#'+cardPricing[element].id).val(cardPricing[element].value); //$('#'+cardPricing[element].id).val(cardPricing[element].value);
$('input[name='+element+']').val(cardPricing[element].value); $('input[name=' + element + ']').val(cardPricing[element].value);
}); });
_calcPricing(); _calcPricing();
} }
function _calcPricing(){ function _calcPricing() {
var total = (cardPricing['cpu'].value * 5) + (2* cardPricing['ram'].value) + (0.6* cardPricing['storage'].value); var total = (cardPricing['cpu'].value * 5) + (2 * cardPricing['ram'].value) + (0.6 * cardPricing['storage'].value);
total = parseFloat(total.toFixed(2)); total = parseFloat(total.toFixed(2));
$("#total").text(total); $("#total").text(total);
$('input[name=total]').val(total); $('input[name=total]').val(total);
} }
function form_success(){
function form_success() {
$('#sucessModal').modal('show'); $('#sucessModal').modal('show');
} }
function _calculate(numbers, price){
$('#valueTotal').text(numbers*price*31); function _calculate(numbers, price) {
$('#valueTotal').text(numbers * price * 31);
} }
})(jQuery); })(jQuery);

33
datacenterlight/templates/datacenterlight/includes/_navbar.html
View file

@ -12,28 +12,28 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %} {% 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 url" data-url="#home"><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 url" data-url="#home"><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 %} {% else %}
<a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a> <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 url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a> <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
{% endif %} {% endif %}
</div> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %} {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
<li class="dropdown"> <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 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" href="{% url 'datacenterlight:index' %}#how" data-url="#how" 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"> <ul class="dropdown-menu">
<li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your" >{% trans "Scale out" %}</a></li> <li><a class="url menu-url" data-url="#your" href="#your">{% trans "Scale out" %}</a></li>
<li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li> <li><a class="url menu-url" data-url="#our" href="#our">{% trans "Reliable and light" %}</a></li>
<li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li> <li> <a class="url menu-url" data-url="#price" href="#price">{% trans "Order VM" %}</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a> <a href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
</li> </li>
<li> <li>
<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact" >{% trans "Contact" %}</a> <a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact" >{% trans "Contact" %}</a>
@ -41,18 +41,19 @@
{% endif %} {% endif %}
<li class="nav-language"> <li class="nav-language">
<div class="select-language"> <div class="select-language">
{% if LANGUAGE_CODE == 'en-us'%} {% if LANGUAGE_CODE == 'en-us'%}
<span>English</span> <span>English</span>
{% else %} {% else %}
<span>Deutsch</span> <span>Deutsch</span>
{% endif %} {% endif %}
<i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i>
</div> </div>
<div onclick="return true" class="drop-language">
{% if LANGUAGE_CODE == 'en-us'%} <div class="drop-language">
<a class="url" href="{% change_lang 'de' %}">Deutsch</a> {% if LANGUAGE_CODE == 'en-us'%}
<a href="{% change_lang 'de' %}">Deutsch</a>
{% else %} {% else %}
<a class="url" href="{% change_lang 'en-us' %}" >English</a> <a href="{% change_lang 'en-us' %}" >English</a>
{% endif %} {% endif %}
</div> </div>