Fix select languages in dcl

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

@@ -136,7 +136,7 @@ h6 {
     cursor: pointer;
 }
 .navbar-right {
-    margin-right: 0px;
+    margin-right: 10px;
 }
 .navbar-default .btn-link {
     color: #fff;
@@ -144,6 +144,52 @@ h6 {
 .navbar-default .btn-link:hover {
     color: #fff !important;
 }
+.nav-language{
+    position: relative;
+}
+.nav-language .select-language{
+    padding: 15px 10px;
+    color: #777;
+}
+.navbar-transparent .nav-language .select-language{
+    color: #fff;
+}
+
+.nav-language .select-language span{
+    margin-left: 5px;
+    margin-right: 5px;
+
+}
+.nav-language .drop-language{
+    position: absolute;
+    top: 45px;
+    left: -8px;
+    background: #fff;
+    width: 100px;
+    height: 40px;
+    padding: 9px 10px;
+    -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    display: none;
+    z-index: 100;
+    /* margin-left: 10px; */
+    text-align: center;
+    border-radius: 4px;
+}
+.nav-language .drop-language a{
+   cursor: pointer;
+}
+.navbar-transparent .nav-language .drop-language{
+    background: transparent;
+    border: 1px solid #fff;
+}
+.navbar-transparent .nav-language .drop-language a{
+    color: #fff;
+}
+.nav-language:hover .drop-language{
+    display: block;
+}
 .intro-header {
     height: 100vh;
     text-align: center;
@@ -250,7 +296,7 @@ h6 {
     bottom: 0;
     left: 0;
     right: 0;
-    background: rgba(90, 116, 175, 0.7);
+    background: rgba(90, 116, 175, 0.8);
 }
 .intro-pricing .intro-message .section-heading{
     font-size: 45px;
@@ -693,6 +739,23 @@ h6 {
         font-size: 15px;
         color: #777;
     }
+    .nav-language:hover{
+        height: 80px;    
+    }
+    .navbar-transparent .nav-language .select-language {
+        color: #777;
+    }
+    .navbar-transparent .nav-language .drop-language a {
+        color: #777;
+    }
+    .navbar-transparent .nav-language .drop-language {
+        background: #fff;
+        /* border: 1px solid #fff; */
+        z-index: 100000;
+        left: 9px;
+        border: 1px solid rgba(119, 119, 119, 0.4);
+        box-shadow: none;
+    }
     .split-section {
         padding: 10px 0;
     }

datacenterlight/templates/datacenterlight/index.html

@@ -74,7 +74,7 @@
                         <a class="url" href="javascript:void(0)" data-url="#contact"  >{% trans "Contact" %}</a>
                      </li>
 
-                    <select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
+                <!--     <select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
                         {% if LANGUAGE_CODE == 'en-us'%} 
                             <option selected="selected" value="{{base_url}}/en-us/datacenterlight/">English</option>
                         {% else %}
@@ -86,7 +86,25 @@
                             <option value="{{base_url}}/de/datacenterlight/">Deutsch</option>
                         {% endif %}         
                         
-                      </select> 
+                      </select>  -->
+                    <li class="nav-language">
+                      <div class="select-language">
+                          {% if LANGUAGE_CODE == 'en-us'%} 
+                          <span>English</span>
+                          {% else %}
+                          <span>Deutsch</span>
+                          {% endif %}
+                          <i class="fa fa-globe" aria-hidden="true"></i>
+                      </div>
+                      <div class="drop-language">
+                          {% if LANGUAGE_CODE == 'en-us'%} 
+                          <a class="url" href="{{base_url}}/de/datacenterlight" >Deutsch</a>
+                          {% else %}
+                          <a class="url" href="{{base_url}}/en-us/datacenterlight" >English</a>
+                          {% endif %}
+                        
+                      </div>
+                    </li>
                 </ul>
 
 

datacenterlight/templates/datacenterlight/pricing.html

@@ -74,19 +74,24 @@
                         <a class="url" href="javascript:void(0)" data-url="#contact"  >{% trans "Contact" %}</a>
                      </li> -->
 
-                    <select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
+                  <li class="nav-language">
-                        {% if LANGUAGE_CODE == 'en-us'%} 
+                      <div class="select-language">
-                            <option selected="selected" value="{{base_url}}/en-us/datacenterlight/">English</option>
+                          {% if LANGUAGE_CODE == 'en-us'%} 
-                        {% else %}
+                          <span>English</span>
-                            <option value="{{base_url}}/en-us/datacenterlight/">English</option>
+                          {% else %}
-                        {% endif %}
+                          <span>Deutsch</span>
-                        {% if LANGUAGE_CODE == 'de'%} 
+                          {% endif %}
-                            <option selected="selected" value="{{base_url}}/de/datacenterlight/">Deutsch</option>
+                          <i class="fa fa-globe" aria-hidden="true"></i>
-                        {% else %}
+                      </div>
-                            <option value="{{base_url}}/de/datacenterlight/">Deutsch</option>
+                      <div class="drop-language">
-                        {% endif %}         
+                          {% if LANGUAGE_CODE == 'en-us'%} 
+                          <a class="url" href="{{base_url}}/de/datacenterlight/pricing" >Deutsch</a>
+                          {% else %}
+                          <a class="url" href="{{base_url}}/en-us/datacenterlight/pricing" >English</a>
+                          {% endif %}
                         
-                      </select> 
+                      </div>
+                    </li>
                 </ul>
 
 

datacenterlight/views.py

@@ -7,6 +7,7 @@ from django.core.urlresolvers import reverse_lazy, reverse
 from utils.mailer import BaseEmail
 from django.shortcuts import render
 from django.shortcuts import redirect
+from django.utils.translation import get_language, get_language_info
 
 from opennebula_api.models import OpenNebulaManager
 from opennebula_api.serializers import VirtualMachineTemplateSerializer
@@ -24,6 +25,7 @@ class PricingView(TemplateView):
 
             context = {
                 'templates': VirtualMachineTemplateSerializer(templates, many=True).data,
+                'languages': getlanguages()
             }
         except:
             messages.error( request,
@@ -241,3 +243,5 @@ class IndexView(CreateView):
 
         messages.add_message(self.request, messages.SUCCESS, self.success_message)
         return super(IndexView, self).form_valid(form)
+
+