Move lang to top

dmoj/settings.py

@@ -359,22 +359,8 @@ LOCALE_PATHS = [
 ]
 
 LANGUAGES = [
-    ("de", _("German")),
     ("en", _("English")),
-    ("es", _("Spanish")),
-    ("fr", _("French")),
-    ("hr", _("Croatian")),
-    ("hu", _("Hungarian")),
-    ("ja", _("Japanese")),
-    ("ko", _("Korean")),
-    ("pt", _("Brazilian Portuguese")),
-    ("ro", _("Romanian")),
-    ("ru", _("Russian")),
-    ("sr-latn", _("Serbian (Latin)")),
-    ("tr", _("Turkish")),
     ("vi", _("Vietnamese")),
-    ("zh-hans", _("Simplified Chinese")),
-    ("zh-hant", _("Traditional Chinese")),
 ]
 
 MARKDOWN_ADMIN_EDITABLE_STYLE = {

resources/base.scss

@@ -719,8 +719,37 @@ math {
     color: darkgreen;
 }
 
+#nav-lang-icon {
+    color: gray;
+    cursor: pointer;
+}
+#nav-lang-icon:hover {
+    color: darkgray;
+}
+#lang-dropdown {
+    padding: 4px 0;
+    border-radius: 4px;
+    border: 0.5px solid lightgray;
+    margin-top: 1px;
+    background: white;
+    display: none;
+}
+
+.lang-dropdown-item {
+    padding-bottom: 0.3em;
+    padding-left: 0.4em;
+    font-size: 0.9em;
+    cursor: pointer;
+}
+
+.lang-dropdown-item:hover {
+    background: lightgray;
+}
+
 .navbar-icons {
+    .navbar-icon {
         font-size: 1.6em;
+    }
     float: left;
     margin-right: 0.3em;
 }
@@ -738,6 +767,14 @@ math {
     font-family: monospace;
 }
 
+.sub-lang {
+    color: black;
+    font-size: x-small;
+    margin-left: -12px;
+    font-family: monospace;
+    text-transform: uppercase;
+}
+
 @media (max-width: 500px) {
     #notification {
         margin-top: 0.6em;
@@ -787,12 +824,12 @@ math {
 
 @media (max-width: 799px) {
     .navbar-icons {
-        margin-top: 2px;
+        margin-top: 6px;
     }
 }
 
 @media (min-width: 800px) {
     .navbar-icons {
-        margin-top: 7px;
+        margin-top: 12px;
     }
 }

templates/base.html

@@ -82,6 +82,7 @@
         <script src="{{ static('libs/jquery.unveil.js') }}"></script>
         <script src="{{ static('libs/moment.js') }}"></script>
         <script src="{{ static('libs/select2/select2.js') }}"></script>
+        <script src="https://unpkg.com/@popperjs/core@2"></script>
         {% include "extra_js.html" %}
         <script src="{{ static('common.js') }}"></script>
         <script>
@@ -172,6 +173,21 @@
         <script type="text/javascript">{{ request.profile.user_script|safe }}</script>
     {% endif %}
 
+    <script>
+        $(function() {
+            const popperInstance = Popper.createPopper($('#nav-lang-icon'), $('#lang-dropdown'));
+            $('#nav-lang-icon').click(function(e) {
+                e.preventDefault();
+                $('#lang-dropdown').toggle();
+                popperInstance.update();
+            })
+            $('.lang-dropdown-item').click(function() {
+                $('select[name="language"]').val($(this).attr('value'));
+                $('#form-lang').submit();
+            })
+        });
+    </script>
+
     <noscript>
         <style>
             #content {
@@ -212,8 +228,8 @@
             {% endfor %}
         </ul>
         <div style="float: right; display: inline; font-size: larger;">
-            {% if request.user.is_authenticated %}
             <span class="navbar-icons">
+                {% if request.user.is_authenticated %}
                 <span title="{{_('Chat')}}">
                     <a id="chat-icon" href="{{ url('chat', '') }}" class="icofont-wechat navbar-icon" aria-hidden="true">
                         {% set unread_chat = request.profile.count_unread_chat_boxes %}
@@ -231,11 +247,22 @@
                     {% endif %}
                     </a>
                 </span>
-            </span>
                 {% endif %}
+                <span title="{{_('Language')}}">
+                    <a href="#" class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true">
+                    <sub class="sub-lang">{{LANGUAGE_CODE}}</sub>
+                    </a>
+                    <div id="lang-dropdown" role="tooltip">
+                        {% for language in language_info_list(LANGUAGES) %}
+                            <div value="{{ language.code }}" class="lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}">
+                                {{ language.name_local }}
+                            </div>
+                        {% endfor %}
+                    </div>
+                </span>
+            </span>
             <span id="user-links">
                 {% if request.user.is_authenticated %}
-                    
                     <ul>
                         <li>
                             <a href="{{ url('user_page') }}">
@@ -341,7 +368,7 @@
             {% if i18n_config.footer %}
                 {{ i18n_config.footer|safe }} |
             {% endif %}
-            <form action="{{ url('set_language') }}" method="post" style="display: inline">
+            <form action="{{ url('set_language') }}" method="post" style="display: inline" id="form-lang">
                 {% csrf_token %}
             <input name="next" type="hidden" value="{{ request.get_full_path() }}">
             <select name="language" onchange="form.submit()" style="height: 1.5em">