From c62ed62db6924746882eb379f8221192d332a3b6 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 5 May 2022 17:48:57 +0900
Subject: [PATCH] Change download button position so it's not hidden on mobile

---
 .../block-fee-rates-graph.component.html                      | 2 +-
 .../block-fee-rates-graph.component.scss                      | 4 ++--
 .../block-fees-graph/block-fees-graph.component.html          | 2 +-
 .../block-fees-graph/block-fees-graph.component.scss          | 4 ++--
 .../block-rewards-graph/block-rewards-graph.component.html    | 2 +-
 .../block-rewards-graph/block-rewards-graph.component.scss    | 4 ++--
 .../components/hashrate-chart/hashrate-chart.component.html   | 2 +-
 .../components/hashrate-chart/hashrate-chart.component.scss   | 4 ++--
 .../hashrates-chart-pools/hashrate-chart-pools.component.html | 2 +-
 .../hashrates-chart-pools/hashrate-chart-pools.component.scss | 4 ++--
 .../app/components/pool-ranking/pool-ranking.component.html   | 2 +-
 .../app/components/pool-ranking/pool-ranking.component.scss   | 4 ++--
 .../src/app/components/statistics/statistics.component.html   | 4 ++--
 .../src/app/components/statistics/statistics.component.scss   | 4 ++--
 14 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
index 4ef952848..a4325927f 100644
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
@@ -1,7 +1,7 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fee-rates">Block fee rates</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
index 54dbe5fad..007a2cd06 100644
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
index fc11bc827..88ce7db8a 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
@@ -1,7 +1,7 @@
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-fees">Block fees</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
index 54dbe5fad..007a2cd06 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
index d29cd6a21..32b4a66a0 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
@@ -2,7 +2,7 @@
 
   <div class="card-header mb-0 mb-md-4">
     <span i18n="mining.block-rewards">Block rewards</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
index 54dbe5fad..007a2cd06 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index 8075c3b88..532d433bc 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -19,7 +19,7 @@
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
     <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index 86c1f8ec3..fa044a4d6 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -59,11 +59,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
index 7fe787888..67cd3ff83 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
@@ -2,7 +2,7 @@
 
   <div class="card-header  mb-0 mb-md-4">
     <span i18n="mining.pools-dominance">Mining pools dominance</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
index e89c8f173..b15df44fa 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@@ -53,11 +53,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 50675eee0..5d3d5dd3d 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -25,7 +25,7 @@
 
   <div class="card-header" *ngIf="!widget">
     <span i18n="mining.mining-pool-share">Mining pools share</span>
-    <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart()">
+    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
       <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
     </button>
 
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index 2d253eef6..d5eedd5d3 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -37,11 +37,11 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 254aec3f5..734ebbd18 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -4,7 +4,7 @@
       <div class="card mb-3">
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
-          <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('mempool')">
+          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
             <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
           </button>
 
@@ -84,7 +84,7 @@
         <div class="card-header">
             <i class="fa fa-area-chart"></i> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
         </div>
-        <button class="btn" style="position: absolute; right: 30px" (click)="onSaveChart('incoming')">
+        <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
           <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
         </button>
 
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index 530e62385..49765c71c 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -53,11 +53,11 @@
   }
 }
 .formRadioGroup.mining {
-  @media (min-width: 1130px) {
+  @media (min-width: 991px) {
     position: relative;
     top: -65px;
   }
-  @media (min-width: 830px) and (max-width: 1130px) {
+  @media (min-width: 830px) and (max-width: 991px) {
     position: relative;
     top: 0px;
   }