Merge branch 'master' into task/3731/cdist_ssh_key_handler

Changelog

@@ -1,3 +1,14 @@
+1.2: 2017-09-01
+    * #3703: [hosting] Added a new dashboard
+    * #3717: [datacenterlight, hosting] Changed warning color for box
+    * #3748: [datacenterlight] Changed order msg position for mobile
+    * #3762: [hosting] Text fix View details to See Invoice
+    * #3765: [hosting] Text fix Your SSH Keys to My SSH Keys
+    * #3639: [datacenterlight] Added navbar menu after payment page on landing
+    * #3735: [hosting] Increased modal width and modal button width
+    * #3709: Activated Text Plugin by default for the Page Title Text, enabled <title> tag text management 
+    * #3768: [datacenterlight, hosting] Fixed missing DE translation  
+    * #3678: [datacenterlight, hosting] Removed Lato font files
 1.1.1: 2017-08-29
     * #3709: [datacenterlight] Added faq tos cms template
     * #3657: [datacenterlight] Added a new contact section at landing

datacenterlight/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-08-24 11:28+0000\n"
+"POT-Creation-Date: 2017-09-02 03:08+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -95,7 +95,9 @@ msgid "Message"
 msgstr "Nachricht"
 
 msgid "Sorry, there was an unexpected error. Kindly retry."
-msgstr "Bitte entschuldige, es scheint ein unerwarteter Fehler aufgetreten zu sein. Versuche es doch bitte noch einmal."
+msgstr ""
+"Bitte entschuldige, es scheint ein unerwarteter Fehler aufgetreten zu sein. "
+"Versuche es doch bitte noch einmal."
 
 msgid "SUBMIT"
 msgstr "ABSENDEN"
@@ -166,6 +168,9 @@ msgstr ""
 "Du kannst deinen %(dcl_text)s Account aktivieren, indem du hier klickst "
 "%(base_url)s%(activation_link)s\n"
 
+msgid "Home"
+msgstr "Home"
+
 msgid "Highlights"
 msgstr ""
 
@@ -175,18 +180,15 @@ msgstr "Skalierung"
 msgid "Reliable and light"
 msgstr "Zuverlässig und leicht"
 
+msgid "Pricing"
+msgstr "Preise"
+
 msgid "Order VM"
 msgstr "VM bestellen"
 
 msgid "Contact"
 msgstr "Kontakt"
 
-msgid "Home"
-msgstr "Home"
-
-msgid "Pricing"
-msgstr "Preise"
-
 msgid "All Rights Reserved"
 msgstr "Alle Rechte vorbehalten"
 
@@ -258,23 +260,8 @@ msgstr "Kontaktiere uns"
 msgid "Switzerland "
 msgstr "Schweiz "
 
-msgid "Confirm Order"
+msgid "Your Order"
-msgstr "Bestellung Bestätigen"
+msgstr "Deine Bestellung"
-
-msgid "Date"
-msgstr "Datum"
-
-msgid "Billed To:"
-msgstr "Rechnungsadresse"
-
-msgid "Payment Method:"
-msgstr "Bezahlmethode"
-
-msgid "ending"
-msgstr "endend in"
-
-msgid "Order summary"
-msgstr "Bestellungsübersicht"
 
 msgid "Cores"
 msgstr "Prozessorkerne"
@@ -289,13 +276,80 @@ msgid "Configuration"
 msgstr "Konfiguration"
 
 msgid "Total"
-msgstr ""
+msgstr "Gesamt"
+
+msgid "including VAT"
+msgstr "inkl. Mehrwertsteuer"
 
-#, fuzzy
-#| msgid "month"
 msgid "Month"
 msgstr "Monat"
 
