Add onClick for an expandable Overview of item details

Adds a onClick action that toggles expanding the item detail
Overview. By default it crops the text to 12 lines on mobile, 6
on larger viewports.

-webkit-line-clamp is supported on all Webkit browsers and Firefox
as of 3/2020. A fallback with max-height is provided as well.

Fixes #888
This commit is contained in:
Andres Ruiz 2020-03-08 15:50:54 -04:00 committed by Andres J Ruiz Torres
parent b8ee2f86b0
commit 1ddfd2c7bb
2 changed files with 34 additions and 0 deletions

View file

@ -1144,3 +1144,22 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
margin-top: 0;
font-size: 1.4em;
}
.detail-clamp-text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 12;
-webkit-box-orient: vertical;
/* Fallback for older browsers: line-height * number of lines */
max-height: calc(1.35 * 12em);
}
@media all and (min-width: 40em) {
.detail-clamp-text {
-webkit-line-clamp: 6;
/* Fallback for older browsers: line-height * number of lines */
max-height: calc(1.35 * 6em);
}
}