💻 Small redesign language menu bar (#5632)

Fixes #5622 https://github.com/hedyorg/hedy/assets/48122190/7ba6f801-2f9b-427d-b50f-00449324bddd
hedyorg · Jun 27, 2024 · 735591f · 735591f
1 parent 76e1701
commit 735591f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/templates/incl/menubar.html b/templates/incl/menubar.html
@@ -54,7 +54,7 @@
                 <svg id="language_arrow" class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
             </div>
           </a>
-          <div class="dropdown-menu dropdown-blue" id="language_dropdown" style="display: none;"
+          <div class="dropdown-menu dropdown-blue h-96 overflow-auto" id="language_dropdown" style="display: none;"
           _="on mutation of @style
                 set arrow to #language_arrow
                 if *display == 'none'
@@ -63,13 +63,12 @@
                     add .rotate-180 to arrow
                 end">
               <div class="mb-4">
-                  <input id="search_language" placeholder="{{_('search')}}" class="border text-black border-gray-500 rounded h-8 px-2 w-full">
-              </div>              
-              <div class="flex flex-row flex-wrap w-min justify-start content-start items-start" style="max-height: {{((other_languages()|length)//3 + ((other_languages()|length)%3 > 0)*1)*3}}rem; width: 39rem;">
+                  <input id="search_language" placeholder="{{_('search')}} {{other_languages()|length}}" class="border text-black border-gray-500 rounded h-8 px-2 w-full">
+              </div>
+              <div class="flex flex-row flex-wrap w-min justify-start content-start items-start">         
                 {% for lang in other_languages() %}
                     <div class="dropdown-item language" data-english="{{ lang.english }}" onclick="hedyApp.change_language ('{{lang.lang}}');event.preventDefault();" data-cy="switch_lang_{{lang.lang}}">{{ lang.sym }}</div>
                 {% endfor %}
-
                 <a id="add_language_btn" class="add-language-item language" href="https://hosted.weblate.org/new-lang/hedy/adventures/">{{_('add_your_language')}}</a>
               </div>
           </div>

diff --git a/tests/cypress/e2e/home_page/language_search/language_choices_exist.cy.js b/tests/cypress/e2e/home_page/language_search/language_choices_exist.cy.js
@@ -4,9 +4,13 @@ describe('Language choice button', () => {
   it('passes', () => {
     goToHome();
     cy.get('.dropdown > .menubar-text').click();
+    cy.get('#language_dropdown').should('be.visible');
 
     cy.get('.language').each(($el) => {
-      cy.wrap($el).should('be.visible').should('be.not.empty').should('be.not.disabled');
-    })  
+      cy.wrap($el).scrollIntoView({ easing: 'linear', duration: 100 })
+      .should('be.visible')
+      .should('be.not.empty')
+      .should('be.not.disabled');
+    })
   })
-});
+});