highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-07-15 10:52:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix truncated hidden text layout flow bug

Browse Source
This commit is contained in:
Mononaut
2023-11-22 11:04:52 +09:00
parent 1e01f88c15
commit 94a7b710c5
2 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/shared/components/truncate/truncate.component.html
View File

@ -1,5 +1,5 @@
<span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline"> <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
<div class="hidden">{{ text }}</div> <div class="hidden-content">{{ text }}</div>
<ng-container *ngIf="link"> <ng-container *ngIf="link">
<a [routerLink]="link" class="truncate-link"> <a [routerLink]="link" class="truncate-link">
<ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container> <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>

15
frontend/src/app/shared/components/truncate/truncate.component.scss
View File

@ -3,6 +3,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
position: relative;
.truncate-link { .truncate-link {
display: flex; display: flex;
@ -27,17 +28,17 @@
&.inline { &.inline {
display: inline-flex; display: inline-flex;
} }
}
.hidden { .hidden-content {
color: transparent; color: transparent;
position: absolute; position: absolute;
max-width: 300px; max-width: 300px;
overflow: hidden; overflow: hidden;
}
} }
@media (max-width: 567px) { @media (max-width: 567px) {
.hidden { .hidden-content {
max-width: 150px; max-width: 150px;
} }
} }