+msgid "Billing Address"
+msgstr "Rechnungsadresse"
+
+msgid "Credit Card"
+msgstr "Kreditkarte"
+
+msgid ""
+"\n"
+"                                Please fill in your credit card information "
+"below. We are using <a\n"
+"                                    href=\"https://stripe.com\" target="
+"\"_blank\">Stripe</a> for payment and do not store\n"
+"                                your information in our database.\n"
+"                                "
+msgstr ""
+"\n"
+"Bitte füll Deine Kreditkarteninformationen unten aus. Wir nutzen <a href="
+"\"https://stripe.com\" target=\"_blank\">Stripe</a> für die Bezahlung und "
+"speichern keine Informationen in unserer Datenbank."
+
+msgid ""
+"You are not making any payment yet. After submitting your card information, "
+"you will be taken to the Confirm Order Page."
+msgstr ""
+"Es wird noch keine Bezahlung vorgenommen. Die Bezahlung wird erst ausgelöst, "
+"nachdem Du die Bestellung auf der nächsten Seite bestätigt hast."
+
+msgid "Submit"
+msgstr "Absenden"
+
+msgid "Card Number"
+msgstr "Kreditkartennummer"
+
+msgid "Expiry Date"
+msgstr "Ablaufdatum"
+
+msgid "CVC"
+msgstr ""
+
+msgid "Card Type"
+msgstr "Kartentyp"
+
+msgid "Processing"
+msgstr "Weiter"
+
+msgid "Enter your credit card number"
+msgstr "Deine Kreditkartennummer"
+
+msgid "Confirm Order"
+msgstr "Bestellung Bestätigen"
+
+msgid "Date"
+msgstr "Datum"
+
+msgid "Billed To:"
+msgstr "Rechnungsadresse"
+
+msgid "Payment Method:"
+msgstr "Bezahlmethode"
+
+msgid "ending"
+msgstr "endend"
+
+msgid "Order summary"
+msgstr "Bestellungsübersicht"
+
 #, python-format
 msgid ""
 "By clicking \"Place order\" this plan will charge your credit card account "
@@ -331,7 +385,7 @@ msgstr ""
 msgid "Thank you for order! Our team will contact you via email"
 msgstr ""
 "Vielen Dank für die Bestellung. Unser Team setzt sich sobald wie möglich mit "
-"Ihnen via E-Mail in Verbindung."
+"Dir via E-Mail in Verbindung."
 
 msgid "as soon as possible!"
 msgstr ""
@@ -495,9 +549,6 @@ msgstr "ist keine gültige E-Mailadresse"
 #~ msgid "Buy Now!"
 #~ msgstr "Kaufe jetzt!"
 
-#~ msgid "Email address"
-#~ msgstr "E-Mail Adresse"
-
 #~ msgid "Our promise"
 #~ msgstr "Unser Versprechen"
 

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -4,11 +4,6 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-/*@font-face {
-    font-family: 'Lato-Light';
-    src: url('../fonts/Lato/Lato-Light.ttf');
-}*/
-
 body,
 html {
     width: 100%;
@@ -972,6 +967,10 @@ tech-sub-sec h2 {
 .navbar-default .navbar-nav>.open>a:focus,
 .navbar-default .navbar-nav>.open>a:hover {
     background: transparent;
+}
+.navbar-transparent .navbar-nav>.open>a,
+.navbar-transparent .navbar-nav>.open>a:focus,
+.navbar-transparent .navbar-nav>.open>a:hover {
     color: #fff;
 }
 

datacenterlight/static/datacenterlight/fonts/Lato/OFL.txt

@@ -1,92 +0,0 @@
-Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

datacenterlight/static/datacenterlight/js/main.js

@@ -86,17 +86,29 @@
     }
 
     function _initNavUrl() {
+        $('.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('data-url');
+            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;
             }
         });
     }

datacenterlight/templates/datacenterlight/base.html

@@ -10,7 +10,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="description" content="Data Center Light by ungleich">
         <meta name="author" content="ungleich GmbH">
-
+        {% cms_toolbar %}
         <title>Data Center Light -
         {% block title %}VM hosting made in Switzerland{% endblock %}</title>
         <!-- Bootstrap Core CSS -->
@@ -41,7 +41,6 @@
     </head>
 
     <body>
-        {% cms_toolbar %}
         <!-- Navigation -->
         {% include "datacenterlight/includes/_navbar.html" %}
 

datacenterlight/templates/datacenterlight/cms_page.html

@@ -1,17 +1,19 @@
 {% extends "datacenterlight/base.html" %}
 {% load staticfiles cms_tags sekizai_tags %}
