From 8d8b387cc7979d999eb7c1932fb28d896a658dc8 Mon Sep 17 00:00:00 2001
From: Henry Bravo <henry.bravo89@gmail.com>
Date: Sat, 27 May 2017 12:49:42 -0500
Subject: [PATCH] Fix select languages in dcl

---
 .../datacenterlight/css/landing-page.css      | 67 ++++++++++++++++++-
 .../templates/datacenterlight/index.html      | 22 +++++-
 .../templates/datacenterlight/pricing.html    | 29 ++++----
 datacenterlight/views.py                      |  4 ++
 4 files changed, 106 insertions(+), 16 deletions(-)

diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 74671e1a..4a214c61 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/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;
     }
diff --git a/datacenterlight/templates/datacenterlight/index.html b/datacenterlight/templates/datacenterlight/index.html
index 29539f2a..f3c7a9a0 100755
--- a/datacenterlight/templates/datacenterlight/index.html
+++ b/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>
 
 
diff --git a/datacenterlight/templates/datacenterlight/pricing.html b/datacenterlight/templates/datacenterlight/pricing.html
index 94c29119..6c1be74c 100644
--- a/datacenterlight/templates/datacenterlight/pricing.html
+++ b/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;">
-                        {% if LANGUAGE_CODE == 'en-us'%} 
-                            <option selected="selected" value="{{base_url}}/en-us/datacenterlight/">English</option>
-                        {% else %}
-                            <option value="{{base_url}}/en-us/datacenterlight/">English</option>
-                        {% endif %}
-                        {% if LANGUAGE_CODE == 'de'%} 
-                            <option selected="selected" value="{{base_url}}/de/datacenterlight/">Deutsch</option>
-                        {% else %}
-                            <option value="{{base_url}}/de/datacenterlight/">Deutsch</option>
-                        {% endif %}         
+                  <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/pricing" >Deutsch</a>
+                          {% else %}
+                          <a class="url" href="{{base_url}}/en-us/datacenterlight/pricing" >English</a>
+                          {% endif %}
                         
-                      </select> 
+                      </div>
+                    </li>
                 </ul>
 
 
diff --git a/datacenterlight/views.py b/datacenterlight/views.py
index b68f7408..75c72202 100644
--- a/datacenterlight/views.py
+++ b/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)
+
+