From 10200d0ca30e26182749056705f946774d63f807 Mon Sep 17 00:00:00 2001
From: Prema <premlatha.blaze@gmail.com>
Date: Fri, 16 Aug 2019 16:40:25 +0530
Subject: [PATCH] UI changes

---
 .../components/header/header.component.html   |   4 +-
 .../siteheader/siteheader.component.html      |  10 +-
 .../home/graph-list/graph-list.component.html | 200 +++++++++++-------
 src/assets/css/style.css                      |  66 +++++-
 4 files changed, 192 insertions(+), 88 deletions(-)

diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index f1609fc..0112442 100755
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -2,7 +2,7 @@
     <div class="home_tst_net mt-3 d-block d-sm-none position-relative">
         <a href="https://epic.tech/" target="_blank" class="text_underline mr-2">Epic Cash</a>
           <span>You are viewing </span>
-          <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-3">
+          <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-3 pl-1">
               <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option>
               <option value="Testnet" [selected]="'Testnet' == getNetwork()">TestNet</option>
               <option disabled value="Mainnet">MainNet</option>
@@ -48,7 +48,7 @@
           <li class="home_tst_net mr-3 d-none d-sm-inline-block position-relative">
             <a href="https://epic.tech/" target="_blank" class="text_underline mr-2">Epic Cash</a>
               <span>You are viewing </span>
-              <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-3">
+              <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-3 pl-1">
                   <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option>
                   <option value="Testnet" [selected]="'Testnet' == getNetwork()">TestNet</option>
                   <option disabled value="Mainnet">MainNet</option>
diff --git a/src/app/shared/components/siteheader/siteheader.component.html b/src/app/shared/components/siteheader/siteheader.component.html
index a20f278..52c2069 100644
--- a/src/app/shared/components/siteheader/siteheader.component.html
+++ b/src/app/shared/components/siteheader/siteheader.component.html
@@ -6,13 +6,14 @@
 
     <div class="ml-auto ">
       <a class="chart_heading d-sm-none" routerLink="/"><span class="txt_primary">Epic</span><span>Explorer</span></a>
-      <div class=" d-none d-sm-inline-block mr-3">
+      <div class=" d-none d-sm-inline-block mr-3 position-relative">
           <span>You are viewing </span>
-          <select (change)="onChangeNetwork($event.target.value)">
+          <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-3 pl-1">
               <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option>
               <option value="Testnet" [selected]="'Testnet' == getNetwork()">TestNet</option>
               <option disabled value="Mainnet">MainNet</option>
           </select>
+          <i class="arrow_drpdwn net_dropdwn" ></i>
           <!-- <ul class="list-unstyled d-inline-block">
             <li class="nav-item dropdown">
 
@@ -64,13 +65,14 @@
         <!-- </a> -->
       </button>
     </div>
-    <div class="d-block d-sm-none text-center mt-3 mx-auto">
+    <div class="d-block d-sm-none text-center mt-3 mx-auto position-relative">
         <span>You are viewing </span>
-        <select (change)="onChangeNetwork($event.target.value)">
+        <select (change)="onChangeNetwork($event.target.value)" class="langbut py-2 pr-3 pl-1">
             <option value="Floonet" [selected]="'Floonet' == getNetwork()" >FlooNet</option>
             <option value="Testnet" [selected]="'Testnet' == getNetwork()">TestNet</option>
             <option disabled value="Mainnet">MainNet</option>
         </select>
+        <i class="arrow_drpdwn net_dropdwn" ></i>
         <!-- <ul class="list-unstyled d-inline-block">
           <li class="nav-item dropdown">
 
diff --git a/src/app/view/home/graph-list/graph-list.component.html b/src/app/view/home/graph-list/graph-list.component.html
index ebd9d13..5148e11 100644
--- a/src/app/view/home/graph-list/graph-list.component.html
+++ b/src/app/view/home/graph-list/graph-list.component.html
@@ -26,14 +26,18 @@
           </epic-explorer-plotly>
           <div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center">
             <div class="graph_img background_loading mx-auto mb-3"></div>
-            <div class=" p-3 bg-white">
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
+            <div class="bg-white">
+              <div class="sk-cube-grid">
+                <div class="sk-cube sk-cube1"></div>
+                <div class="sk-cube sk-cube2"></div>
+                <div class="sk-cube sk-cube3"></div>
+                <div class="sk-cube sk-cube4"></div>
+                <div class="sk-cube sk-cube5"></div>
+                <div class="sk-cube sk-cube6"></div>
+                <div class="sk-cube sk-cube7"></div>
+                <div class="sk-cube sk-cube8"></div>
+                <div class="sk-cube sk-cube9"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -75,14 +79,18 @@
             [layout]="heatMapGrowthData.layout"></epic-explorer-plotly>
           <div *ngIf="!heatMapGrowthData.data" class="feedback_div news_desc text-center">
             <div class="graph_img background_loading mx-auto mb-3"></div>
