From b60d9cdfbc7873742ee0e428e19e21793548176a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 5 Mar 2020 16:13:46 +0700
Subject: [PATCH] General responsive improvments.

---
 .../app/components/about/about.component.html |  2 +-
 .../components/address/address.component.html |  2 +-
 .../app/components/block/block.component.html |  6 +-
 .../blockchain-blocks.component.scss          | 57 ++++++-----------
 .../blockchain-blocks.component.ts            | 18 ++----
 .../blockchain/blockchain.component.scss      |  5 --
 .../components/footer/footer.component.html   |  2 +-
 .../components/footer/footer.component.scss   |  1 +
 .../latest-blocks.component.html              |  4 +-
 .../latest-blocks.component.scss              |  6 ++
 .../latest-transactions.component.html        | 12 ++--
 .../mempool-blocks.component.scss             | 64 ++++++++-----------
 .../app/components/start/start.component.html |  2 +-
 .../statistics/statistics.component.html      |  2 +-
 .../transaction/transaction.component.html    |  6 +-
 frontend/src/styles.scss                      |  3 +
 16 files changed, 83 insertions(+), 109 deletions(-)

diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html
index 0c632eed7..7569b01b5 100644
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -1,4 +1,4 @@
-<div class="container-lg">
+<div class="container-xl">
   <div class="text-center">
     <br />
     <img src="./assets/mempool-tube.png" width="63" height="63" />
diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 820303afd..3960f52e7 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -1,4 +1,4 @@
-<div class="container-lg">
+<div class="container-xl">
   <h1 style="float: left;">Address</h1>
   <a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">{{ addressString }}</a>
   <app-clipboard [text]="addressString"></app-clipboard>
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 395facb3c..1e5859c9e 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -1,4 +1,4 @@
-<div class="container-lg">
+<div class="container-xl">
 
   <div style="position: relative;">
     <app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain>
@@ -41,11 +41,11 @@
             <tbody>
               <tr>
                 <td>Hash</td>
-                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 32 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
+                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 16 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
               </tr>
               <tr>
                 <td>Previous Block</td>
-                <td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 32 }}</a></td>
+                <td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 16 }}</a></td>
               </tr>
               <ng-template [ngIf]="fees" [ngIfElse]="loadingFees">
                 <tr>
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index d15d61928..79c59b2de 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -60,44 +60,29 @@
   z-index: 100;
 }
 
