Fix #574

Increase dropdown size; increase result set to 200 results (but set minimum query to 2 chars); add region name to second display line. This does mean that each result entry will contain 2 lines.
adapt-it · Apr 17, 2024 · da4d6b3 · da4d6b3
1 parent 3f3908c
commit da4d6b3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/www/js/views/ProjectViews.js b/www/js/views/ProjectViews.js
@@ -705,7 +705,7 @@ define(function (require) {
                     {
                         hint: true,
                         highlight: true,
-                        minLength: 1
+                        minLength: 2
                     },
                     {
                         name: 'languages',
@@ -723,7 +723,7 @@ define(function (require) {
                             return data.attributes.name;
                         },
                         source: this.languageMatches(this.theLangs),
-                        limit: 25,
+                        limit: 200,
                         templates: {
                             empty: ['<div>No languages found</div>'].join('\n'),
                             pending: ['<div>Searching...</div>'].join('\n'),
@@ -734,16 +734,22 @@ define(function (require) {
                                     strSuggestion += data.attributes.localname
                                     strSuggestion += '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
                                     strSuggestion += (data.attributes.name != null) ? data.attributes.name : data.attributes.names[0];
+                                    strSuggestion += (data.attributes.regionname != null) ? (" / " + data.attributes.regionname) : "";
                                     strSuggestion += '</span>';
                                 } else if (data.attributes.localnames != null && data.attributes.localnames.length > 0) {
                                     strSuggestion += data.attributes.localnames[0];
                                     strSuggestion += '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
                                     strSuggestion += (data.attributes.name != null) ? data.attributes.name : data.attributes.names[0];
+                                    strSuggestion += (data.attributes.regionname != null) ? (" / " + data.attributes.regionname) : "";
                                     strSuggestion += '</span>';
                                 } else if (data.attributes.name != null && data.attributes.name.length > 0) {
-                                    strSuggestion += data.attributes.name + '&nbsp;(' + data.attributes.tag + ')';
+                                    strSuggestion += data.attributes.name + '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
+                                    strSuggestion += (data.attributes.regionname != null) ? data.attributes.regionname : "";
+                                    strSuggestion += '</span>';
                                 } else {
-                                    strSuggestion += data.attributes.names[0] + '&nbsp;(' + data.attributes.tag + ')';
+                                    strSuggestion += data.attributes.names[0] + '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
+                                    strSuggestion += (data.attributes.regionname != null) ? data.attributes.regionname : "";
+                                    strSuggestion += '</span>';
                                 }
                                 // close out and return the suggestion
                                 strSuggestion += '</div>';;
@@ -778,7 +784,7 @@ define(function (require) {
                     {
                         hint: true,
                         highlight: true,
-                        minLength: 1
+                        minLength: 2
                     },
                     {
                         name: 'languages',
@@ -796,7 +802,7 @@ define(function (require) {
                             return data.attributes.name;
                         },
                         source: this.languageMatches(this.theLangs),
-                        limit: 25,
+                        limit: 200,
                         templates: {
                             empty: ['<div>No languages found</div>'].join('\n'),
                             pending: ['<div>Searching...</div>'].join('\n'),
@@ -807,16 +813,22 @@ define(function (require) {
                                     strSuggestion += data.attributes.localname
                                     strSuggestion += '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
                                     strSuggestion += (data.attributes.name != null) ? data.attributes.name : data.attributes.names[0];
+                                    strSuggestion += (data.attributes.regionname != null) ? (" / " + data.attributes.regionname) : "";
                                     strSuggestion += '</span>';
                                 } else if (data.attributes.localnames != null && data.attributes.localnames.length > 0) {
                                     strSuggestion += data.attributes.localnames[0];
                                     strSuggestion += '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
                                     strSuggestion += (data.attributes.name != null) ? data.attributes.name : data.attributes.names[0];
+                                    strSuggestion += (data.attributes.regionname != null) ? (" / " + data.attributes.regionname) : "";
                                     strSuggestion += '</span>';
                                 } else if (data.attributes.name != null && data.attributes.name.length > 0) {
-                                    strSuggestion += data.attributes.name + '&nbsp;(' + data.attributes.tag + ')';
+                                    strSuggestion += data.attributes.name + '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
+                                    strSuggestion += (data.attributes.regionname != null) ? data.attributes.regionname : "";
+                                    strSuggestion += '</span>';
                                 } else {
-                                    strSuggestion += data.attributes.names[0] + '&nbsp;(' + data.attributes.tag + ')';
+                                    strSuggestion += data.attributes.names[0] + '&nbsp;(' + data.attributes.tag + ')<span class=\"subtext\">';
+                                    strSuggestion += (data.attributes.regionname != null) ? data.attributes.regionname : "";
+                                    strSuggestion += '</span>';
                                 }
                                 // close out and return the suggestion
                                 strSuggestion += '</div>';;

diff --git a/www/res/css/styles.css b/www/res/css/styles.css
@@ -1370,7 +1370,7 @@ div.preview div.pile {
 .subtext {
     display: block;
     font-size: 0.6rem;
-    color: #999;
+    color: #555;
 }
 .topcoat-checkbox__checkmark {
     margin-right: 6px;
@@ -1905,27 +1905,9 @@ typeahead styles
 }
 
 #scrollable-dropdown-menu .tt-menu {
-  max-height: 175px;
+    max-height: max(175px, calc(100vh - 300px)); /* available space - keyboard (vertical), or 175px if that's too small */
     overflow-y: auto;
 }
-.tt-menu::-webkit-scrollbar {
-    background-color: rgb(221, 225, 225);
-    width: 12px;
-}
-.tt-menu::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-    border-radius: 10px;
-    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-}
-.tt-menu::-webkit-scrollbar-track {
-    background-color: rgb(221, 225, 225);
-    border-radius: 10px;
-    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-}
 
 .tt-menu {
   background-color: #fff;

diff --git a/www/tpl/ProjectSourceLanguage.html b/www/tpl/ProjectSourceLanguage.html
@@ -1,4 +1,4 @@
-<div id="source" class="control-group" style="height:100%;">
+<div id="source" class="control-group" style="height:100%; overflow: visible;">
     <div class="control-row" style="padding-bottom: 0"><label for="LanguageName">* {{ t 'view.lblSourceLanguageName'}}</label></div>
     <div class="control-row full" id="scrollable-dropdown-menu"><input type="text" id="LanguageName" class="topcoat-text-input full typeahead" value="{{SourceLanguageName}}" placeholder={{ t 'view.lblStartTyping'}} required></div>
     <div class="control-row"><label for="LanguageVariant">{{ t 'view.lblLanguageVariant'}}</label><input type="text" id="LanguageVariant" class="topcoat-text-input full" value="{{SourceVariant}}"></div>

diff --git a/www/tpl/ProjectTargetLanguage.html b/www/tpl/ProjectTargetLanguage.html
@@ -1,4 +1,4 @@
-<div id="source" class="control-group" style="height:100%;">
+<div id="source" class="control-group" style="height:100%; overflow: visible;">
     <div class="control-row" style="padding-bottom: 0"><label for="LanguageName">* {{ t 'view.lblTargetLanguageName'}}</label></div>
     <div class="control-row full"><input type="text" id="LanguageName" class="topcoat-text-input full typeahead" value="{{TargetLanguageName}}" placeholder={{ t 'view.lblStartTyping'}} required></div>
     <div class="control-row"><label for="LanguageVariant">{{ t 'view.lblLanguageVariant'}}</label><input type="text" id="LanguageVariant" class="topcoat-text-input full" value="{{TargetVariant}}"></div>