machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing mobile overflow

Browse Source
This commit is contained in:
softsimon 2023-11-15 15:07:14 +09:00
parent d4568b631d
commit 86fe6a802b
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +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>
<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>
@ -11,11 +12,10 @@
</span> </span>
<ng-template #ltrTruncated> <ng-template #ltrTruncated>
<div class="hidden">{{ text }}</div>
<span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span> <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
</ng-template> </ng-template>
<ng-template #rtlTruncated> <ng-template #rtlTruncated>
<div class="hidden">{{ text }}</div>
<span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span> <span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
</ng-template> </ng-template>

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

@ -32,4 +32,12 @@
.hidden { .hidden {
color: transparent; color: transparent;
position: absolute; position: absolute;
max-width: 300px;
overflow: hidden;
}
@media (max-width: 567px) {
.hidden {
max-width: 150px;
}
} }