proper truncation in RTL locales

This commit is contained in:
Mononaut 2023-01-05 11:16:14 -06:00
parent 42a39c1f7c
commit 6448ad0ac7
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
3 changed files with 12 additions and 9 deletions

View file

@ -151,5 +151,5 @@ h2 {
.tx-link {
width: 0;
flex-grow: 1;
margin-right: 2em;
margin-inline-end: 2em;
}

View file

@ -1,5 +1,12 @@
<span class="truncate" [class.rtl]="rtl" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
<span class="first">{{text.slice(0,-lastChars)}}</span>
<span class="last-four">{{text.slice(-lastChars)}}</span>
<ng-content></ng-content>
<span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
<ng-container *ngIf="!rtl">
<span class="first">{{text.slice(0,-lastChars)}}</span>
<span class="last-four">{{text.slice(-lastChars)}}</span>
<ng-content></ng-content>
</ng-container>
<ng-container *ngIf="rtl">
<span class="first">{{text.slice(lastChars)}}</span>
<span class="last-four">{{text.slice(0,lastChars)}}</span>
<ng-content></ng-content>
</ng-container>
</span>

View file

@ -4,10 +4,6 @@
flex-direction: row;
align-items: baseline;
&.rtl {
flex-direction: row-reverse;
}
.first {
flex-grow: 0;
flex-shrink: 1;