Merge pull request #2114 from mempool/nymkappa/bugfix/graph-download-button-no-wrap

Fix graph titles layout and text

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.block-fee-rates">Block Fee Rates</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.block-fees">Block Fees</span>
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html

@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -3,10 +3,13 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.block-rewards">Block Rewards</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
+  
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html

@@ -1,10 +1,12 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -23,10 +23,12 @@
   </div>
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -3,10 +3,13 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.pools-dominance">Pools Dominance</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -32,10 +32,12 @@
   </div>
 
   <div class="card-header" *ngIf="!widget">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.pools">Pools Ranking</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
       *ngIf="!widget && (miningStatsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/components/statistics/statistics.component.html

@@ -3,11 +3,12 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
+          <div class="d-flex d-md-block align-items-baseline">
             <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
               <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
             </button>
+          </div>  
 
           <form [formGroup]="radioGroupForm" class="formRadioGroup"
             [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
@@ -84,12 +85,13 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
+          <div class="d-flex d-md-block align-items-baseline">
             <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
               <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
             </button>
           </div>  
+        </div>
 
         <div class="card-body">
           <div class="incoming-transactions-graph">

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html

@@ -1,10 +1,12 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
+    <div class="d-flex d-md-block align-items-baseline">
       <span i18n="mining.nodes-networks">Nodes count by network</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(nodesNetworkObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html

@@ -1,10 +1,12 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
+    <div class="d-flex d-md-block align-items-baseline">
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+      <span i18n="mining.channels-and-capacity">Channels & Capacity</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
+    </div>
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(capacityObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">