Merge pull request #2042 from Carner-Lin/language-dropdown

Make language dropdown scrollable (limit height; overflow-y:auto)

Author: rolandgeider

wger/core/static/css/language-menu.css

@@ -0,0 +1,11 @@
+.language-menu{
+    max-height: 60vh;
+    overflow-y: auto;
+    width: min(92vw, 420px);
+    overscroll-behavior: contain;
+}
+
+.language-menu .dropdown-item{
+    padding: .5rem .75rem;
+}
+

wger/core/templates/template.html

@@ -62,6 +62,8 @@
         id="react-css"
     >
 
+    <link rel="stylesheet" href="{% static 'css/language-menu.css' %}">
+
     <link rel="icon" href="{% static 'images/favicon.png' %}" type="image/png">
 
     {% compress js %}
@@ -209,7 +211,7 @@
                             <span class="caret"></span>
                         </button>
 
-                        <ul class="dropdown-menu" aria-labelledby="btnGroupLanguages">
+                        <ul class="dropdown-menu language-menu" aria-labelledby="btnGroupLanguages">
                             {% for language in languages %}
                                 {% language_select language %}
                             {% endfor %}