Dropdown Alignment for locale names - Fix #19, #127

assets/css/style.css

@@ -45,6 +45,67 @@ h2 {
     margin-top: 7px;
 }
 
+#localeDropdown {
+    height: 300px;
+    margin-top: -1px;
+    min-width: 0 !important; /* sass-lint:disable-line no-important */
+    overflow-y: scroll;
+    width: 131px;
+}
+
+#localeDropdown li > a[dir='rtl'] {
+    padding-left: 105px;
+    padding-right: 5px;
+    text-align: right;
+}
+
+#localeDropdown li > a[dir='ltr'] {
+    padding-left: 5px;
+    padding-right: 105px;
+    text-align: left;
+}
+
+#localeDropdownSelect:hover  {
+    cursor: default;
+}
+
+#localeDropdown li > a:hover {
+    background-color: #446e9b;
+    color: #fff;
+    cursor: default;
+}
+
+#localeDropdown::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+}
+
+#localeDropdown::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+    background-color: rgba(0, 0, 0, .5);
+    border-radius: 4px;
+}
+
+#localeDropdownSelect {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    color: #000;
+    margin-top: 5px;
+    padding: 0;
+    width: 130px;
+}
+
+#localeName {
+    padding-left: 7px;
+    padding-right: 7px;
+}
+
+#localeDropdownCaret {
+    position: absolute;
+    top: 50%;
+}
+
 .nav-pills { /* sass-lint:disable-line class-name-format */
     cursor: pointer;
 }

assets/js/localization.js

@@ -76,16 +76,29 @@ $(document).ready(function () {
             console.warn('No config.LOCALES');
         }
         $('.localeSelect').val(locale);
+        $('#localeName').text($('#localeDropdown').data(locale));
         localizeEverything(localizedHTML);
         persistChoices('localization');
     });
 
     $('.localeSelect').change(function () {
         locale = $(this).val();
+        $('#localeName').text($('#localeDropdown').data(locale));
+        localizeCurrentInterface();
+    });
+
+    $('#localeDropdown li > a').click(function () {
+        locale = $(this).data('locale');
+        $('.localeSelect').val(locale);
+        $('#localeName').text(this.text);
+        localizeCurrentInterface();
+    });
+
+    function localizeCurrentInterface() {
         sendEvent('localization', 'localize', locale);
         localizeEverything(false);
         persistChoices('localization');
-    });
+    }
 
     function localizeEverything(stringsFresh) {
         localizeInterface();
@@ -114,6 +127,7 @@ $(document).ready(function () {
                 window.location.hash;
             window.history.replaceState({}, document.title, newURL);
         }
+        $('#localeDropdownCaret').css('left', rtlLanguages.indexOf(locale) !== -1 ? '5%' : '90%');
     }
 });
 
@@ -169,7 +183,6 @@ function getLocale() {
             deferred.resolve();
         }
     }
-
     return deferred.promise();
 }
 
@@ -212,13 +225,24 @@ function getLocales() {
             return a[1].toLowerCase().localeCompare(b[1].toLowerCase());
         });
         $('.localeSelect').empty();
+        $('#localeDropdown').empty();
         $.each(localePairs, function () {
+            var isRtlLanguage = (rtlLanguages.indexOf(this[0]) !== -1);
             $('.localeSelect').append(
-                $('<option></option>')
+                $('<option>')
                     .val(this[0])
                     .text(this[1])
-                    .prop('dir', rtlLanguages.indexOf(this[0]) !== -1 ? 'rtl' : 'ltr')
+                    .prop('dir', isRtlLanguage ? 'rtl' : 'ltr')
             );
+
+            $('#localeDropdown').append(
+                $('<li></li>').append(
+                    $('<a>')
+                        .data('locale', this[0])
+                        .text(this[1])
+                        .prop('dir', isRtlLanguage ? 'rtl' : 'ltr')
+                )
+            ).data(this[0], this[1]);
         });
     }
 

index.html.in

@@ -90,9 +90,11 @@
                       <p data-text="tagline" class="tagline"></p>
                   </div>
                   <div style="width: 35%" class="pull-right hidden-xs">
-                      <!-- <i class="icon-globe localeGlobe pull-right"></i> -->
                       <i class="fa fa-globe fa-2x fa-inverse pull-right localeGlobe" style="padding: 5px 5px 0px 0px"></i>
-                      <select class="localeSelect pull-right"><option> </option></select>
+                      <div class="dropdown pull-right">
+                          <button id="localeDropdownSelect" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="localeName" class="pull-left"></span><span class="caret" id="localeDropdownCaret"></span></button>
+                          <ul class="dropdown-menu" id="localeDropdown"></ul>
+                      </div>
                   </div>
                   <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
                     <li><a href="#translation" id="translationTarget" data-mode="translation" data-text="Translation" class="hide">Translation</a></li>