From 5090f8adc09fa7e9790b47b41198b9944c730b9b Mon Sep 17 00:00:00 2001
From: Prema <premlatha.blaze@gmail.com>
Date: Mon, 12 Aug 2019 17:59:05 +0530
Subject: [PATCH] UI changes

---
 .../block-detail-list.component.html          | 34 +++++++++----------
 .../latestblocks/latestblocks.component.html  | 24 ++++++-------
 src/assets/css/responsive.css                 |  7 ++--
 src/assets/css/style.css                      |  8 ++---
 4 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/app/view/home/block-detail-list/block-detail-list.component.html b/src/app/view/home/block-detail-list/block-detail-list.component.html
index f34d90d..2826763 100644
--- a/src/app/view/home/block-detail-list/block-detail-list.component.html
+++ b/src/app/view/home/block-detail-list/block-detail-list.component.html
@@ -25,7 +25,7 @@
   </div>
 </div> -->
 <div class="row" *ngIf="latestblockdetail">
-  <div class="col-md-2">
+  <div class="col-md-3">
     <div
       class="text-center detail_div"
     >
@@ -39,7 +39,7 @@
       </p>
     </div>
   </div>
-  <div class="col-md-2">
+  <div class="col-md-3">
     <div
       class="text-center detail_div"
     >
