AnimeThemes/animethemes-web

Titles cut off on series page (wiki-next)

Closed this issue · 4 comments

If a series has had lots of openings/endings and there limited horizontal space e.g a iPad in Portrait then the title can be cut off in the first image there 4 titles which are just "The... "

Examples below.

This was on the new wiki-next layout.

Maybe put the title on its own line if it becomes to small?

https://staging.animethemes.moe/wiki-next/series/idolmaster
10489139-5260-4FE6-9FBA-CF7353A1DF5B

https://staging.animethemes.moe/wiki-next/series/fairy_tail
FB9414B0-95ED-410E-B271-468A7FBA014F

https://staging.animethemes.moe/wiki-next/series/yugioh
72AE6E77-28DF-483B-9415-47261502A1FF

Hey 👋 Thanks for reporting and sorry for the late reply.

I came up with two possible solutions:

(A) One Column with Themes (B) Two Columns without Themes
localhost_3000_series_idolmaster(iPad) (1) localhost_3000_series_idolmaster(iPad)

These designs also include a reworked navigation where the My Profile button is reduced to an icon.

Let me know what you think of the designs or if you have another idea.

Hey 👋 Thanks for reporting and sorry for the late reply.

No problem, thanks for trying out different designs.

Let me know what you think of the designs or if you have another idea.

Of the two options I like option A better since it saves an extra click to get to the themes, which I think is the the common case where there are few themes.

My only other suggestion is, at the cost of vertical space i.e. making each tile bigger you could make the the title be above the theme buttons. This would allow all but the longest titles to fit since it the title has almost the length of the tile. A possible downside is that this would leave a vertical white space gap between the title and the details (Anime . 2005) not sure how good that would look.

I also found a series with very long titles and many entries https://staging.animethemes.moe/wiki/series/precure which may help finding edges cases.

Note that I think this issue can also effect the search page (though it less of an issues since the themes show the full series name), say you searched for what I think is the longest anime title (Shuumatsu Nani Shitemasu ka? Isogashii desu ka? Sukutte Moratte Ii desu ka?) also known as ( WorldEnd: What do you do at the end of the world? Are you busy? Will you save us?)

https://staging.animethemes.moe/wiki/search?q=What+Do+You+Do+At+The+End+Of+The+World%3F+Are+You+Busy%3F+Will+You+Save+Us

I updated staging with design A and also added the function to expand the anime card (which is what you mean by card I think). This way you can see all the themes of an anime without going to it's page. It also makes more room for the title. Because of this I also changed the max number of themes displayed on an un-expanded card from 4 to 2, which also leaves more room for long titles.

I'm not sure if this is what you meant with your suggestion. Let me know what you think and if you think this issue is done.

Thanks, the new version is great. I also really like the expand button.

Some images to show how nice the new version is.
B7F4EBC6-8B55-4BE1-9B3D-527C63BBDCA5
E87DC831-D351-4C86-B5DA-85C514B5881E
18BF506B-66D3-41F8-8FBE-3A9157925B69