+{% block title %}
+{% page_attribute page_title %}
+{% endblock %}
 {% block content %}
 {% addtoblock "css" %}
 <link href="{% static 'datacenterlight/css/cms.css' %}" media="screen" rel="stylesheet" type="text/css"/>
 {% endaddtoblock %}
-
 <div class="dcl-cms_page-full-width">
     <div class="dcl-cms_page-header">
         <div class="container">
             <div class="row">
                 <div class="col-sm-12 col-md-12">
                     <div class="single-heading">
-                        <h2>{% placeholder 'datacenterlight_cms_page_title' %}</h2>
+                        <h2>{% page_attribute page_title %}</h2>
                     </div>
                 </div>
             </div>

datacenterlight/templates/datacenterlight/includes/_footer.html

@@ -2,52 +2,37 @@
 {% get_current_language as LANGUAGE_CODE %}
     <footer>
         <div class="container">
-            <div class="row">
-                <div class="col-lg-12">
-
             <ul class="list-inline">
-                        {% if request.resolver_match.url_name == "index" %}
+                {% if request.resolver_match.url_name != "index" %}
-                         <li>
-                            <a class="url" href="javascript:void(0)" data-url="#how" >{% trans "Highlights" %}</a>
-                        </li>
-                        <li>
-                            <a class="url" href="javascript:void(0)" data-url="#your"  >{% trans "Scale out" %}</a>
-                        </li>
-                       <li>
-                            <a class="url" href="javascript:void(0)" data-url="#our">{% trans "Reliable and light" %}</a>
-                        </li>
-                        <li>
-                            <a class="url" href="javascript:void(0)" data-url="#price" >{% trans "Order VM" %}</a>
-                        </li>
-                        <li>
-                            <a class="url" href="javascript:void(0)" data-url="#contact"  >{% trans "Contact" %}</a>
-                         </li>
-                         {% else %}
                     <li>
                        <a href="{% url 'datacenterlight:index' %}">{% trans "Home" %}</a>
                     </li>
                     <li class="footer-menu-divider">&sdot;</li>
+                {% endif %}
                 <li>
-                                <a href="{% url 'datacenterlight:index' %}#how">{% trans "Highlights" %}</a></li>
+                    <a class="url-init" href="{% url 'datacenterlight:index' %}#how">{% trans "Highlights" %}</a>
-                            <li class="footer-menu-divider">&sdot;</li>
+                </li>
                 <li>
-                                <a href="{% url 'datacenterlight:index' %}#your">{% trans "Scale out" %}</a></li>
+                    <a class="url-init" href="{% url 'datacenterlight:index' %}#your">{% trans "Scale out" %}</a>
-                            <li>&sdot;</li>
+                </li>
                <li>
-                                <a href="{% url 'datacenterlight:index' %}#our">{% trans "Reliable and light" %}</a></li>
+                    <a class="url-init" href="{% url 'datacenterlight:index' %}#our">{% trans "Reliable and light" %}</a>
-                            <li class="footer-menu-divider">&sdot;</li>
+                </li>
+                {% if request.resolver_match.url_name != "index" %}
                     <li>
-                                <a href="{% url 'datacenterlight:index' %}#price">{% trans "Pricing" %}</a>
+                        <a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Pricing" %}</a>
                     </li>
                     <li class="footer-menu-divider">&sdot;</li>
+                {% else %}
                     <li>
-                                <a href="{% url 'datacenterlight:index' %}#contact">{% trans "Contact" %}</a>
+                        <a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Order VM" %}</a>
                     </li>
                 {% endif %}
+                <li>
+                    <a class="url-init" href="{% url 'datacenterlight:index' %}#contact">{% trans "Contact" %}</a>
+                </li>
             </ul>
 
             <p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. {% trans "All Rights Reserved" %}</p>
         </div>
-            </div>
-        </div>
     </footer>

datacenterlight/templates/datacenterlight/includes/_navbar.html

