Learning activity bar truncation and alignment fixes #8747
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
to make it cooperate with truncation via text ellipsis
The text truncator component is sometimes used in <span>s and it's not valid to have block elements inside of inline elements.
`KLabeledIcon`s calculation of label's max-width seems to be the main cause of the resource title being truncated all the time in Internet Explorer 11 (reported as part of learningequality#8678)
`width: auto` was breaking the title truncation in Internet Explorer 11 since with this width settings the title was overflowing the container even when it should already be truncated and ellipsis was never displayed. It seems that the main reason of using `width: auto` was displaying the progress icon right to the title without any gap in between. For that purpose using `flex-grow: 0` works too and it doesn't break truncation in IE.
Fixes an issue when controls were displayed outside of the toolbar when a resource had a very long title
|
Truncation of long titles is looking much better! 👍🏽
|
radinamatic
approved these changes
Nov 19, 2021
rtibbles
approved these changes
Nov 19, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes a couple of truncation and alignment problems in the learning activity bar.
(1) Replaces
TextTruncatorwithTextTruncatorCsson this opportunity to avoid investigating issues in the environment using a component that may soon be obsolete as we agreed to move towardsTextTruncatorCsseverywhere.(2) Fixes ellipsis not being applied when it should and being applied when it shouldn't. Some issues occurred in all browsers, some were IE specific. See commit messages and code comments for details.
(3) Fixes an issue with overflowing controls on the right side of the bar when a resource title is very long:
References
Fixes #8678
Reviewer guidance
In all browsers
Please double-check in Internet Explorer. Note that some icons may not be visible all the time, e.g. the progress and completion icons become visible only after a resource has been started.
Testing checklist
PR process
Reviewer checklist
yarnandpip)