Merge PR66 (MGC) - Language selector

PR66 (MGC) - Language selector
sidarragac · Nov 7, 2024 · 5590811 · 5590811
2 parents 2258613 + adab2a0
commit 5590811
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 7 deletions.
diff --git a/admin/settings.py b/admin/settings.py
@@ -12,7 +12,7 @@
 
 from pathlib import Path
 import os
-from dotenv import load_dotenv, dotenv_values
+from dotenv import dotenv_values
 
 # Environment Variables
 KEYS = dotenv_values('.env')

diff --git a/admin/static/scripts/base.js b/admin/static/scripts/base.js
@@ -4,4 +4,13 @@ let subMenuu = document.getElementById("subMenuu");
 function toggleMenu(){
     subMenu.classList.toggle("open-menu");
     subMenuu.classList.toggle("open-menu");
+}
+
+function showTranslate(){
+    let translate = document.getElementById("google_translate_element");
+    if (translate.style.display === "block") {
+        translate.style.display = "none";
+    } else {
+        translate.style.display = "block";
+    }
 }
diff --git a/admin/static/styles/base.css b/admin/static/styles/base.css
@@ -143,4 +143,19 @@ dialog::backdrop {
 dialog {
   border-width: 0;
   border-radius: 30px;
+}
+
+.translator {
+  position: relative;
+}
+
+.googleTranslate{
+  display: none;
+  position: absolute;
+  top: 40px;
+  right: 10px;
+  background-color: #e9ecef;
+  padding: 5px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
 }
diff --git a/admin/templates/base.html b/admin/templates/base.html
@@ -16,7 +16,7 @@
         <div class="container-fluid d-flex justify-content-between">
             <a class="navbar-brand" href="{% url 'home' %}">
                 <img src="{% static 'images/logo.png' %}" alt="" height="30px" class="d-inline-block align-text-top" style="margin-right: 10px;">
-                JobJourney  
+                <span translate="no">JobJourney</span> 
             </a>
             <div class="d-flex flex-row">
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent">
@@ -57,11 +57,11 @@ <h3>{{ user }}</h3>
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                         <li class="nav-item">
-                            <a class="nav-link" aria-current="page" href="{% url 'home'%}">Home</a>
+                            <a class="nav-link" aria-current="page" href="{% url 'home'%}"><span translate="no">Home</span></a>
                         </li>
                         {% if not user.isCompany %}
                         <li class="nav-item listItem">
-                            <a class="nav-link" href="{% url 'interestForm'%}">Create Roadmap</a>
+                            <a class="nav-link" href="{% url 'interestForm'%}">Create <span translate="no"> Roadmap</span></a>
                         </li>
                         {% endif %}
                         <li class="nav-item">
@@ -72,6 +72,20 @@ <h3>{{ user }}</h3>
                             <a class="nav-link" href="{% url 'analytics'%}">Analytics</a>
                         </li>
                         {% endif %}
+                        <div class="translator nav-link d-flex">
+                            <div id="google_translate_element" class="googleTranslate"></div>
+                            <script type="text/javascript">
+                                function googleTranslateElementInit() {
+                                new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
+                                }
+                            </script>
+                            <li class="nav-item" onclick="showTranslate()">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16">
+                                    <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
+                                    <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
+                                </svg>
+                            </li>
+                        </div>
                         {% if not user.is_authenticated %}
                             <li class="nav-item">
                                 <a class="nav-link register-login" href="{% url 'register'%}">Register</a>
@@ -140,6 +154,7 @@ <h3>{{ user }}</h3>
     {% block scripts %}
     {% endblock scripts %}
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script src="{% static 'scripts/base.js' %}"></script>
 </body>
 </html>
diff --git a/roadMap/templates/home.html b/roadMap/templates/home.html
@@ -14,16 +14,15 @@
     {% block content %}
     <div class="contenedorPrimeraInfo">
         <div class="contenedorTitulo">
-            <h1>Welcome to JobJourney</h1>
+            <h1>Welcome to <span translate="no"> JobJourney</span></h1>
             <h3>The journey to your dream job</h3>
-            <a href="{% url 'interestForm'%}" class="botonCrearRoadmap">Create a roadmap</a>
+            <a href="{% url 'interestForm'%}" class="botonCrearRoadmap">Create a <span translate="no"> roadmap</span></a>
         </div>
         <div class="contenedorImagen">
             <img src="{% static 'images/roadmap.png' %}" alt="roadmap">
         </div>
     </div>
     {% endblock content %}
-
     {% block scripts %}
     {% endblock scripts %}
 </body>