UI changes

src/app/shared/components/header/header.component.html

@@ -2,7 +2,7 @@
   <nav class="navbar navbar-expand navbar-light bg-transparent">
     <div class="container-fluid">
       <div class="collapse navbar-collapse home_mble_hdr" id="navbarSupportedContent">
-          
+
         <ul class="navbar-nav ml-auto">
 		  <!-- <li *ngIf="TimeArr" class="d-none d-sm-inline-block"><h1 class="test_msg d-inline-block mb-0 align-middle mr-3">{{'home.HEADER_TEXT' | translate}}</h1>
             <h1 class="test_msg align-middle mr-3 d-inline-block mb-0">{{'home.COUNTDOWN' | translate}}</h1>
@@ -15,7 +15,8 @@
 
           </li> -->
           <li class="home_tst_net mr-3">
-              <span>You are viewing </span> 
+            <a href="https://epic.tech/" target="_blank" class="text_underline mr-2">Epic Cash</a>
+              <span>You are viewing </span>
               <ul class="list-unstyled d-inline-block mb-0">
                   <li class="nav-item dropdown">
                       <a
@@ -26,20 +27,20 @@
                         aria-haspopup="true"
                         aria-expanded="false"
                       >
-                      Testnet
+                      Test Net
                       </a>
                       <div class="dropdown-menu net_dropdwn" aria-labelledby="navbarDropdown">
-                        <a class="dropdown-item p-2 disabled" style="background-color: #00000024;" target = '_blank' href="#">Mainnet</a
+                        <a class="dropdown-item p-2 disabled" style="background-color: #00000024;" target = '_blank' href="#">Main Net</a
                         >
-                       
+
                       </div>
                     </li>
               </ul>
-               
+
             </li>
           <li class="nav-item px-2 dropdown bg-white">
-            
+
-            <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> 
+            <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span>
             <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
             <select class="langbut py-2 mx-1" #langSelect (change)="translate.changeLang(langSelect.value)">
               <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>

src/app/shared/components/siteheader/siteheader.component.html

@@ -13,10 +13,10 @@
 
               <a class="nav-link dropdown-toggle bg-white" href="#" id="navbarDropdown" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Testnet
+                Test Net
               </a>
               <div class="dropdown-menu net_dropdwn" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item p-2 disabled" href="https://explorer2.epic.tech">Mainnet</a>
+                <a class="dropdown-item p-2 disabled" href="https://explorer2.epic.tech">Main Net</a>
               </div>
             </li>
           </ul>
@@ -32,9 +32,9 @@
         </button>
       </div>
       <div class="mble_view_hdr">
-          
+
         <div class="nav-item dropdown bg-white px-2 d-inline-block ml-2 order-1 order-sm-2">
-          <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> 
+          <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span>
           <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
           <select class="langbut py-2 mx-1" #langSelect (change)="translate.changeLang(langSelect.value)">
             <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
@@ -46,9 +46,9 @@
             src="assets/img/light_theme.png" height="20" class="dark_theme_display"></button>
       </div>
     </div>
-    
+
     <div class="position-relative d-block d-sm-none w-100 mt-3">
