Blank page no vocabulary items are found

[jiru]

Problem

When filtering by language, often the page is blank with no idication why it is blank.

https://tatoeba.org/eng/vocabulary/add_sentences/kor

Possible Solution

Put a message saying something like the following.

There are no requests for Korean.
There are no requests for this language.

There are no requests for Korean that do not already have at least 10 sentences.
There are no requests for this language that do not already have at least 10 sentences.

Originally posted by @ckjpn in #1148 (comment)

[speedysera]

Hi! Regarding the styling, would something like this be acceptable?

[ckjpn]

If you are referring to the thin light green text on a block of darker green, I find that a lot more difficult to read than the current black font on a white background as shown in the screenshot in the first post in this discussion.

I suspect this goes against accessibility guidelines that a lot of websites follow to help those with vision problems.

[speedysera]

Thanks for the insight @ckjpn ! It's good to consider accessibility.

It seems the green header also exists in the case where there are words in need of sentences are displayed:

@trang are we going to change the display header anytime soon for accessibility?

---

Regarding the styling question, I was wondering about this section in particular, where the additional message is marked in green:

Do we want to display "There are no requests for this language that do not already have at least 10 sentences." along with the existing header as shown in the screenshots, or as a separate entry with different styling? I am open to suggestions :)

Also, is there a function that would allow us to query the current language being featured, so that we can display "There are no requests for that do not already have at least 10 sentences."

[AndiPersti]

Also, is there a function that would allow us to query the current language being featured, so that we can display "There are no requests for that do not already have at least 10 sentences."

In the controller we pass already langFilter which contains the 3-letter-code for the language and is currently not used in the template:

tatoeba2/src/Controller/VocabularyController.php

Line 130 in 119c637

$this->set('langFilter', $lang);

We have a helper function codeToNameAlone which you can use to get the full language name. The trait is included in the Languages helper so you can use the helper function in the template, e.g.

$language = $this->Languages->codeToNameAlone($langFilter)

(you should handle the case where $langFilter is not set, i.e. vocabulary items in all languages are displayed.)

[AndiPersti]

Do we want to display "There are no requests for this language that do not already have at least 10 sentences." along with the existing header as shown in the screenshots, or as a separate entry with different styling? I am open to suggestions :)

We currently don't have a distinct design/style that determines how to display an empty result page (see also #2074, third bullet point).

I personally prefer having just a simple explanation without any header like we do for example with searches: https://tatoeba.org/eng/sentences/search?query=&from=abk&to=afh

[trang]

@speedysera There's indeed no default style yet for "no results" pages but I started to introduce something for the lists when they're empty.

You can do something that looks similar here for the vocabulary and a create CSS class in the default.css that could be reused in general for empty pages.

.empty-info-text {
    text-align: center;
    font-size: 2em;
    color: #666666;
}

As for the language information, you could add it in the title rather than the "no requests" text.

This would follow the pattern on other pages.

• Sentences in Korean
• Orphan sentences in Korean
• {user}'s sentences in Korean

[speedysera]

Thank you, the above looks much clearer, let me implement that.

[speedysera]

@AndiPersti hi! I tried to reflect all the comments above, hope it's alright

[speedysera]

hi! I would like to ask if the following is alright:

if langFilter is empty,

if not,

if the above is ok, I will push the commit and create a new pull request. Thank you!

[jiru]

@speedysera It looks good. Please show us the code! 🙂

[speedysera]

hi! please take a look at the code if it's alright. I can create the new PR afterwards

[jiru]

@speedysera Thanks! The code looks good.

Note that it’s better if you create the PR first and then we look at the code. Don’t worry, you don’t have to get it perfect beforehand. We are all here to learn. 👍

[speedysera]

hi @jiru and @AndiPersti ! thanks for the awesome comments, I will work on them.