Skip to content
Permalink
Browse files

UX: Cap height of user fields on mobile user-cards, add line-clamp mixin

  • Loading branch information
awesomerobot committed Feb 14, 2020
1 parent f81bebf commit cd5b7109d04722df5c39b2ded9fa4ead6c290ce4
@@ -63,6 +63,15 @@ $breakpoints: (
text-overflow: ellipsis;
}

@mixin line-clamp($lines) {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
}

//
// --------------------------------------------------

@@ -79,18 +79,12 @@
}
.post-excerpt {
max-width: 650px;
max-height: 165px;
line-height: $line-height-large;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-line-clamp: 8;
@include line-clamp(8);
@media screen and (max-height: 425px) {
-webkit-line-clamp: 5;
}
-webkit-box-orient: vertical;
}
.username {
color: dark-light-choose($primary-high, $secondary-low);
@@ -106,15 +100,9 @@
h2 {
margin-top: 0;
display: block;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
max-height: 110px;
line-height: $line-height-medium;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
font-size: $font-up-2;
@include line-clamp(4);
}
a {
color: $primary;
@@ -73,6 +73,17 @@ $avatar_width: 120px;
width: 100%;
}
}

.public-user-fields {
@media screen and (max-height: 550px) {
max-height: 12vh;
}
max-height: 40vh;
overflow-y: auto;
.public-user-field {
@include line-clamp(3);
}
}
}

// mobile card cloak

1 comment on commit cd5b710

@discoursebot

This comment has been minimized.

Copy link

discoursebot commented on cd5b710 Feb 14, 2020

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/long-user-profile-cards-cut-off-badges/141301/8

Please sign in to comment.
You can’t perform that action at this time.