-        
+
       <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input"
         (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="{{'home.SEARCH_TEXT' | translate}}">
       <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
@@ -64,10 +64,10 @@
 
             <a class="nav-link dropdown-toggle bg-white" href="#" id="navbarDropdown" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Testnet
+              Test Net
             </a>
             <div class="dropdown-menu net_dropdwn" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item p-2 disabled" href="https://explorer2.epic.tech">Mainnet</a>
+              <a class="dropdown-item p-2 disabled" href="https://explorer2.epic.tech">Main Net</a>
             </div>
           </li>
         </ul>

src/app/view/home/block-detail-list/block-detail-list.component.html

@@ -35,6 +35,7 @@
         [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
       >
         {{ latestblockdetail.block_height | number }}
+        <span class="">Blocks</span>
       </p>
     </div>
   </div>
@@ -56,35 +57,34 @@
     <div class="text-center detail_div" #minhgt>
       <p class="mb-2 desc">{{ "home.LATEST_BLOCK1" | translate }}</p>
       <div
-        class=" text-left d-inline-block"
+        class=" text-center d-inline-block"
-        title="Target / Total Block Difficulty"
         [ngClass]="latestblockdetail.blink == true ? 'item-highlight' : ''"
       >
 
         <!-- <p class="difficulty_datas">Cuckaroo : {{latestblockdetail.targetdifficultycuckaroo | number}} / {{latestblockdetail.TotalDifficultyCuckatoo | number}}</p> -->
         <div class="difficulty_datas">
-          <span class="day60_txt">Cuckoo</span> 
+          <span class="day60_txt">Cuckoo</span>
           <div>
-            <span>Target Difficulty:</span><span>{{ latestblockdetail.targetdifficultycuckatoo | number }}</span><br>
+            <span>Target:</span><span>{{ latestblockdetail.targetdifficultycuckatoo | number }}, </span>
-            <span>Total Difficulty</span><span>{{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span>
+            <span>Total :</span><span>{{ latestblockdetail.TotalDifficultyCuckatoo | number }}</span>
           </div>
-          
+
         </div>
         <div class="difficulty_datas">
-            <span class="day60_txt">ProgPow </span> 
+            <span class="day60_txt">ProgPow </span>
             <div>
-              <span>Target Difficulty:</span><span>{{ latestblockdetail.targetdifficultyprogpow | number }}</span><br>
+              <span>Target:</span><span class="diff_span" title="{{ latestblockdetail.targetdifficultyprogpow | number }}">{{ latestblockdetail.targetdifficultyprogpow | number }} </span>,
-              <span>Total Difficulty</span><span>{{ latestblockdetail.TotalDifficultyProgpow | number }}</span>
+              <span>Total:</span><span class="diff_span" title="{{ latestblockdetail.TotalDifficultyProgpow | number }}">{{ latestblockdetail.TotalDifficultyProgpow | number }}</span>
             </div>
-            
+
           </div>
           <div class="difficulty_datas">
              <span class="day60_txt"> RandomX </span>
               <div>
-                <span>Target Difficulty:</span><span>{{ latestblockdetail.targetdifficultyrandomx | number }}</span><br>
+                <span>Target:</span><span>{{ latestblockdetail.targetdifficultyrandomx | number }}, </span>
-                <span>Total Difficulty</span><span>{{ latestblockdetail.TotalDifficultyRandomx | number }}</span>
+                <span>Total:</span><span>{{ latestblockdetail.TotalDifficultyRandomx | number }}</span>
               </div>
-              
+
             </div>
         <!-- <p class="difficulty_datas">
           ProgPow : {{ latestblockdetail.targetdifficultyprogpow | number }} /

src/assets/css/responsive.css

@@ -8,7 +8,7 @@
 .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{    margin-left: -20px;    border-bottom: none}
 }
 
 @media(max-width: 1199px){
@@ -25,7 +25,7 @@
     .blck_value {font-size: 13px; }
     .block_div {min-width: 110px;}
     .peer_table .block_div {min-width: 145px;}
-    
+
 }
 @media (min-width: 768px) and (max-width: 991px){
     .detail_div{padding: 10px 0;}
@@ -78,16 +78,16 @@
     /* .view_page_header{text-align: center;} */
     .view_page_header .navbar-brand{display: block; margin: 0 auto;}
     .view_page_header .ml-auto{margin: 0 !important; display: inherit;}
-    
+
 }
 @media(max-width: 470px){
     .navbar-expand .navbar-collapse.home_mble_hdr{display: block !important;}
     .home_mble_hdr .navbar-nav{margin: 15px auto 0; width: 63%;}
     .home_tst_net{font-size: 15px;  width: 85%;  margin: 0 auto;}
-    
+
 }
 @media(max-width: 365px){
     .mobile_table .col-6 {flex: 0 0 100%;max-width: 100%;}
     .view_page_header .search_btn{display: none;}
     .home_tst_net{font-size: 13px;}
-}
+}

src/assets/css/style.css

@@ -19,6 +19,7 @@ body {
   max-width: 75%;
   margin: 0 auto;
 }
+.text_underline{text-decoration: underline;}
 a:hover,
 a:focus {
   text-decoration: none;

src/styles.css

@@ -41,3 +41,11 @@
       background-position: 468px 0;
     }
   }
+  .diff_span{
+    width: 42px;
+    overflow: hidden;
+    /* max-width: 52px; */
+    display: inline-block;
+    vertical-align: middle;
+    text-overflow: ellipsis;
+  }