@@ -1,99 +1,47 @@
-{% 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 -->
         <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse"
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    data-target="#bs-example-navbar-collapse-1">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <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
+            <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
-                    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-->
+        <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 highlights-dropdown">
-                <li class="dropdown">
+                    <a class="dropdown-toggle url-init" href="{% url 'datacenterlight:index' %}#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>
-                    <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-init" href="{% url 'datacenterlight:index' %}#your">{% trans "Scale out" %}</a></li>
-                        <li><a class="url menu-url" data-url="#our" href="#our">{% trans "Reliable and light" %}</a>
+                        <li><a class="url-init" href="{% url 'datacenterlight:index' %}#our">{% trans "Reliable and light" %}</a></li>
-                        </li>
+                        <li> <a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Order VM" %}</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>
+                    <a class="url-init" href="{% url 'datacenterlight:index' %}#contact">{% trans "Contact" %}</a>
                 </li>
-                {% else %}
-                <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="{% url 'datacenterlight:whydatacenterlight' %}#your">{% trans "Scale out" %}</a>
-                        </li>
-                        <li><a class="url menu-url" data-url="#our"
-                               href="{% url 'datacenterlight:whydatacenterlight' %}#our">{% trans "Reliable and light" %}
-                        </a></li>
-                        <li><a class="url menu-url" data-url="#price"
-                               href="{% url 'datacenterlight:whydatacenterlight' %}#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&nbsp;&nbsp;<i class="fa fa-globe"
+                    <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a> {% else %}
-                                                                                                   aria-hidden="true"></i></a>
+                    <a class="on-hover-border" href="{% change_lang 'en-us' %}">English&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a> {% endif %}
-                    {% else %}
-                    <a class="on-hover-border" href="{% change_lang 'en-us' %}">English&nbsp;&nbsp;<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"
+                        <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                             aria-haspopup="true" aria-expanded="false">
                             {% if LANGUAGE_CODE == 'en-us'%}
-                            <span>English</span>
+                            <span>English</span> {% else %}
-                            {% else %}
+                            <span>Deutsch</span> {% endif %}
-                            <span>Deutsch</span>
-                            {% endif %}
                             <i class="fa fa-globe" aria-hidden="true"></i>
                         </div>
                         <ul class="dropdown-menu drop-language dropdown-menu-right">
@@ -107,7 +55,6 @@
                 </li>
                 {% endcomment %}
             </ul>
-        </div>
             <!-- /.navbar-collapse -->
         </div>
 </nav>

datacenterlight/templates/datacenterlight/index.html

@@ -16,10 +16,10 @@
                         <hr class="intro-divider">
                         <ul class="list-inline intro-social-buttons">
                             <li>
-                                <a class="btn btn-default btn-lg btn-transparent url" href="javascript:void(0)" data-url="#how"  ><i class="#Services"></i> <span class="network-name">{% trans "Highlights" %}</span></a>
+                                <a class="btn btn-default btn-lg btn-transparent url" href="#how"><i class="#Services"></i> <span class="network-name">{% trans "Highlights" %}</span></a>
                             </li>
                             <li>
-                                <a class="btn btn-primary btn-lg page-scroll url" href="javascript:void(0)" data-url="#price" ><span class="network-name">{% trans "I want it!" %}</span></a>
+                                <a class="btn btn-primary btn-lg page-scroll url" href="#price"><span class="network-name">{% trans "I want it!" %}</span></a>
                             </li>
                         </ul>
                     </div>

datacenterlight/templates/datacenterlight/landing_payment.html

@@ -0,0 +1,217 @@
+{% 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"/>
+<div class="dcl-order-container">
+    <div class="payment-container">
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-sec">
+                <h3><strong>{%trans "Your Order" %}</strong></h3>
+                <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-header">
+                    <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-header">
+                        {%trans "Cores" %}
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-header">
+                        {%trans "Memory" %}
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-header">
+                        {%trans "Disk space" %}
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header">
+                        {%trans "Configuration" %}
+                    </div>
+                </div>
+                <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-content">
+                    <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-content">
+                        {{request.session.specs.cpu|floatformat}}
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-content">
+                        {{request.session.specs.memory|floatformat}} GB
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-content">
+                        {{request.session.specs.disk_size|floatformat}} GB
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content">
+                        {{request.session.template.name}}
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-table-total">
+                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-tot tbl-no-padding">
+                        {%trans "Total" %} <span>{%trans "including VAT" %}</span>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding">
+                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div>
+                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 tbl-total">{{request.session.specs.price}}
+                            CHF<span class="dcl-price-month">/{% trans "Month" %}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-billing-sec">
+                <div class="col-xs-12 col-sm-5 col-md-6  billing dcl-billing">
+                    <h3><b>{%trans "Billing Address"%}</b></h3>
+                    <hr>
+                    <form role="form" id="billing-form" method="post" action="" novalidate>
+                        {% for field in form %}
+                        {% csrf_token %}
+                        {% bootstrap_field field show_label=False type='fields'%}
+                        {% endfor %}
+                    </form>
+                </div>
+                <div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard">
+                    <h3><b>{%trans "Credit Card"%}</b></h3>
+                    <hr>
+                    <div>
+                        <div>
+                            <p>
+                                {% blocktrans %}
+                                Please fill in your credit card information below. We are using <a
+                                    href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store
+                                your information in our database.
+                                {% endblocktrans %}
+                            </p>
+                        </div>
+                        <br>
+                        <div>
+                            {% if credit_card_data.last4 %}
+                            <form role="form" id="payment-form-with-creditcard" novalidate>
+                                <h5 class="billing-head">Credit Card</h5>
+                                <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
+                                <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
+                                <input type="hidden" name="credit_card_needed" value="false"/>
+                            </form>
+                            <div class="row">
+                                <div class="col-xs-12">
+                                        {% if not messages and not form.non_field_errors %}
+                                            <p class="card-warning-content card-warning-addtional-margin">
+                                                {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
+                                            </p>
+                                        {% endif %}
+                                        <div id='payment_error'>
+                                            {% for message in messages %}
+                                                {% if 'failed_payment' or 'make_charge_error' in message.tags %}
+                                                 <ul class="list-unstyled"><li>
+                                                     <p class="card-warning-content card-warning-error">{{ message|safe }}</p>
+                                                </li></ul>
+                                                {% endif %}
+                                            {% endfor %}
+                                            {% for error in form.non_field_errors %}
+                                                <p class="card-warning-content card-warning-error">
+                                                    {{ error|escape }}
+                                                </p>
+                                            {% endfor %}
+                                        </div>
+                                    </div>
+                                <div class="col-xs-12">
+                                    <div class="col-xs-6 pull-right">
+                                        <button id="payment_button_with_creditcard" class="btn btn-success stripe-payment-btn"
+                                                type="submit">
+                                            {%trans "Submit" %}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {% else %}
+                            <form action="" id="payment-form-new" method="POST">
+                                <input type="hidden" name="token"/>
+                                <div class="group">
+                                    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-9 credit-card-goup">
+                                       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element">
+                                           <label>{%trans "Card Number" %}</label>
+                                           <div id="card-number-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3 card-element card-expiry-element">
+                                           <label>{%trans "Expiry Date" %}</label>
+                                           <div id="card-expiry-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-12 col-sm-2 col-md-6 col-lg-7 hide-mobile"></div>
+                                       <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2 card-element card-cvc-element">
+                                           <label>{%trans "CVC" %}</label>
+                                           <div id="card-cvc-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element brand">
+                                           <label>{%trans "Card Type" %}</label>
+                                           <i class="pf pf-credit-card" id="brand-icon"></i>
+                                       </div>
+                                    </div>
+                                </div>
+                                <div id="card-errors" role="alert"></div>
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        {% if not messages and not form.non_field_errors %}
+                                            <p class="card-warning-content">
+                                                {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
+                                            </p>
+                                        {% endif %}
+                                        <div id='payment_error'>
+                                            {% for message in messages %}
+                                                {% if 'failed_payment' or 'make_charge_error' in message.tags %}
+                                                 <ul class="list-unstyled"><li>
+                                                     <p class="card-warning-content card-warning-error">{{ message|safe }}</p>
+                                                </li></ul>
+                                                {% endif %}
+                                            {% endfor %}
+
+                                            {% for error in form.non_field_errors %}
+                                                <p class="card-warning-content card-warning-error">
+                                                    {{ error|escape }}
+                                                </p>
+                                            {% endfor %}
+                                        </div>
+                                    </div>
+                                    <div class="col-xs-12">
+                                        <div class="col-xs-6 pull-right">
+                                            <button class="btn btn-success stripe-payment-btn" type="submit">{%trans "Submit" %}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="row" style="display:none;">
+                                    <div class="col-xs-12">
+                                        <p class="payment-errors"></p>
+                                    </div>
+                                </div>
+                            </form>
+
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- stripe key data -->
+{% if stripe_key %}
+{% get_current_language as LANGUAGE_CODE %}
+<script type="text/javascript">
+    window.processing_text = '{%trans "Processing" %}';
+    window.enter_your_card_text = '{%trans "Enter your credit card number" %}';
+
+    (function () {
+        window.stripeKey = "{{stripe_key}}";
+        window.current_lan = "{{LANGUAGE_CODE}}";
+    })();
+</script>
+{%endif%}
+
+{% if credit_card_data.last4 and credit_card_data.cc_brand %}
+<script type="text/javascript">
+    (function () {
+        window.hasCreditcard = true;
+    })();
+</script>
+{%endif%}
+
+{%endblock%}

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">

datacenterlight/views.py

@@ -406,7 +406,7 @@ class WhyDataCenterLightView(IndexView):
 
 
 class PaymentOrderView(FormView):
-    template_name = 'hosting/payment.html'
+    template_name = 'datacenterlight/landing_payment.html'
     form_class = BillingAddressForm
 
     def get_form_kwargs(self):
@@ -478,7 +478,7 @@ class PaymentOrderView(FormView):
 
 class OrderConfirmationView(DetailView):
     template_name = "datacenterlight/order_detail.html"
-    payment_template_name = 'hosting/payment.html'
+    payment_template_name = 'datacenterlight/landing_payment.html'
     context_object_name = "order"
     model = HostingOrder
 

hosting/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-08-31 23:46+0530\n"
+"POT-Creation-Date: 2017-09-02 03:08+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -73,7 +73,7 @@ msgid "Mwst-Nummer: CHE-109.549.333 MWST"
 msgstr ""
 
 msgid "Total:"
-msgstr ""
+msgstr "Gesamt:"
 
 #, python-format
 msgid "Alles Preise in CHF mit 8%% Mehrwertsteuer."
@@ -242,12 +242,21 @@ msgstr "Datum"
 msgid "Status:"
 msgstr ""
 
+msgid "Approved"
+msgstr "Akzeptiert"
+
+msgid "Declined"
+msgstr "Abgelehnt"
+
 msgid "Billed To:"
 msgstr "Rechnungsadresse"
 
 msgid "Payment Method:"
 msgstr "Bezahlmethode"
 
+msgid "ending in"
+msgstr "endend in"
+
 msgid "Order summary"
 msgstr "Bestellungsübersicht"
 
@@ -458,7 +467,7 @@ msgid "Virtual Machines"
 msgstr "Virtuelle Maschinen"
 
 msgid "To create a new virtual machine, click \"Create VM\""
-msgstr ""
+msgstr "Um eine neue VM zu erzeugen, klicke \"Neue VM erzeugen\""
 
 msgid "CREATE VM"
 msgstr "NEUE VM"
@@ -507,12 +516,6 @@ msgstr "Kontaktiere den Data Center Light Support."
 #~ msgid "Your SSH Keys"
 #~ msgstr "Deine SSH Keys"
 
-#~ msgid "Approved"
-#~ msgstr "Akzeptiert"
-
-#~ msgid "Declined"
-#~ msgstr "Abgelehnt"
-
 #~ msgid "Cancel Order"
 #~ msgstr "Bestellung stornieren"
 

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;
@@ -103,7 +109,7 @@
     text-align: center;
     width: 100%;
     float: left;
-    padding: 0px 40px 15px 30px;
+    padding: 0px 30px 15px 30px;
 }
 .modal-body .modal-icon i {
     font-size: 80px;
@@ -111,7 +117,7 @@
     color: #999;
 }
 .modal-body .modal-icon {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 .modal-title {
     margin: 0;
@@ -122,9 +128,12 @@
     font-weight: 300;
 }
 .modal-text {
-    padding-top: 15px;
+    padding-top: 5px;
     font-size: 16px;
 }
+.modal-text p:not(:last-of-type){
+	margin-bottom: 5px;
+}
 .modal-footer {
     border-top: 0px solid #e5e5e5;
     width: 100%;
@@ -132,11 +141,8 @@
     text-align: center;
     padding: 15px 15px;
 }
-.modal-footer button[type="submit"] {
-  min-width: 80px;
-}
 @media (min-width: 1300px) {
-    .modal-dialog {/*     top: 30%; */width: 35%;}
+    .modal-dialog {/*     top: 30%; */width: 40%;}
 }
 @media (max-width: 1299px) {
     .modal-dialog {
@@ -234,3 +240,7 @@
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
 }
+
+.btn-wide {
+	min-width: 100px;
+}

hosting/static/hosting/css/landing-page.css

@@ -4,20 +4,6 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-/*@font-face {
-    font-family: 'Lato-Regular';
-    src: url('../fonts/Lato/Lato-Regular.ttf');
-}
-
-@font-face {
-    src: url('../fonts/Lato/Lato-Black.ttf');
-}
-
-@font-face {
-    font-family: 'Lato-Light';
-    src: url('../fonts/Lato/Lato-Light.ttf');
-}*/
-
 body,
 html {
     width: 100%;
@@ -39,11 +25,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 +74,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 +800,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,

hosting/static/hosting/css/user_keys.css

@@ -163,8 +163,8 @@
      /* margin-left: 0; */
     }
     .col-md-12, .col-sm-12{
-        padding-left: 5px;
+        /*padding-left: 5px;*/
-        padding-right: 5px;
+        /*padding-right: 5px;*/
     }
 }
 @media (max-width: 360px){
@@ -172,8 +172,8 @@
         /* width: 100% !important; */
     }
     .container {
-        padding-right: 5px;
+        /*padding-right: 5px;
-        padding-left: 5px;
+        padding-left: 5px;*/
     }
 }
 .dashboard-choice-container {
@@ -299,6 +299,7 @@
 }
 .key_contain {
     word-break: break-all;
+    margin-bottom: 15px;
 }
 .custom_form_button{
     border-radius: 0;

hosting/static/hosting/fonts/Lato/OFL.txt

@@ -1,92 +0,0 @@
-Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

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
      */

hosting/templates/hosting/base_short.html

@@ -58,12 +58,14 @@
             <div class="container topnav">
                 <!-- Brand and toggle get grouped for better mobile display -->
                 <div class="navbar-header">
+                    {% if request.user.is_authenticated %}
                         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                             <span class="sr-only">Toggle navigation</span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                         </button>
+                    {% endif %}
                     <a class="navbar-brand topnav" href="{% if site_url %}{{site_url}}{% else %}{{ request.session.hosting_url}}{% endif %}"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
                 </div>
                 {% if request.user.is_authenticated %}

hosting/templates/hosting/order_detail.html

@@ -29,9 +29,11 @@
                         <strong>{% trans "Date"%}:</strong><br>
                         <span id="order-created_at">{{order.created_at|date:'Y-m-d H:i'}}</span><br><br>
                         <strong>{% trans "Status:"%}</strong><br>
-                        <strong class="{% if order.status == 'Approved' %}text-success
+                        {% if order.status == 'Approved' %}
-                                       {%else%} text-danger
+                            <strong class="text-success">{% trans "Approved" %}</strong>
-                                       {% endif %}">{{order.status}}</strong>
+                        {% else %}
+                            <strong class="text-danger">{% trans "Declined" %}</strong>
+                        {% endif %}
                         <br><br>
                     </address>
 
@@ -50,7 +52,7 @@
     			<div class="col-xs-6">
     				<address>
     					<strong>{% trans "Payment Method:"%}</strong><br>
-    					{{order.cc_brand}} ending **** {{order.last4}}<br>
+    					{{order.cc_brand}} {% trans "ending in" %} **** {{order.last4}}<br>
     					{{user.email}}
     				</address>
     			</div>

hosting/templates/hosting/orders.html

@@ -5,7 +5,7 @@
 {% block content %}
 <div class="dashboard-container">
     <div class="dashboard-container-head">
-        <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Orders" %}</h3>
+        <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Bills" %}</h3>
         {% if messages %}
             <div class="alert alert-warning">
                 {% for message in messages %}
@@ -34,9 +34,9 @@
                     <td class="xs-td-smallhalf" data-header="{% trans 'Amount' %}">{{ order.price }}</td>
                     <td data-header="{% trans 'Status' %}">
                         {% if order.approved %}
-                            <span class="vm-status-active"><strong>Approved</strong></span>
+                            <span class="vm-status-active"><strong>{% trans "Approved" %}</strong></span>
                         {% else %}
-                            <span class="vm-status-failed"><strong>Declined</strong></span>
+                            <span class="vm-status-failed"><strong>{% trans "Declined" %}</strong></span>
                         {% endif %}
                     </td>
                     <td class="text-right last-td">

hosting/templates/hosting/payment.html

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

hosting/templates/hosting/user_keys.html

@@ -33,8 +33,7 @@
                 <tr>
                     <td scope="row">{{user_key.name}}</td>
                     <td>
-                        <button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal"
+                        <button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal" data-target="#Modal{{ user_key.id }}" style="color: #717274">
-                                data-target="#Modal{{ user_key.id }}" style="color: #717274">
                             <span class="pc-only">{% trans "Delete" %}</span>
                             <span class="mob-only"><i class="fa fa-trash"></i></span>
                         </button>
@@ -42,20 +41,18 @@
                             <div class="modal-dialog" role="document">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <button type="button" class="close" data-dismiss="modal"
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">&times;</span></button>
-                                                aria-label="Confirm"><span
-                                                aria-hidden="true">&times;</span>
-                                        </button>
                                     </div>
                                     <div class="modal-body">
                                         <div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
                                         <h4 class="modal-title" id="ModalLabel">{% trans "Delete SSH Key"%}</h4>
-                                        <p class="modal-text">{% trans "Do you want to delete this key?"%}</p>
+                                        <div class="modal-text">
+                                            <p>{% trans "Do you want to delete this key?"%}</p>
+                                        </div>
                                         <form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
                                             {% csrf_token %}
                                             <div class="modal-footer">
-                                                <button type="submit" class="btn btn-danger">{% trans "Delete"%}
+                                                <button type="submit" class="btn btn-danger btn-wide">{% trans "Delete"%}</button>
-                                                </button>
                                             </div>
                                         </form>
                                     </div>
@@ -64,23 +61,18 @@
                         </div>
                      </td>
                     <td>
-                        <p type="button"  data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}">
+                        <p data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}">
                             <a href="#">{% trans "Show" %}</a>
                         </p>
                         <div class="modal fade" id="Modal_public_key{{user_key.id }}" tabindex="-1" role="dialog">
                             <div class="modal-dialog" role="document">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <button type="button" class="close" data-dismiss="modal"
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">&times;</span></button>
-                                                aria-label="Confirm"><span
-                                                aria-hidden="true">&times;</span>
-                                        </button>
                                     </div>
                                     <div class="modal-body">
                                         <h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public SSH Key" %}</h4>
                                         <p class="key_contain" style="margin-top: 10px;">{{ user_key.public_key }}</p>
-                                        <div class="modal-footer">
-                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -90,8 +82,7 @@
                     <td>
                         {% if user_key.private_key %}
                         <form action="{{ user_key.private_key.url }}">
-                            <button style="color: #717274" type="submit" class="btn btn-default" data-toggle="modal"
+                            <button style="color: #717274" type="submit" class="btn btn-default">
-                                    >
                                 <span class="pc-only">{% trans "Download" %}</span>
                                 <span class="mob-only"><i class="fa fa-download"></i></span>
                             </button>

hosting/templates/hosting/virtual_machine_detail.html

@@ -101,9 +101,9 @@
 						<p>{% trans "Do you want to cancel your Virtual Machine" %} ?</p>
 						<p><strong>{{virtual_machine.name}}</strong></p>
 					</div>
-	            </div>
 		            <div class="modal-footer">
-	                <a class="btn btn-danger btn-ok">{% trans "OK" %}</a>
+		                <a class="btn btn-danger btn-ok btn-wide">{% trans "OK" %}</a>
+		            </div>
 	            </div>
 	        </div>
 	    </div>