Fix ProjectCard text overflow
#395
Conversation
AbdulrhmnGhanem
changed the title
ProjectCard text overflowProjectCard text overflow
| @@ -10,3 +10,7 @@ | |||
| .card:hover { | |||
| text-decoration: none; | |||
| } | |||
|
|
|||
| .cardText { | |||
| overflow-wrap: break-word; | |||
There was a problem hiding this comment.
| overflow-wrap: break-word; | |
| overflow-wrap: ellipses; |
We want the cards to have a consistent height so we can place them in a grid.
There was a problem hiding this comment.
I changed it though I don't like it
What is the problem with different card sizes? Here is Pinterest for example
There was a problem hiding this comment.
I know pinterest does that but personally I think it makes it hard to scan through the list. Fixed width and height project cards in a grid, max 3 per row, is what I had settled on for v1. The description should be given more lines though.
There was a problem hiding this comment.
| Name | Description | Description when a single word takes multiple lines |
|---|---|---|
 |
 |
 |
There was a problem hiding this comment.
Just looking at these screenshots: the card height should be fixed and not dependent on the number of lines in the description.
AbdulrhmnGhanem
force-pushed
the
project-card-overflow
branch
2 times, most recently
from
f2ed007
to
f8ac04a
Compare
AbdulrhmnGhanem
force-pushed
the
project-card-overflow
branch
2 times, most recently
from
dd25ca5
to
dc4b9f7
Compare
|
In v1 the description text is clipped by trimming the HTML (a preprocessing step?) not handled in CSS
|
|
Possible solutions https://css-tricks.com/line-clampin |
| display: -webkit-box; | ||
| -webkit-line-clamp: 3; | ||
| -webkit-box-orient: vertical | ||
| } |
There was a problem hiding this comment.
We agreed we would just switch this to a fixed card height.
|
Though it doesn't add the `...` if the summary exceeds the height. Are you
OK with this?
…On Thu, Jun 9, 2022, 6:01 PM Kaspar Emanuel ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In frontend/src/components/ProjectCard/index.module.scss
<#395 (comment)>:
> + display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical
+}
We agreed we would just switch this to a fixed card height.
—
Reply to this email directly, view it on GitHub
<#395 (review)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AI3OMSIB4KAK5IZENWIINP3VOIIOLANCNFSM5XO3AGBA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
Oh, I thought it would. If you want to use |
This isn't the case for this particular one 😅 (postcss/autoprefixer/issues/1322) |
|
Ok, please add a comment about it. |
AbdulrhmnGhanem
force-pushed
the
project-card-overflow
branch
from
dc4b9f7
to
8da4399
Compare
AbdulrhmnGhanem
force-pushed
the
project-card-overflow
branch
from
8da4399
to
cc0bf41
Compare
Fixes #360