Merge pull request #3720 from mempool/simon/fix-global-footer-graph-pages

Fix height on graphs pages with footer
2024-11-20 02:11:49 +01:00 · 2023-05-06 00:55:56 +04:00 · 2023-05-06 00:55:56 +04:00 · 9c9837d722
commit 9c9837d722
parent a7dff0effe 494ceca44e
23 changed files with 122 additions and 101 deletions
--- 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
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- 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
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,18 +21,20 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
+  display: flex;
+  flex: 1;
  width: 100%;
-  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
  @media (max-width: 992px) {
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- 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
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,16 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
+  display: flex;
+  flex: 1;
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
--- 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
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,18 +21,20 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
+  display: flex;
+  flex: 1;
  width: 100%;
-  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
  @media (max-width: 992px) {
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@ -64,8 +64,7 @@

 <app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>

-<br />
-<main>
+<main style="margin-top: 24px;">
  <router-outlet></router-outlet>
 </main>

--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@ -75,7 +75,7 @@
    </form>
  </div>

-  <div [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
+  <div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
      (chartInit)="onChartInit($event)">
    </div>
@ -136,7 +136,6 @@
      </tbody>
    </table>
  </div>
-
 </div>


--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@ -10,6 +10,7 @@
  padding: 0px 15px;
  width: 100%;
  height: calc(100% - 140px);
+  padding-bottom: 20px;
  @media (max-width: 992px) {
    height: calc(100% - 190px);
  };
@ -33,15 +34,6 @@
  }
 }

-.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 {
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@ -1,5 +1,5 @@
 .container-graph {
-  padding: 0px 15px 60px;
+  padding: 0px 15px 10px;
 }

 .card-header {
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@ -461,8 +461,6 @@
    </ng-template>
  </ng-template>

-  <br>
-
 </div>

 <ng-template #feeTable>
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
@ -19,4 +19,4 @@
      <div class="spinner-border text-light"></div>
    </div>
  </ng-container>
-</div>
+</div>
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
@ -4,6 +4,9 @@
  &.widget {
    height: 250px;
  }
+  &.graph {
+    margin-bottom: 20px;
+  }
 }

 .card-header {
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.scss
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.scss
@ -4,17 +4,20 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    height: 100%;
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }
 .full-container.widget {
  min-height: 240px;
@ -34,8 +37,10 @@
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
+  padding-top: 30px;
  padding-bottom: 20px;
  padding-right: 10px;
  @media (max-width: 992px) {
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
@ -10,7 +10,7 @@
    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
  </div>

-  <div class="container pb-lg-0 bottom-padding">
+  <div class="container pb-lg-0">
    <div class="pb-lg-5">
      <div class="chart w-100" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
        (chartInit)="onChartInit($event)">
@ -54,5 +54,4 @@
      </tbody>
    </table>
  </div>
-
 </div>
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
@ -32,15 +32,6 @@
  }
 }

-.bottom-padding {
-  @media (max-width: 992px) {
-    padding-bottom: 65px
-  };
-  @media (max-width: 576px) {
-    padding-bottom: 65px
-  };
-}
-
 .rank {
  width: 8%;
  @media (max-width: 576px) {
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
@ -117,5 +117,4 @@

    </table>
  </div>
-
 </div>
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
@ -38,7 +38,7 @@
    </small>
  </div>

-  <div *ngIf="!indexingInProgress else indexing" [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
+  <div *ngIf="!indexingInProgress else indexing" [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
      (chartInit)="onChartInit($event)">
    </div>
@ -74,7 +74,6 @@
      </tbody>
    </table>
  </div>
-
 </div>

 <ng-template #loadingReward>
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@ -16,6 +16,7 @@
  @media (max-width: 575px) {
    height: calc(100% - 230px);
  };
+  margin-bottom: 25px;
 }

 .chart {
@ -34,15 +35,6 @@
  }
 }

-.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 {
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
@ -114,5 +114,4 @@
  
    </table>
  </div>
-
 </div>
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;