Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Use -webkit-line-clamp for the room header topic overflow #8367

Merged
merged 4 commits into from
Apr 20, 2022
Merged

Use -webkit-line-clamp for the room header topic overflow #8367

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ee7bff
Use line-clamp for block-axis overflow
luixxiul Apr 19, 2022
c0a3b07
Merge branch 'develop' into line-clamp
luixxiul Apr 19, 2022
6322a4e
Use $font variable, camel case, and remove line-clamp
luixxiul Apr 20, 2022
6b24cad
Remove "legacy compatibility" comment
luixxiul Apr 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions res/css/views/rooms/_RoomHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,17 +141,25 @@ limitations under the License.
}

.mx_RoomHeader_topic {
$line-height: 1.2em;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use a $font- variable here. Also, according to the upcoming style guide, this variable should be camelCase since it's not shared.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've forgot the line-height is a property of font style- will address soon.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: 1.2em has been converted to 15.6px, so this needs a small adjustment instead of changing this to $font-12px, which is 1.2rem.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was replaced with $font-16px. Although there is 0.4px difference (16 - 15.6), it should be fine.

after

$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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think since this is still in draft status, we should only use the prefixed -webkit- property?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It says:

For compatibility with legacy content, UAs that support line-clamp must also support the -webkit-line-clamp property ...

Implementations of the legacy -webkit-line-clamp property have not behaved identically to what is specified here. ...

But since this is the draft, the documentation is not finalized or standardized, so the fact is that -webkit-line-clamp is not actually legacy yet?

Anyway -webkit-line-clamp will be kept available per the document, so I'll remove this for now.

display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
}

.mx_RoomHeader_avatar {
Expand Down