-            <div class=" p-3 bg-white">
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
+            <div class=" bg-white">
+              <div class="sk-cube-grid">
+                <div class="sk-cube sk-cube1"></div>
+                <div class="sk-cube sk-cube2"></div>
+                <div class="sk-cube sk-cube3"></div>
+                <div class="sk-cube sk-cube4"></div>
+                <div class="sk-cube sk-cube5"></div>
+                <div class="sk-cube sk-cube6"></div>
+                <div class="sk-cube sk-cube7"></div>
+                <div class="sk-cube sk-cube8"></div>
+                <div class="sk-cube sk-cube9"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -114,14 +122,18 @@
         <epic-explorer-plotly *ngIf="barGraphData.data" [data]="barGraphData.data" [layout]="barGraphData.layout"></epic-explorer-plotly>
         <div *ngIf="!barGraphData.data" class="feedback_div news_desc text-center">
           <div class="graph_img background_loading mx-auto mb-3"></div>
-          <div class=" p-3 bg-white">
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
+          <div class=" bg-white">
+            <div class="sk-cube-grid">
+              <div class="sk-cube sk-cube1"></div>
+              <div class="sk-cube sk-cube2"></div>
+              <div class="sk-cube sk-cube3"></div>
+              <div class="sk-cube sk-cube4"></div>
+              <div class="sk-cube sk-cube5"></div>
+              <div class="sk-cube sk-cube6"></div>
+              <div class="sk-cube sk-cube7"></div>
+              <div class="sk-cube sk-cube8"></div>
+              <div class="sk-cube sk-cube9"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -166,14 +178,18 @@
         </epic-explorer-plotly>
         <div *ngIf="!transcationGraphData.data" class="feedback_div news_desc text-center">
           <div class="graph_img background_loading mx-auto mb-3"></div>
-          <div class=" p-3 bg-white">
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
+          <div class=" bg-white">
+            <div class="sk-cube-grid">
+              <div class="sk-cube sk-cube1"></div>
+              <div class="sk-cube sk-cube2"></div>
+              <div class="sk-cube sk-cube3"></div>
+              <div class="sk-cube sk-cube4"></div>
+              <div class="sk-cube sk-cube5"></div>
+              <div class="sk-cube sk-cube6"></div>
+              <div class="sk-cube sk-cube7"></div>
+              <div class="sk-cube sk-cube8"></div>
+              <div class="sk-cube sk-cube9"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -208,14 +224,18 @@
         </epic-explorer-plotly>
         <div *ngIf="!growthGraphData.data" class="feedback_div news_desc text-center">
           <div class="graph_img background_loading mx-auto mb-3"></div>
-          <div class=" p-3 bg-white">
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
+          <div class=" bg-white">
+            <div class="sk-cube-grid">
+              <div class="sk-cube sk-cube1"></div>
+              <div class="sk-cube sk-cube2"></div>
+              <div class="sk-cube sk-cube3"></div>
+              <div class="sk-cube sk-cube4"></div>
+              <div class="sk-cube sk-cube5"></div>
+              <div class="sk-cube sk-cube6"></div>
+              <div class="sk-cube sk-cube7"></div>
+              <div class="sk-cube sk-cube8"></div>
+              <div class="sk-cube sk-cube9"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -252,14 +272,18 @@
         </epic-explorer-plotly>
         <div *ngIf="!doubleareaGraphData.data" class="feedback_div news_desc text-center">
           <div class="graph_img background_loading mx-auto mb-3"></div>
-          <div class=" p-3 bg-white">
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
-            <p class="mb-2 background_loading para_load"></p>
+          <div class=" bg-white">
+            <div class="sk-cube-grid">
+              <div class="sk-cube sk-cube1"></div>
+              <div class="sk-cube sk-cube2"></div>
+              <div class="sk-cube sk-cube3"></div>
+              <div class="sk-cube sk-cube4"></div>
+              <div class="sk-cube sk-cube5"></div>
+              <div class="sk-cube sk-cube6"></div>
+              <div class="sk-cube sk-cube7"></div>
+              <div class="sk-cube sk-cube8"></div>
+              <div class="sk-cube sk-cube9"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -337,14 +361,18 @@
               </epic-explorer-plotly>
               <div *ngIf="!stackGraphData.data" class="feedback_div news_desc text-center">
                 <div class="graph_img background_loading mx-auto mb-3"></div>
-                <div class=" p-3 bg-white">
-                  <p class="mb-2 background_loading para_load"></p>
-                  <p class="mb-2 background_loading para_load"></p>
-                  <p class="mb-2 background_loading para_load"></p>
-                  <p class="mb-2 background_loading para_load"></p>
-                  <p class="mb-2 background_loading para_load"></p>
-                  <p class="mb-2 background_loading para_load"></p>
-                  <p class="mb-2 background_loading para_load"></p>
+                <div class="bg-white">
+                  <div class="sk-cube-grid">
+                    <div class="sk-cube sk-cube1"></div>
+                    <div class="sk-cube sk-cube2"></div>
+                    <div class="sk-cube sk-cube3"></div>
+                    <div class="sk-cube sk-cube4"></div>
+                    <div class="sk-cube sk-cube5"></div>
+                    <div class="sk-cube sk-cube6"></div>
+                    <div class="sk-cube sk-cube7"></div>
+                    <div class="sk-cube sk-cube8"></div>
+                    <div class="sk-cube sk-cube9"></div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -382,14 +410,18 @@
           </epic-explorer-plotly>
           <div *ngIf="!areaGraphData.data" class="feedback_div news_desc text-center">
             <div class="graph_img background_loading mx-auto mb-3"></div>
