Move all charts into /graphs page - Fix mining charts layouts

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

@@ -1,7 +1,27 @@
+.card-header {
+  border-bottom: 0;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
+}
+
+.full-container {
+  padding: 0px 15px;
+  width: 100%;
+  height: calc(100% - 140px);
+  @media (max-width: 992px) {
+    height: calc(100% - 190px);
+  };
+  @media (max-width: 575px) {
+    height: calc(100% - 230px);
+  };
+}
+
 .chart {
   max-height: 400px;
   @media (max-width: 767.98px) {
-    max-height: 270px;
+    max-height: 230px;
   }
 }
 .chart-widget {
@@ -17,10 +37,17 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
+  @media (min-width: 1130px) {
+    position: relative;
+    top: -65px;
+  }
+  @media (min-width: 830px) and (max-width: 1130px) {
+    position: relative;
+    top: 0px;
+  }
   @media (min-width: 830px) {
-    margin-left: 2%;
     flex-direction: row;
-    float: left;
+    float: right;
     margin-top: 0px;
   }
   .btn-sm {
@@ -31,12 +58,21 @@
   }
 }
 
-@media (max-width: 767.98px) { 
+.bottom-padding {
+  @media (max-width: 992px) {
+    padding-bottom: 65px
+  };
+  @media (max-width: 576px) {
+    padding-bottom: 65px
+  };
+}
+
+@media (max-width: 767.98px) {
   .pools-table th,
   .pools-table td {
-      padding: .3em !important;
-   }
- }
+    padding: .3em !important;
+  }
+}
 
 .loadingGraphs {
   position: absolute;
@@ -44,9 +80,6 @@
   left: calc(50% - 15px);
   z-index: 100;
 }
-.loadingGraphs.widget {
-  top: 25%;
-}
 
 .pool-distribution {
   min-height: 56px;