From 1ee7bffbe0e0fa04032b2ed665c553155722f8af Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 19 Apr 2022 21:01:45 +0000 Subject: [PATCH 1/3] Use line-clamp for block-axis overflow Block-ellipsis property is not supported yet Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_RoomHeader.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 3eabf5e57a3..897fd1c997a 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -141,17 +141,25 @@ limitations under the License. } .mx_RoomHeader_topic { + $line-height: 1.2em; + $lines: 2; + flex: 1; color: $roomtopic-color; font-weight: 400; font-size: $font-13px; + border-bottom: 1px solid transparent; + line-height: $line-height; + max-height: calc($line-height * $lines); + // to align baseline of topic with room name margin: 4px 7px 0; + overflow: hidden; - text-overflow: ellipsis; - border-bottom: 1px solid transparent; - line-height: 1.2em; - max-height: 2.4em; + line-clamp: $lines; // https://drafts.csswg.org/css-overflow-3/#line-clamp + display: -webkit-box; + -webkit-line-clamp: $lines; + -webkit-box-orient: vertical; } .mx_RoomHeader_avatar { From 6322a4e533cf143828be3e45f7017788d33ed29d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 20 Apr 2022 06:01:46 +0000 Subject: [PATCH 2/3] Use $font variable, camel case, and remove line-clamp Since there is not a variable $font-15.6px, which is equal to 1.6em here, $font-16px is used as the nearest value instead. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_RoomHeader.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 897fd1c997a..c7b45e92ff1 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -141,25 +141,24 @@ limitations under the License. } .mx_RoomHeader_topic { - $line-height: 1.2em; + $lineHeight: $font-16px; $lines: 2; flex: 1; color: $roomtopic-color; font-weight: 400; font-size: $font-13px; + line-height: $lineHeight; + max-height: calc($lineHeight * $lines); border-bottom: 1px solid transparent; - line-height: $line-height; - max-height: calc($line-height * $lines); // to align baseline of topic with room name margin: 4px 7px 0; overflow: hidden; - line-clamp: $lines; // https://drafts.csswg.org/css-overflow-3/#line-clamp - display: -webkit-box; - -webkit-line-clamp: $lines; + -webkit-line-clamp: $lines; // legacy compatibility. See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp -webkit-box-orient: vertical; + display: -webkit-box; } .mx_RoomHeader_avatar { From 6b24caddde3096fb8c111bd2d70c51fcf8827717 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 20 Apr 2022 06:45:28 +0000 Subject: [PATCH 3/3] Remove "legacy compatibility" comment Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_RoomHeader.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index c7b45e92ff1..7d25ade6bac 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -156,7 +156,7 @@ limitations under the License. margin: 4px 7px 0; overflow: hidden; - -webkit-line-clamp: $lines; // legacy compatibility. See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp + -webkit-line-clamp: $lines; // See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp -webkit-box-orient: vertical; display: -webkit-box; }