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

Merge pull request #3244 from mempool/mononaut/fix-ln-rtl

Browse Source 
Fix miscellaneous RTL layout bugs
This commit is contained in:
softsimon 2023-03-07 17:00:11 +09:00 committed by GitHub
commit da25577ea7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 82 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
View File

@ -54,31 +54,6 @@
max-height: 270px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;

25
frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
View File

@ -54,31 +54,6 @@
max-height: 270px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;

25
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
View File

@ -54,31 +54,6 @@
max-height: 270px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;

25
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
View File

@ -54,31 +54,6 @@
max-height: 270px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 1130px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 1130px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.disabled {
pointer-events: none;
opacity: 0.5;

7
frontend/src/app/components/graphs/graphs.component.html
View File

@ -1,10 +1,9 @@
<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING" class="mb-3 d-flex menu"
style="padding: 0px 35px;">
<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING" class="mb-3 d-flex menu">
<a routerLinkActive="active" class="btn btn-primary mr-1" [class]="padding"
<a routerLinkActive="active" class="btn btn-primary" [class]="padding"
[routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>
<div ngbDropdown class="mr-1" [class]="padding" *ngIf="stateService.env.MINING_DASHBOARD">
<div ngbDropdown [class]="padding" *ngIf="stateService.env.MINING_DASHBOARD">
<button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]"

11
frontend/src/app/components/graphs/graphs.component.scss
View File

@ -1,6 +1,15 @@
.menu {
flex-grow: 1;
padding: 0 35px;
@media (min-width: 576px) {
max-width: 400px;
}
}
& > * {
margin: 0;
margin-inline-end: 0.25rem;
&.last-child {
margin-inline-end: 0;
}
}
}

25
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@ -54,31 +54,6 @@
height: 240px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.pool-distribution {
min-height: 56px;
display: block;

25
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
View File

@ -48,31 +48,6 @@
max-height: 293px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.loadingGraphs {
position: absolute;
top: 50%;

25
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@ -33,31 +33,6 @@
}
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.bottom-padding {
@media (max-width: 992px) {
padding-bottom: 65px

2
frontend/src/app/lightning/channel/channel.component.scss
View File

@ -78,5 +78,5 @@ h3 {
.details-button {
align-self: center;
margin-left: auto;
margin-inline-start: auto;
}

8
frontend/src/app/lightning/channels-list/channels-list.component.scss
View File

@ -19,6 +19,14 @@
}
}
:host-context(.rtl-layout) .formRadioGroup {
direction: ltr;
@media (min-width: 435px) {
right: unset;
left: 0;
}
}
.btn-group {
@media (max-width: 435px) {
flex-grow: 1;

2
frontend/src/app/lightning/group/group.component.html
View File

@ -92,7 +92,7 @@
</ng-template>
<input type="text" class="form-control" aria-label="Text input with dropdown button"
[value]="node.socketsObject[selectedSocketIndex].socket">
<button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible[i] = 1"
<button class="btn btn-secondary" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible[i] = 1"
(mouseout)="qrCodeVisible[i] = 0">
<fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
<div class="qr-wrapper" [hidden]="!qrCodeVisible[i]">

16
frontend/src/app/lightning/group/group.component.scss
View File

@ -8,7 +8,7 @@
}
h1 {
margin-left: 15px;
margin-inline-start: 15px;
}
.qr-wrapper {
@ -57,3 +57,17 @@ h1 {
.description-text {
white-space: break-spaces;
}
.timestamp-first .input-group {
input {
margin-inline-end: .25rem;
}
}
:host-context(.rtl-layout) {
.timestamp-first .input-group {
button {
margin-inline-end: .25rem;
}
}
}

2
frontend/src/app/lightning/node/node.component.html
View File

@ -57,7 +57,7 @@
</tr>
<tr *ngIf="(avgChannelDistance$ | async) as avgDistance;">
<td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
<td>{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
<td class="direction-ltr">{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
</tr>
</tbody>
</table>

25
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
View File

@ -53,31 +53,6 @@
height: 145px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.pool-distribution {
min-height: 56px;
display: block;

25
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
View File

@ -34,31 +34,6 @@
}
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.bottom-padding {
@media (max-width: 992px) {
padding-bottom: 65px

25
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
View File

@ -53,31 +53,6 @@
height: 145px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.pool-distribution {
min-height: 56px;
display: block;

50
frontend/src/styles.scss
View File

@ -746,7 +746,37 @@ th {
font-family: monospace;
}
.full-container .card-header .formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -100px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.direction-ltr {
direction: ltr;
}
.rtl-layout {
text-align: start;
.navbar-brand {
margin-right: 0px;
@ -882,19 +912,25 @@ th {
}
}
.container-graph {
.chart {
direction: ltr;
}
.formRadioGroup {
@media (min-width: 830px) {
float: left;
}
}
.container-graph, .full-container, .toggle-holder {
@extend .container-graph;
.formRadioGroup {
@extend .formRadioGroup;
direction: ltr;
}
}
.full-container {
@extend .full-container;
.formRadioGroup {
@extend .formRadioGroup;
direction: ltr;
.card-header, h1, h2, h3 {
direction: rtl;
}
}