Inconsistent UI for Headword Presentation on Search and Browse Tabs

[Maamashkaach]

When viewing the dictionary through a GitHub page, the Search and Browse tabs present the headword inconsistently and do not clearly identify the headword.

In the above image of the Search page, the headword is not clearly noted. There is a pipe between the headword and definition, which can be confused with the letter “I”. In the original MTD, the headword was displayed in blue, and the search word/characters were in bold. There were three spaces between the headword and the definition, with no pipe character, which was much clearer.

In the second image, the Browse page displays differently than the Search page. The full headword is in blue and there is no pipe.

Recommendation: For consistency and clarity, it would be beneficial to have the headword in blue, with three spaces between the headword and the definition, and no pipe character on both the Search and Browse pages.

[Maamashkaach]

I made some changes to remove the pipe, add spacing, and make the search and browse more consistent. Here is what the modified pages look like: Search:

Browse:

Here are the changes: file: mothertongues-UI/packages/mtd-mobile-ui/src/app/shared/entry-list.component.scss

file: mothertongues-UI/packages/mtd-mobile-ui/src/app/shared/search-entry-list.component.html

[dhdaines]

Definitely looks better! I wonder if it would make more sense to present the results as a (responsive) grid or flexbox? Then we could simply line them up against the margins (and have them stack on smaller screens).

[Maamashkaach]

I think some form of grid or flexbox could work well. One item of feedback I have had from users is that having the results centre justified by line is harder to read than if the data were in columns.