Truncated description on game cards and decreased size of description on game page #288
Conversation
willcravitz
requested review from
majorsylvie,
frowenz and
danielngira
and removed request for
frowenz
There was a problem hiding this comment.
The code seems correct and achieves the intended purpose. I left two comments, one is a minor one on style and the other one was me contemplating how to handle the description on the grid view page. The changes I suggested are optional really so I'll approve the PR once you contemplate them
| @@ -54,7 +54,7 @@ <h1 class="display-1 mt-3 mb-3">Games</h1> | |||
| </div> | |||
| <div class="card-body d-flex flex-column"> | |||
| <h4 class="card-title">{{ game.name }}</h4> | |||
| <p class="card-text flex-grow-1">{{ game.description|linebreaksbr }}</p> | |||
| <p class="card-text flex-grow-1">{{ game.description|linebreaksbr|truncatewords_html:20 }}</p> | |||
There was a problem hiding this comment.
The description in the game grid looks perfect! I was thinking, is it possible to let the user know/sth that can signal to them that they can read more about the game description so they can know the game description was purposely truncated and there's a complete version of it? Can a "read more" under the description be a useful indicator or would it be redundant since the whole grid itself is a link to the game detail page?
There was a problem hiding this comment.
Similar to what I said in the comment above, I think this is a really good suggestion, but I'd rather leave it up to future team members to open up a new game card styling issue. The main focus of this issue was to make sure that descriptions don't make the cards too big.
There was a problem hiding this comment.
Like with the previous comment, I think your judgement makes sense. I can resolve these comments now
| @@ -54,7 +54,7 @@ <h1 class="display-1 mt-3 mb-3">Games</h1> | |||
| </div> | |||
| <div class="card-body d-flex flex-column"> | |||
| <h4 class="card-title">{{ game.name }}</h4> | |||
| <p class="card-text flex-grow-1">{{ game.description|linebreaksbr }}</p> | |||
| <p class="card-text flex-grow-1">{{ game.description|linebreaksbr|truncatewords_html:20 }}</p> | |||
There was a problem hiding this comment.
Like with the previous comment, I think your judgement makes sense. I can resolve these comments now
There was a problem hiding this comment.
Looks great! The Grid view is significantly cleaner and more organized. Thank you for adding the ... to signal that there is more to read.
Similarly the detail view feels even more put together now that the size has been meaningfully decreased.
This code is good to merge. I do have two further suggestions on more changes to make!
I would recommend changing the alignment of detail view elements to address the problem of (particularly large vertical) images creating whitespace above the description:
I agree that a great next step would be adding a Read More button / link to expand a given card.
An idea for that is to have it bring up the card in a "center peek" view. Notion does this for example:
|
Closing comments: The descriptions on game cards are now limited to 20 words followed by an ellipses. Descriptions on the detail page took up too much space as a header, so they are now paragraph text. @danielngira and @majorsylvie both suggested ways to further improve the user experience on both the game grid and detail pages which should be addressed in future issues. |
|
Issue Score: Excellent Comments: Keep moving forward! |
This code does 2 things to address issue #258:
h3top) and moves it into the information section