-@media (max-width: 767.98px) {
-  .block-height {
-    bottom: 125px;
-    left: inherit;
-    text-shadow: inherit;
-    z-index: inherit;
-  }
-
-  .blocks-container {
-    top: -40px;
-  }
+.bitcoin-block::after {
+  content: '';   
+  width: 125px;
+  height: 24px;
+  position:absolute;
+  top: -24px;
+  left: -20px;
+  background-color: #232838;
+  transform:skew(40deg);
+  transform-origin:top;    
 }
 
-@media (min-width: 768px) {
-  .bitcoin-block::after {
-    content: '';   
-    width: 125px;
-    height: 24px;
-    position:absolute;
-    top: -24px;
-    left: -20px;
-    background-color: #232838;
-    transform:skew(40deg);
-    transform-origin:top;    
-  }
-
-  .bitcoin-block::before {
-    content: '';
-    width: 20px;
-    height: 125px;
-    position: absolute;
-    top: -12px;
-    left: -20px;
-    background-color: #191c27; 
-    
-    transform: skewY(50deg);
-    transform-origin: top;     
-  }
+.bitcoin-block::before {
+  content: '';
+  width: 20px;
+  height: 125px;
+  position: absolute;
+  top: -12px;
+  left: -20px;
+  background-color: #191c27; 
+  
+  transform: skewY(50deg);
+  transform-origin: top;     
 }
 
 .black-background {
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 262ea0c6c..64a243817 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -62,19 +62,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
   getStyleForBlock(block: Block) {
     const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100;
-    if (window.innerWidth <= 768) {
-      return {
-        top: 155 * this.blocks.indexOf(block) + 'px',
-        background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
-          #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
-      };
-    } else {
-      return {
-        left: 155 * this.blocks.indexOf(block) + 'px',
-        background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
-          #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
-      };
-    }
+    return {
+      left: 155 * this.blocks.indexOf(block) + 'px',
+      background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
+        #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
+    };
   }
 
 }
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss
index ab3f8c011..56621df27 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -26,11 +26,6 @@
   top: 75px;
 }
 
-@media (max-width: 767.98px) {
-  .position-container {
-  }
-}
-
 /*
 @media (min-width: 1920px) {
   .position-container {
diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html
index 313a7d2dc..e3b81a329 100644
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@@ -1,5 +1,5 @@
 <footer class="footer">
-  <div class="container-lg">
+  <div class="container-xl">
     <div class="row text-center" *ngIf="memPoolInfo">
       <div class="col">
         <span class="txPerSecond">Tx weight per second:</span>
diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index 14648a057..aa20307b0 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@@ -5,6 +5,7 @@
   height: 60px;
   background-color: #1d1f31;
   box-shadow: 15px 15px 15px 15px #000;
+  z-index: 10;
 }
 
 .sub-text {
diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
index 4983a2fb9..5b4d7b5c2 100644
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
@@ -4,7 +4,6 @@
     <th class="d-none d-md-block" style="width: 20%;">Timestamp</th>
     <th style="width: 20%;">Mined</th>
     <th class="d-none d-lg-block" style="width: 15%;">Transactions</th>
-    <th class="d-none d-lg-block" style="width: 15%;">Size</th>
     <th style="width: 20%;">Filled</th>
   </thead>
   <tbody>
@@ -13,10 +12,10 @@
       <td class="d-none d-md-block">{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
       <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</td>
       <td class="d-none d-lg-block">{{ block.tx_count }}</td>
-      <td class="d-none d-lg-block">{{ block.size | bytes: 2 }}</td>
       <td>
         <div class="progress position-relative">
           <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
+          <div class="progress-text">{{ block.size | bytes: 2 }}</div>
         </div>
       </td>
     </tr>
@@ -26,7 +25,6 @@
         <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
         <td><span class="skeleton-loader"></span></td>
         <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
-        <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
         <td><span class="skeleton-loader"></span></td>
       </tr>
     </ng-template>
diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.scss b/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
index 589dc0368..240650330 100644
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
@@ -16,3 +16,9 @@
       display: table-cell !important;
   }
 }
+
+.progress-text {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/latest-transactions/latest-transactions.component.html b/frontend/src/app/components/latest-transactions/latest-transactions.component.html
index 21ef37ad0..88fb1bdba 100644
--- a/frontend/src/app/components/latest-transactions/latest-transactions.component.html
+++ b/frontend/src/app/components/latest-transactions/latest-transactions.component.html
@@ -1,9 +1,9 @@
 <table class="table table-borderless">
   <thead>
-    <th>Transaction ID</th>
-    <th class="d-none d-xl-block" style="width: 180px;">Value</th>
-    <th style="width: 125px;">Size</th>
-    <th>Fee</th>
+    <th style="width: 58%">Transaction ID</th>
+    <th class="d-none d-xl-block" style="width: 12%;">Value</th>
+    <th style="width: 10%;">Size</th>
+    <th style="width: 15%">Fee</th>
   </thead>
   <tbody>
     <ng-container *ngIf="(transactions$ | async) as transactions">
@@ -20,8 +20,8 @@
     <ng-template [ngIf]="isLoading">
       <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
         <td><span class="skeleton-loader"></span></td>
-        <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
-        <td><span class="skeleton-loader"></span></td>
+        <td class="d-none d-lg-block" style="width: 25%;"><span class="skeleton-loader"></span></td>
+        <td style="width: 25%;"><span class="skeleton-loader"></span></td>
         <td><span class="skeleton-loader"></span></td>
       </tr>
     </ng-template>
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index 9ea6bd6ef..1c5259abb 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -54,47 +54,37 @@
   font-size: 12px;
 }
 
-@media (max-width: 767.98px) {
-  .mempool-blocks-container {
-    position: absolute;
-    left: -165px;
-    top: -40px;
-  }
+.bitcoin-block::after {
+  content: '';   
+  width: 125px;
+  height: 24px;
+  position:absolute;
+  top: -24px;
+  left: -20px;
+  background-color: #232838;
+  transform:skew(40deg);
+  transform-origin:top;    
 }
 
-@media (min-width: 768px) {
-  .bitcoin-block::after {
-    content: '';   
-    width: 125px;
-    height: 24px;
-    position:absolute;
-    top: -24px;
-    left: -20px;
-    background-color: #232838;
-    transform:skew(40deg);
-    transform-origin:top;    
-  }
+.bitcoin-block::before {
+  content: '';
+  width: 20px;
+  height: 125px;
+  position: absolute;
+  top: -12px;
+  left: -20px;
+  background-color: #191c27; 
+  
+  transform: skewY(50deg);
+  transform-origin: top;     
+}
 
-  .bitcoin-block::before {
-    content: '';
-    width: 20px;
-    height: 125px;
-    position: absolute;
-    top: -12px;
-    left: -20px;
-    background-color: #191c27; 
-    
-    transform: skewY(50deg);
-    transform-origin: top;     
-  }
+.mempool-block.bitcoin-block::after {
+  background-color: #403834; 
+}
 
-  .mempool-block.bitcoin-block::after {
-    background-color: #403834; 
-  }
-
-  .mempool-block.bitcoin-block::before {
-    background-color: #2d2825; 
-  }
+.mempool-block.bitcoin-block::before {
+  background-color: #2d2825; 
 }
 
 .black-background {
diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html
index 390acd6cb..de985f824 100644
--- a/frontend/src/app/components/start/start.component.html
+++ b/frontend/src/app/components/start/start.component.html
@@ -1,4 +1,4 @@
-<div class="container-lg">
+<div class="container-xl">
   <div style="position: relative;">
     <app-blockchain></app-blockchain>
   </div>
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 878f76c45..74f0365cc 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -1,4 +1,4 @@
-<div class="container-lg" style="max-width: 100%;">
+<div class="container-xl" style="max-width: 100%;">
   <!--
   <ul class="nav nav-pills" id="myTab" role="tablist">
       <li class="nav-item">
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 71a401ae4..f153c7825 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -1,9 +1,11 @@
-<div class="container-lg">
+<div class="container-xl">
 
   <div style="position: relative;">
     <app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
   </div>
 
+  <div class="transaction-content">
+
   <div class="title-block">
     <h1 style="float: left;">Transaction</h1>
     <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a>
@@ -138,6 +140,8 @@
       <i>{{ error.error }}</i>
     </div>
   </ng-template>
+
+</div>
 </div>
 
 <br>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 64db16396..59d5ba4dc 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -314,3 +314,6 @@ hr {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+tr {
+  white-space: nowrap;
+}