fix(card): titles trim #1124
fix(card): titles trim #1124
Conversation
rachelbt
commented
Nov 7, 2021
rachelbt
commented
- Added an option to set the numbers od lines before trim
- Some visual QA
|
🚀 Latest successful build of the PR deployed here. 🚀 |
components/card/readme.md
Outdated
| | `--title-line-number` | none | Controls the number of lines of the title that will be present before trim & ellipsis | | ||
| | `--subtitle-line-number` | none | Controls the number of lines of the sub-title that will be present before trim & ellipsis | |
There was a problem hiding this comment.
why wont we stick to the css property name here? line-clamp
There was a problem hiding this comment.
because than the same number will be for both title & subtitle
components/card/src/vwc-card.scss
Outdated
| display: -webkit-box; | ||
| overflow: hidden; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-line-clamp: var(--line-trim); |
There was a problem hiding this comment.
I think there's a way to do this with sass. I mean a scoped sass variable rather than another confusing css variable.
alternatively we could just set the -webkit-line-clamp twice for each selector
There was a problem hiding this comment.
I'm not sure understood what you meant... :(
| <vwc-card label="All" heading="Card title" subtitle="Subtitle" header-icon="chat-line" support-text="Support Text"> | ||
| <div style="height: 150px; width: 100%; background-color: red;" slot="media"></div> | ||
| <div slot="media"><img src="https://doodleipsum.com/300x150/flat?bg=7463D9&i=60361756b0ad15f4b3c4bd691f647ba9" alt="Sitting on Floor by Gustavo Pedrosa" /><p style="padding: 0 1.5rem; margin:0; text-align: center">Illustration by <a href="https://blush.design/artists/JycqpHYvuwwN3HzxBNyr/gustavo-pedrosa">Gustavo Pedrosa</a></p></div> |
There was a problem hiding this comment.
Why change this one? It's here to test the use case in which media is just a colored div (it was requested by Joella in the past).
There was a problem hiding this comment.
It's a duplication of the card with the color to create a card with an image
components/card/readme.md
Outdated
| | `--title-line-trim` | none | Controls the number of lines of the title that will be present before trim & ellipsis | | ||
| | `--subtitle-line-trim` | none | Controls the number of lines of the sub-title that will be present before trim & ellipsis | |
There was a problem hiding this comment.
I find trim more coherent, not all devs know the clam.
There was a problem hiding this comment.
but that's the actual css property
components/card/readme.md
Outdated
| | `--title-line-trim` | none | Controls the number of lines of the title that will be present before trim & ellipsis | | ||
| | `--subtitle-line-trim` | none | Controls the number of lines of the sub-title that will be present before trim & ellipsis | |
|
Kudos, SonarCloud Quality Gate passed!
|
