From fb63af5070fa76ddc860fddaa7bce4f39fe5d8f0 Mon Sep 17 00:00:00 2001
From: TechMiX <mytechmix@gmail.com>
Date: Mon, 29 Jul 2024 02:11:12 +0200
Subject: [PATCH] fix various rtl issues
---
.../transaction/transaction.component.html | 8 ++--
.../transaction/transaction.component.scss | 1 -
frontend/src/styles.scss | 38 +++++++++++++++++++
3 files changed, 42 insertions(+), 5 deletions(-)
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index a6a985fb0..2c0a0e375 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -550,19 +550,19 @@
<td>
<ng-container *ngIf="(ETA$ | async) as eta; else etaSkeleton">
@if (eta.blocks >= 7) {
- <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
+ <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool justify-content-end align-items-center' : ''">
<span i18n="transaction.eta.not-any-time-soon|Transaction ETA mot any time soon">Not any time soon</span>
@if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) {
- <a class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+ <a class="btn btn-sm accelerateDeepMempool btn-small-height float-right" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
}
</span>
} @else if (network === 'liquid' || network === 'liquidtestnet') {
<app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
} @else {
- <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool d-flex justify-content-end align-items-center' : ''">
+ <span [class]="(!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) ? 'etaDeepMempool justify-content-end align-items-center' : ''">
<app-time kind="until" [time]="eta.time" [fastRender]="false" [fixedRender]="true"></app-time>
@if (!tx?.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !showAccelerationSummary && eligibleForAcceleration) {
- <a class="btn btn-sm accelerateDeepMempool btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+ <a class="btn btn-sm accelerateDeepMempool btn-small-height float-right" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
}
</span>
<span class="eta justify-content-end">
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index 7db417126..1427d64c5 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -297,7 +297,6 @@
}
.etaDeepMempool {
- display: flex !important;
justify-content: flex-end;
flex-wrap: wrap;
align-content: center;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 929a55c97..d9c58a302 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -916,6 +916,44 @@ th {
}
}
+ .beta {
+ @extend .beta;
+ margin: 24px -19px 0px 0px !important;
+ @media (max-width: 767.98px) {
+ margin: 30px -23px 0px 0px !important;
+ }
+ @media (max-width: 3429px) {
+ margin: 25px -23px 0px 0px !important;
+ }
+ @media (max-width: 369px) {
+ margin: 20px -23px 0px 0px !important;
+ }
+ }
+
+ .etaDeepMempool {
+ @extend .etaDeepMempool;
+ @media (max-width: 995px) {
+ justify-content: right !important;
+ }
+ @media (max-width: 849px) {
+ justify-content: left !important;
+ }
+ }
+
+ .nodes {
+ @extend .nodes;
+ direction: ltr !important;
+ }
+
+ .fee-rate {
+ @extend .fee-rate;
+ direction: rtl !important;
+ }
+
+ .bitcoin-satoshis-text {
+ direction: ltr !important;
+ }
+
.table th {
text-align: right;
}