From 9eddca7d531919ac9e6aa6ada9a9f3c09f923e4f Mon Sep 17 00:00:00 2001 From: wangombe-g Date: Wed, 22 Mar 2023 17:20:01 +0300 Subject: [PATCH] Conditionally render search placeholder text (#450) Placeholder text was appearing cropped in menuWidth = 'narrow' This commit serves to conditionally render placeholder text to a shorter 'Search' Bug: https://phabricator.wikimedia.org/T318633 --- i18n/en.json | 3 ++- i18n/qqq.json | 3 ++- src/jquery.uls.core.js | 6 +++++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/i18n/en.json b/i18n/en.json index d67fe53..3da7bbb 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -18,5 +18,6 @@ "uls-common-languages": "Suggested languages", "uls-no-results-suggestion-title": "You may be interested in:", "uls-search-help": "You can search by language name, script name, ISO code of language or you can browse by region.", - "uls-search-placeholder": "Search for a language" + "uls-search-placeholder": "Search for a language", + "uls-search-placeholder-short": "Search" } diff --git a/i18n/qqq.json b/i18n/qqq.json index f66f9f4..b57ca0d 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -19,5 +19,6 @@ "uls-common-languages": "The ULS tries to guess the langugages that the user is most likely to pick. They are taken from geolocation (languages of the current country according to the IP address), previously selected languages, and the browser's accept-language. The list of these languages appears at the top of the ULS languages list, above the geographical regions. This is the title of that list.\n\nSee also {{msg-mw|Mobile-frontend-languages-structured-overlay-suggested-languages-header}}", "uls-no-results-suggestion-title": "Title for language suggestion in 'no results found' screen", "uls-search-help": "Help text for searching.\n\n\"Script name\" is a name of a writing system, such as \"Latin\", \"Cyrillic\", \"Arabic\" etc.", - "uls-search-placeholder": "Placeholder text in search box" + "uls-search-placeholder": "Placeholder text in search box", + "uls-search-placeholder-short": "Shorter placeholder text in search box when menu width is narrow" } diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index 1c5d2d1..15c37b7 100644 --- a/src/jquery.uls.core.js +++ b/src/jquery.uls.core.js @@ -174,7 +174,11 @@ i18n: function () { if ( $.i18n ) { this.$menu.find( '[data-i18n]' ).i18n(); - this.$languageFilter.prop( 'placeholder', $.i18n( 'uls-search-placeholder' ) ); + if ( this.getMenuWidth() === 'narrow' ) { + this.$languageFilter.prop( 'placeholder', $.i18n( 'uls-search-placeholder-short' ) ); + } else { + this.$languageFilter.prop( 'placeholder', $.i18n( 'uls-search-placeholder' ) ); + } } },