Design Changes + moving the css changes to a new file

openlibrary/plugins/openlibrary/js/ol.js

@@ -157,7 +157,7 @@ export function initPreviewButton() {
 }
 
 export function initWebsiteTranslationOptions() {
-    $('#locale-options a').on('click', function (event) {
+    $('#locale-options li a').on('click', function (event) {
         event.preventDefault();
         const locale = $(this).data('lang-id');
         setValueInCookie('HTTP_LANG', locale);

openlibrary/templates/lib/nav_foot.html

@@ -47,17 +47,25 @@ <h2>$:_('Help')</h2>
           <a class="footer-icons__github" href="https://github.com/internetarchive/openlibrary">github</a>
         </aside>
       </div>
-      <div id="footer-locale-menu">
-        <button class="dropbtn">$_('Language')</button>
-        <div class="dropdown-content" id="locale-options">
-            <a href="#" data-lang-id="cs" title="$_('Czech')">Čeština (cs)</a>
-            <a href="#" data-lang-id="de" title="$_('German')">Deutsch (de)</a>
-            <a href="#" data-lang-id="en" title="$_('English')">English (en)</a>
-            <a href="#" data-lang-id="es" title="$_('Spanish')">Español (es)</a>
-            <a href="#" data-lang-id="fr" title="$_('French')">Français (fr)</a>
-            <a href="#" data-lang-id="hr" title="$_('Croatian')">Hrvatski (hr)</a>
-            <a href="#" data-lang-id="te" title="$_('Telugu')">తెలుగు (te)</a>
-        </div>
+      <div class="language-component" id="footer-locale-menu">
+        <li class="language-menu checkbox-menu">
+            <label for="toggle-language-menu" class="language-menu-button">
+              <h2>$:_('Language')
+                <img class="translate-icon" src="/static/images/language-icon.svg" title="Change Website Language" alt="Change Website Language"/>
+              </h2>
+            </label>
+          <input role="button" type="checkbox" class="language-component__checkbox" id="toggle-language-menu">
+          <div class="navigation-dropdown-component language-dropdown-component"> 
+            <ul class="dropdown-menu" id="locale-options">
+              <li><a href="#" data-lang-id="cs" title="$_('Czech')">Čeština (cs)</a> </li>
+              <li><a href="#" data-lang-id="de" title="$_('German')">Deutsch (de)</a> </li>
+              <li><a href="#" data-lang-id="en" title="$_('English')">English (en)</a></li>
+              <li><a href="#" data-lang-id="es" title="$_('Spanish')">Español (es)</a></li>
+              <li><a href="#" data-lang-id="fr" title="$_('French')">Français (fr)</a></li>
+              <li><a href="#" data-lang-id="hr" title="$_('Croatian')">Hrvatski (hr)</a></li>
+              <li><a href="#" data-lang-id="te" title="$_('Telugu')">తెలుగు (te)</a></li>
+            </ul>
+          </li>  
       </div>
     </div>
     <hr>

static/css/components/footer-locale.less

@@ -0,0 +1,58 @@
+
+.language-component__checkbox {
+    opacity: 0;
+    display: contents;
+
+    & ~ .navigation-dropdown-component ul {
+      display: none;
+    }
+
+    // stylelint-disable-next-line selector-max-specificity
+    &:checked ~ .navigation-dropdown-component ul {
+      display: block;
+    }
+}
+.language-dropdown-component {
+  margin: 0 !important;
+  li {
+    padding: 3px 0;
+    margin: 0;
+  }
+}
+.language-component {
+  .translate-icon {
+    vertical-align: middle;
+    width: 1.5em;
+  }
+}
+.dropdown-menu {
+  width: 130px;
+  background-color: @light-beige;
+  border: 1px solid @dark-beige;
+  border-radius: 3px;
+  cursor: pointer;
+
+  li {
+    border-bottom: 1px solid @beige-two;
+
+    // stylelint-disable max-nesting-depth, selector-max-specificity
+    &:last-child {
+      border: none;
+    }
+
+    &:hover {
+      background-color: @white;
+    }
+
+    a {
+      text-decoration: none;
+      color: @dark-grey;
+      white-space: nowrap;
+      font-size: .9em;
+      padding: 0 10px;
+      display: block;
+    }
+    // stylelint-enable max-nesting-depth, selector-max-specificity
+  }
+}
+

static/css/js-all.less

@@ -14,6 +14,7 @@
 @import (less) "components/read-statuses.less";
 @import (less) "components/manage-covers.less";
 @import (less) "components/throbber.less";
+@import (less) "components/footer-locale.less";
 
 // Loading indicators
 @import (less) "components/buttonCta--js.less";