From df6ad8154ab0e98258f53e4abc37f2967dbc6acf Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Mon, 6 Jun 2022 13:38:17 +0000 Subject: [PATCH] default_language_modal: Add more space around languages displayed. We use 3 columns on wide screens and come down to 1 column on narrow screens to ensure that the languages are properly displayed. --- frontend_tests/node_tests/i18n.js | 62 ++++++----------- static/js/i18n.ts | 73 +++++++-------------- static/styles/popovers.css | 16 +++++ static/templates/default_language_modal.hbs | 33 ++++------ 4 files changed, 70 insertions(+), 114 deletions(-) diff --git a/frontend_tests/node_tests/i18n.js b/frontend_tests/node_tests/i18n.js index 473be1abb9..11a48fed4f 100644 --- a/frontend_tests/node_tests/i18n.js +++ b/frontend_tests/node_tests/i18n.js @@ -146,54 +146,34 @@ run_test("language_list", () => { const successful_formatted_list = [ { - first: { - name: "English", - code: "en", - name_with_percent: "English", - selected: true, - }, - second: { - name: "Bahasa Indonesia", - code: "id", - name_with_percent: "Bahasa Indonesia (32%)", - selected: false, - }, + name: "English", + code: "en", + name_with_percent: "English", + selected: true, }, { - first: { - name: "British English", - code: "en-gb", - name_with_percent: "British English (99%)", - selected: false, - }, + name: "British English", + code: "en-gb", + name_with_percent: "British English (99%)", + selected: false, + }, + { + name: "Bahasa Indonesia", + code: "id", + name_with_percent: "Bahasa Indonesia (32%)", + selected: false, }, ]; const formatted_list = get_language_list_columns("en"); - function check_value_match(element, position) { - assert.equal( - formatted_list[element][position].name, - successful_formatted_list[element][position].name, - ); - assert.equal( - formatted_list[element][position].code, - successful_formatted_list[element][position].code, - ); - assert.equal( - formatted_list[element][position].name_with_percent, - successful_formatted_list[element][position].name_with_percent, - ); - assert.equal( - formatted_list[element][position].selected, - successful_formatted_list[element][position].selected, - ); - } - for (const element of _.range(0, formatted_list.length)) { - check_value_match(element, "first"); - if (formatted_list[element].second) { - check_value_match(element, "second"); - } + assert.equal(formatted_list[element].name, successful_formatted_list[element].name); + assert.equal(formatted_list[element].code, successful_formatted_list[element].code); + assert.equal( + formatted_list[element].name_with_percent, + successful_formatted_list[element].name_with_percent, + ); + assert.equal(formatted_list[element].selected, successful_formatted_list[element].selected); } }); diff --git a/static/js/i18n.ts b/static/js/i18n.ts index 9b6d08c735..649b09aec6 100644 --- a/static/js/i18n.ts +++ b/static/js/i18n.ts @@ -78,61 +78,32 @@ export function initialize(language_params: {language_list: typeof language_list } } -// This formats language data for the language selection modal in a -// 2-column format. -type LanguageListColumn = { - [prop in "first" | "second"]?: { - code: string; - name: string; - name_with_percent: string; - selected: boolean; - }; +type Language = { + code: string; + name: string; + name_with_percent: string; + selected: boolean; }; -export function get_language_list_columns(default_language: string): LanguageListColumn[] { - const formatted_list: LanguageListColumn[] = []; - const language_len = language_list.length; - const firsts_end = Math.floor(language_len / 2) + (language_len % 2); - const firsts = _.range(0, firsts_end); - const seconds = _.range(firsts_end, language_len); - const longest_zip: [number, number][] = []; - - // Create a zip (itertools.zip_longest in python) - for (const value of firsts) { - longest_zip.push([value, seconds[value]]); - } - - for (const row of longest_zip) { - const item: LanguageListColumn = {}; - const zip_row = [ - ["first", row[0]], - ["second", row[1]], - ] as const; - for (const zip_value of zip_row) { - if (zip_value[1] !== undefined) { - const lang = language_list[zip_value[1]]; - const name = lang.name; - let name_with_percent = name; - if (lang.percent_translated !== undefined) { - name_with_percent = `${name} (${lang.percent_translated}%)`; - } - - let selected = false; - - if (default_language === lang.code || default_language === lang.locale) { - selected = true; - } - - item[zip_value[0]] = { - name, - code: lang.code, - name_with_percent, - selected, - }; - } +export function get_language_list_columns(default_language: string): Language[] { + const formatted_list: Language[] = []; + for (const language of language_list) { + let name_with_percent = language.name; + if (language.percent_translated !== undefined) { + name_with_percent = `${language.name} (${language.percent_translated}%)`; } - formatted_list.push(item); + let selected = false; + if (default_language === language.code || default_language === language.locale) { + selected = true; + } + + formatted_list.push({ + code: language.code, + name: language.name, + name_with_percent, + selected, + }); } return formatted_list; } diff --git a/static/styles/popovers.css b/static/styles/popovers.css index 0472cdf2e1..6a80eb24d4 100644 --- a/static/styles/popovers.css +++ b/static/styles/popovers.css @@ -672,3 +672,19 @@ ul { } } } + +#language_selection_modal { + width: min(750px, 70vw); +} + +.default_language_modal_table { + column-count: 3; + + @media (width < $md_min) { + column-count: 2; + } + + @media (width < $sm_min) { + column-count: 1; + } +} diff --git a/static/templates/default_language_modal.hbs b/static/templates/default_language_modal.hbs index 18510d4ff6..9eeb975766 100644 --- a/static/templates/default_language_modal.hbs +++ b/static/templates/default_language_modal.hbs @@ -12,27 +12,16 @@ {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} {{/tr}}

- +
{{#each language_list}} -
- - - +
+ + {{#if this.selected}} + {{this.name_with_percent}} + {{else}} + {{this.name_with_percent}} + {{/if}} + +
{{/each}} -
- - {{#if this.first.selected}} - {{this.first.name_with_percent}} - {{else}} - {{this.first.name_with_percent}} - {{/if}} - - - - {{#if this.second.selected}} - {{this.second.name_with_percent}} - {{else}} - {{this.second.name_with_percent}} - {{/if}} - -
+