-            <div class=" p-3 bg-white">
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
+            <div class="bg-white">
+              <div class="sk-cube-grid">
+                <div class="sk-cube sk-cube1"></div>
+                <div class="sk-cube sk-cube2"></div>
+                <div class="sk-cube sk-cube3"></div>
+                <div class="sk-cube sk-cube4"></div>
+                <div class="sk-cube sk-cube5"></div>
+                <div class="sk-cube sk-cube6"></div>
+                <div class="sk-cube sk-cube7"></div>
+                <div class="sk-cube sk-cube8"></div>
+                <div class="sk-cube sk-cube9"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -425,14 +457,18 @@
           </epic-explorer-plotly>
           <div *ngIf="!feeGraphData.data" class="feedback_div news_desc text-center">
             <div class="graph_img background_loading mx-auto mb-3"></div>
-            <div class=" p-3 bg-white">
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
+            <div class=" bg-white">
+              <div class="sk-cube-grid">
+                <div class="sk-cube sk-cube1"></div>
+                <div class="sk-cube sk-cube2"></div>
+                <div class="sk-cube sk-cube3"></div>
+                <div class="sk-cube sk-cube4"></div>
+                <div class="sk-cube sk-cube5"></div>
+                <div class="sk-cube sk-cube6"></div>
+                <div class="sk-cube sk-cube7"></div>
+                <div class="sk-cube sk-cube8"></div>
+                <div class="sk-cube sk-cube9"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -543,14 +579,18 @@
           </epic-explorer-plotly>
           <div *ngIf="!linearTotalGraphData.data" class="feedback_div news_desc text-center">
             <div class="graph_img background_loading mx-auto mb-3"></div>
-            <div class=" p-3 bg-white">
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
-              <p class="mb-2 background_loading para_load"></p>
+            <div class=" bg-white">
+              <div class="sk-cube-grid">
+                <div class="sk-cube sk-cube1"></div>
+                <div class="sk-cube sk-cube2"></div>
+                <div class="sk-cube sk-cube3"></div>
+                <div class="sk-cube sk-cube4"></div>
+                <div class="sk-cube sk-cube5"></div>
+                <div class="sk-cube sk-cube6"></div>
+                <div class="sk-cube sk-cube7"></div>
+                <div class="sk-cube sk-cube8"></div>
+                <div class="sk-cube sk-cube9"></div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index bb147d4..2948e75 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -550,6 +550,7 @@ body.dark_theme {
 .dark_theme .ip_filter a {
   color: #ffffff;
 }
+.dark_theme .navbar-light .navbar-brand:focus, .dark_theme .navbar-light .navbar-brand:hover{color: #ffffff;}
 .dark_theme .search_input {
   background-color: #27314b;
 }
@@ -613,7 +614,6 @@ body.dark_theme {
 }
 .dark_theme .dropdown .bg-white,
 .dark_theme .dropdown-menu,
-.dark_theme .theme_switch,
 .dark_theme .footer_div .theme_switch,
 .dark_theme .ftr_dropdown,
 .dark_theme .langbut.ftr_lang,
@@ -621,7 +621,7 @@ body.dark_theme {
   background-color: #1c2437 !important;
   color: #ffffff !important;
 }
-.dark_theme footer.bg-white{ background-color: #27314b !important;}
+.dark_theme footer.bg-white, .dark_theme .theme_switch, .dark_theme .news_desc .bg-white{ background-color: #27314b !important;}
 .dark_theme .nav-item.dropdown .bg-white, .dark_theme .nav-item.dropdown, .dark_theme .langbut{background-color: #27314b !important}
 .dark_theme .langbut{color: #ffffff !important;}
 .dark_theme .arrow_drpdwn{border-color: #ffffff !important;}
@@ -685,3 +685,65 @@ body.dark_theme {
   -webkit-animation: yellowfade 5s ;
   -o-animation: yellowfade 5s ;
 }
+.news_desc .bg-white{padding-top: 100px;}
+.sk-cube-grid {
+  width: 40px;
+  height: 40px;
+  margin: 0px auto;
+}
+
+.sk-cube-grid .sk-cube {
+  width: 33%;
+  height: 33%;
+  background-color: #0091ff;
+  float: left;
+  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
+}
+.sk-cube-grid .sk-cube1 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+.sk-cube-grid .sk-cube2 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s; }
+.sk-cube-grid .sk-cube3 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s; }
+.sk-cube-grid .sk-cube4 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s; }
+.sk-cube-grid .sk-cube5 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+.sk-cube-grid .sk-cube6 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s; }
+.sk-cube-grid .sk-cube7 {
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s; }
+.sk-cube-grid .sk-cube8 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s; }
+.sk-cube-grid .sk-cube9 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s; }
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1); 
+  }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  } 
+}
\ No newline at end of file