Display the topic name on top of the subtopic name on smaller screens

Describe the bug When viewing subtopics on larger screens, the topic name is displayed on the navbar.

On smaller screens, the topic name is omitted due to space constraints. Therefore, the topic name should instead be displayed above the subtopic name, as per these mocks: https://xd.adobe.com/view/bcf79207-32d2-469d-608b-4269c9747657-cac6/screen/e6d0aa1f-f7c1-4abe-bf69-835853aafa21/

To Reproduce Steps to reproduce the behavior:

1. Go to any subtopic of a topic on the math classroom.
2. Reduce screen size to see topic name disappear from the navbar.

Observed behavior The topic name isn’t shown on the navbar on smaller screens.

Expected behavior The topic name should instead be shown above the subtopic title (as per the linked mocks) on smaller screens.

Proposed solution approach The page in the image (i.e. where we want to implement the linked design and display the topic name) is rendered using the subtopic-viewer-page component.

One way to achieve the desired result can be split into the following three parts:

1. Determining the topic name
2. Obtaining a translation for the topic name (if available and required)
3. Displaying the topic name

Step 1: The topic title can be determined by making a HTTP GET request via the topic-viewer-backend-api service. The response object returned by the request (after the promise is resolved) is an object of type ReadOnlyTopic (you may see the class definition here).

As you can see, one of the properties is the topicName, which is what we’re looking for! In addition to this, we also need the topicID for step 2.

Step 2: Oppia’s content is constantly translated, and this also includes translations of topic titles, descriptions, story titles, etc. We try to display the name of the topic in the language chosen by the user. However, some topics’ titles may lack translations or may not be translated into all languages. If the translation for the topic name in the language chosen by the user is unavailable, we default to the English translation.

We display the translations for a particular piece of text using its I18N key.

• To obtain the I18N key for a particular topic, you may use the i18nLanguageCodeService’s getTopicTranslationKey() method. It accepts the topicId, and the content type as input. There are two possible content types: TITLE and DESCRIPTION. They are enumerated in the TranslationKeyType enum (located in the same file as the i18nLanguageCodeService, so be sure to import it as well!)
• To check if a topic title is translated at all, you may use the isHackyTranslationAvailable() method of the i18nLanguageCodeService.
• To check if the current chosen language is English (i.e. if a translation should be shown or not), you may use the isCurrentLanguageEnglish() method of the service.

With all the above information, you can now determine when to display the translation for the topic name:

• If the language is English, you may just display the topicName value that we obtained in the first step.
• If the language isn’t English, you may now generate the translation key and check if HackyTranslation is available for this key. If not, you can once again simply display the topicName.
• If yes, you can then display the translated topic title.

Step 3: Displaying the translated topic title is as simple as using the translate pipe. The following expression in the component’s template – {{ translationKey | translate }} – will evaluate to the topic name translated into the current language.

[mjsumpter]

@Pankaj-SinghR I am still working this - just getting started really. No help needed at this time, but I will reach out if that changes.

[Pankaj-SinghR]

Hi, I’m happy to work on this - please assign?

Hey, you still working on this issue or need any help?