@@ -48,12 +48,12 @@
         class="count mb-0"
         [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
       >
-        {{ latestblockdetail.letest_block_num }}
+        {{ latestblockdetail.letest_block_num }} <span class="">{{ latestblockdetail.letest_block_duration }}</span>
       </p>
-      <span class="">{{ latestblockdetail.letest_block_duration }}</span>
+     
     </div>
   </div>
-  <div class="col-md-3">
+  <!-- <div class="col-md-3">
     <div class="text-center detail_div" #minhgt>
       <p class="mb-2 desc">{{ "home.LATEST_BLOCK1" | translate }}</p>
       <div
@@ -61,42 +61,42 @@
         [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
       >
 
-        <!-- <p class="difficulty_datas">Cuckaroo : {{latestblockdetail.targetdifficultycuckaroo | number}} / {{latestblockdetail.TotalDifficultyCuckatoo | number}}</p> -->
+        <p class="difficulty_datas">Cuckaroo : {{latestblockdetail.targetdifficultycuckaroo | number}} / {{latestblockdetail.TotalDifficultyCuckatoo | number}}</p>
         <div class="difficulty_datas">
           <span class="day60_txt">Cuckoo : </span>
-            <!-- <span>Target:</span> -->
+            <span>Target:</span>
             <span>{{ latestblockdetail.targetdifficultycuckatoo | number }}</span>
-            <!-- <span>Total :</span><span>{{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span> -->
+            <span>Total :</span><span>{{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span>
 
         </div>
         <div class="difficulty_datas">
             <span class="day60_txt">ProgPow : </span>
-              <!-- <span>Target:</span> -->
+              <span>Target:</span>
               <span class="diff_span" style="width:85px;" title="{{ latestblockdetail.targetdifficultyprogpow | number }}">{{ latestblockdetail.targetdifficultyprogpow | number }}</span>
-              <!-- <span>Total:</span><span class="diff_span" title="{{ latestblockdetail.TotalDifficultyProgpow | number }}">{{ latestblockdetail.TotalDifficultyProgpow | number }}</span> -->
+              <span>Total:</span><span class="diff_span" title="{{ latestblockdetail.TotalDifficultyProgpow | number }}">{{ latestblockdetail.TotalDifficultyProgpow | number }}</span>
           </div>
           <div class="difficulty_datas">
              <span class="day60_txt"> RandomX : </span>
-                <!-- <span>Target:</span> -->
+                <span>Target:</span>
                 <span>{{ latestblockdetail.targetdifficultyrandomx | number }}</span>
-                <!-- <span>Total:</span><span>{{ latestblockdetail.TotalDifficultyRandomx | number }}</span> -->
+                <span>Total:</span><span>{{ latestblockdetail.TotalDifficultyRandomx | number }}</span>
             </div>
-        <!-- <p class="difficulty_datas">
+        <p class="difficulty_datas">
           ProgPow : {{ latestblockdetail.targetdifficultyprogpow | number }} /
           {{ latestblockdetail.TotalDifficultyProgpow | number }}
         </p>
         <p class="difficulty_datas">
           RandomX : {{ latestblockdetail.targetdifficultyrandomx | number }} /
           {{ latestblockdetail.TotalDifficultyRandomx | number }}
-        </p> -->
+        </p>
       </div>
     </div>
-  </div>
+  </div> -->
   <div class="col-md-3">
     <div class="text-center detail_div" #minhgt>
       <p class="mb-2 desc">{{ "home.LATEST_BLOCK2" | translate }}</p>
       <div
-        class=" text-center d-inline-block"
+        class=" text-left mx-auto d-inline-block"
         [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
       >
 
@@ -130,7 +130,7 @@
       </div>
     </div>
   </div>
-  <div class="col-md-2">
+  <div class="col-md-3">
     <div
       class="text-center detail_div"
     >
diff --git a/src/app/view/home/latestblocks/latestblocks.component.html b/src/app/view/home/latestblocks/latestblocks.component.html
index f53b7fc..b2fd220 100644
--- a/src/app/view/home/latestblocks/latestblocks.component.html
+++ b/src/app/view/home/latestblocks/latestblocks.component.html
@@ -168,33 +168,33 @@
 
       <div class="mobile_table peer_table">
 
-          <div class="row">
-            <div class="col-6 col-md-4 tble_col">
+          <div class="">
+            <div class=" tble_col">
               <div class="block_div">
                   <h5 class="mb-0">Capabilities</h5>
                 </div>
             </div>
-            <div class="col-6 col-md-4 tble_col">
-              <div class="block_div">
+            <div class=" tble_col">
+              <div class="block_div text-left">
                 <h5 class="mb-0">User Agent</h5>
               </div>
             </div>
-            <div class="col-6 col-md-4 tble_col">
+            <div class=" tble_col">
               <div class="block_div">
                 <h5 class="mb-0">Version</h5>
               </div>
             </div>
-            <div class="col-6 col-md-4 tble_col">
+            <div class="tble_col">
               <div class="block_div">
                 <h5 class="mb-0">Addr</h5>
               </div>
             </div>
-            <div class="col-7 col-sm-6 col-md-4 tble_col">
-              <div class="block_div">
+            <div class=" tble_col">
+              <div class="block_div text-left pl-4">
                 <h5 class="mb-0">Direction</h5>
               </div>
             </div>
-            <div class="col-5 col-sm-6 col-md-4 tble_col">
+            <div class="tble_col">
               <div class="block_div">
                 <h5 class="mb-0">Total Difficulty</h5>
               </div>
@@ -255,7 +255,7 @@
           <span class="blck_value">{{ peer.user_agent }}</span>
         </div>
       </div>
-      <div class="col-6 col-md-3 tble_col">
+      <div class="col-6 col-md-3 tble_col ver_col">
         <div class="block_div">
             <h6>Version</h6>
          <span class="blck_value">{{ peer.version }}</span>
@@ -274,9 +274,9 @@
         </div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div" title="Cuckaroo : {{ peer.total_difficulty.cuckaroo | number }}, Cuckatoo :  {{ peer.total_difficulty.cuckatoo | number }}, Progpow : {{ peer.total_difficulty.progpow | number }}, Randomx : {{ peer.total_difficulty.randomx | number }}">
+        <div class="block_div peers_diff text-left" title="Cuckaroo : {{ peer.total_difficulty.cuckaroo | number }}, Cuckatoo :  {{ peer.total_difficulty.cuckatoo | number }}, Progpow : {{ peer.total_difficulty.progpow | number }}, Randomx : {{ peer.total_difficulty.randomx | number }}">
             <h6>Total Difficulty</h6>
-          <span class="blck_value peers_diff">{{ peer.total_difficulty.cuckaroo }},{{ peer.total_difficulty.cuckatoo}},{{ peer.total_difficulty.progpow}},{{ peer.total_difficulty.randomx}}</span>
+          <span class="blck_value ">{{ peer.total_difficulty.cuckaroo }},{{ peer.total_difficulty.cuckatoo}},{{ peer.total_difficulty.progpow}},{{ peer.total_difficulty.randomx}}</span>
         </div>
       </div>
     </div>
diff --git a/src/assets/css/responsive.css b/src/assets/css/responsive.css
index bfeb187..a683a4b 100644
--- a/src/assets/css/responsive.css
+++ b/src/assets/css/responsive.css
@@ -1,14 +1,17 @@
 @media(min-width: 992px){
     .block_div {min-width: 136px; text-align: center;padding: .75rem; }
-    .peer_table .block_div{min-width: 180px;}
+    .peer_table .block_div{min-width: 148px;  text-align: center;}
     .mobile_table{border-bottom: 1px solid #dee2e6; padding: 0 15px;display: table;  width: 100%;}
     .view_moble_tble{border-bottom: 1px solid #dee2e6;}
     .mobile_table .row{display: table;}
 .mobile_table .tble_col{padding: 0;display: table-cell;  max-width: unset;  flex: unset;}
 .mobile_table h6, .view_moble_tble h6, .peer_mobile_table h6{display: none;}
 .view_moble_tble .block_div{text-align: left;}
-.peer_table_data .col-md-3 { flex: 0 0 16%;  max-width: 16%;}
+.peer_table_data .col-md-3 { flex: 0 0 13%;  max-width: 13%;}
 .peer_table{    margin-left: -20px;    border-bottom: none}
+.peer_table .tble_col{display: inline-block;}
+/* .ver_col .block_div{min-width: 10px;max-width: 15px;} */
+.block_div.peers_diff{  min-width: 368px;  }
 }
 
 @media(max-width: 1199px){
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index fc27450..b9e217d 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -512,12 +512,8 @@ margin-right: 10px;
   min-width: 5rem;
   padding: 0;
 }
-.peers_diff{
-  width: 160px;
-    overflow: hidden;
-    display: inline-block;
-    text-overflow: ellipsis;
-}
+
+.peers_diff .blck_value{word-wrap: break-word;}
 /**********************************************Dark Theme CSS********************************/
 body.dark_theme {
   background-color: #27314b;