UI changes

This commit is contained in:
Prema 2019-08-08 18:30:55 +05:30
parent a2253de79a
commit 95e43e704f
3 changed files with 54 additions and 46 deletions

View File

@ -2,7 +2,19 @@
<nav class="navbar navbar-expand navbar-light bg-transparent"> <nav class="navbar navbar-expand navbar-light bg-transparent">
<div class="container-fluid"> <div class="container-fluid">
<div class="collapse navbar-collapse home_mble_hdr" id="navbarSupportedContent"> <div class="collapse navbar-collapse home_mble_hdr" id="navbarSupportedContent">
<div class="home_tst_net">
<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>
<ul class="list-unstyled d-inline-block bg-white p-2 mb-0 timer">
<li class="d-inline-block"><span id="days">{{TimeArr.d}}d:</span></li>
<li class="d-inline-block"><span id="hours">{{TimeArr.h}}h:</span></li>
<li class="d-inline-block"><span id="minutes">{{TimeArr.m}}m:</span></li>
<li class="d-inline-block"><span id="seconds">{{TimeArr.s}}s</span></li>
</ul>
</li> -->
<li class="home_tst_net mr-3">
<span>You are viewing </span> <span>You are viewing </span>
<ul class="list-unstyled d-inline-block mb-0"> <ul class="list-unstyled d-inline-block mb-0">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
@ -23,20 +35,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<span> Network </span>
</div>
<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>
<ul class="list-unstyled d-inline-block bg-white p-2 mb-0 timer">
<li class="d-inline-block"><span id="days">{{TimeArr.d}}d:</span></li>
<li class="d-inline-block"><span id="hours">{{TimeArr.h}}h:</span></li>
<li class="d-inline-block"><span id="minutes">{{TimeArr.m}}m:</span></li>
<li class="d-inline-block"><span id="seconds">{{TimeArr.s}}s</span></li>
</ul>
</li> -->
</li>
<li class="nav-item px-2 dropdown bg-white"> <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>

View File

@ -6,7 +6,19 @@
<!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{ <!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
this.l | number</span> this.l | number</span>
}}</span> --> }}</span> -->
<div class="chart_show"> <div class="chart_show">
<div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'cuckatoo'); selectedItem12 = 1
" id="1" #item121 [ngClass]="{ active: selectedItem12 == item121.id, txt_primay: true }">Cuckoo</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'progpow'); selectedItem12 = 2
" id="2" #item122 [ngClass]="{ active: selectedItem12 == item122.id, txt_primay: true }">ProgPow</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'randomx'); selectedItem12 = 3
" id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
</div>
<epic-explorer-plotly *ngIf="linearGraphData.data" [data]="linearGraphData.data" [layout]="linearGraphData.layout"> <epic-explorer-plotly *ngIf="linearGraphData.data" [data]="linearGraphData.data" [layout]="linearGraphData.layout">
</epic-explorer-plotly> </epic-explorer-plotly>
<div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center"> <div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center">
@ -26,13 +38,13 @@
<div class="day_filter diff_margin"> <div class="day_filter diff_margin">
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day' Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
" id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 Day</a> " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 day</a>
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '1 week',''); selectedItem = 1; difficultyRange = '1 week' Difficultyreq('target', '', '', '1 week',''); selectedItem = 1; difficultyRange = '1 week'
" id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a> " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)=" <!-- <a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '15 days',''); selectedItem = 2; difficultyRange = '15 days' Difficultyreq('target', '', '', '15 days',''); selectedItem = 2; difficultyRange = '15 days'
" id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a> " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a> -->
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', '30 days',''); selectedItem = 3; difficultyRange = '30 days' Difficultyreq('target', '', '', '30 days',''); selectedItem = 3; difficultyRange = '30 days'
" id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a> " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
@ -45,17 +57,7 @@
</div> </div>
<div class="explore_all text-right"> <div class="explore_all text-right">
<div class="d-inline float-left difficulty_filter day_filter p-0 bg-transparent">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'cuckatoo'); selectedItem12 = 1
" id="1" #item121 [ngClass]="{ active: selectedItem12 == item121.id, txt_primay: true }">Cuckoo</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'progpow'); selectedItem12 = 2
" id="2" #item122 [ngClass]="{ active: selectedItem12 == item122.id, txt_primay: true }">ProgPow</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('target', '', '', difficultyRange,'randomx'); selectedItem12 = 3
" id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
</div>
<a routerLink="/chart/target-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i <a routerLink="/chart/target-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a> class="fa fa-long-arrow-right"></i></span></a>
</div> </div>
@ -68,7 +70,22 @@
<!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{ <!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
this.l | number</span> this.l | number</span>
}}</span> --> }}</span> -->
<div class="chart_show"> <div class="chart_show">
<div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'cuckatoo'); selectedTarget12 = 1
" id="1" #itemtarget121
[ngClass]="{ active: selectedTarget12 == itemtarget121.id, txt_primay: true }">Cuckoo</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'progpow'); selectedTarget12 = 2
" id="2" #itemtarget122
[ngClass]="{ active: selectedTarget12 == itemtarget122.id, txt_primay: true }">ProgPow</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
" id="3" #itemtarget123
[ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
</div>
<epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data" <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
[layout]="linearTotalGraphData.layout"> [layout]="linearTotalGraphData.layout">
</epic-explorer-plotly> </epic-explorer-plotly>
@ -89,15 +106,15 @@
<div class="day_filter diff_margin"> <div class="day_filter diff_margin">
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day' Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
" id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 Day</a> " id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 day</a>
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week' Difficultyreq('total', '', '', '1 week',''); selectedTarget = 1; TdifficultyRange = '1 week'
" id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primay: true }">1 " id="1" #itemtarget1 [ngClass]="{ active: selectedTarget == itemtarget1.id, txt_primay: true }">1
{{'home.WEEK' | translate}}</a> {{'home.WEEK' | translate}}</a>
<a href="JavaScript:void(0);" (click)=" <!-- <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days' Difficultyreq('total', '', '', '15 days',''); selectedTarget = 2; TdifficultyRange = '15 days'
" id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15 " id="2" #itemtarget2 [ngClass]="{ active: selectedTarget == itemtarget2.id, day15_txt: true }">15
{{'home.DAYS' | translate}}</a> {{'home.DAYS' | translate}}</a> -->
<a href="JavaScript:void(0);" (click)=" <a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days' Difficultyreq('total', '', '', '30 days',''); selectedTarget = 3; TdifficultyRange = '30 days'
" id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30 " id="3" #itemtarget3 [ngClass]="{ active: selectedTarget == itemtarget3.id, day30_txt: true }">30
@ -113,20 +130,7 @@
</div> </div>
<div class="explore_all text-right"> <div class="explore_all text-right">
<div class="d-inline float-left difficulty_filter day_filter p-0 bg-transparent">
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'cuckatoo'); selectedTarget12 = 1
" id="1" #itemtarget121
[ngClass]="{ active: selectedTarget12 == itemtarget121.id, txt_primay: true }">Cuckoo</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'progpow'); selectedTarget12 = 2
" id="2" #itemtarget122
[ngClass]="{ active: selectedTarget12 == itemtarget122.id, txt_primay: true }">ProgPow</a>
<a href="JavaScript:void(0);" (click)="
Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
" id="3" #itemtarget123
[ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
</div>
<a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i <a routerLink="/chart/total-difficulty"><span class="text-uppercase">{{'home.EXPLORE_IT' | translate}} <i
class="fa fa-long-arrow-right"></i></span></a> class="fa fa-long-arrow-right"></i></span></a>
</div> </div>

View File

@ -252,6 +252,7 @@ a:focus {
background: #fff; background: #fff;
padding: 0 5px; padding: 0 5px;
} }
.difficulty_filter.day_filter a.active{border-color: #0056b3; color: #0056b3;}
.explore_all { .explore_all {
background: #ecf2ff; background: #ecf2ff;
padding: 15px; padding: 15px;
@ -353,6 +354,9 @@ a:focus {
right: 5px; right: 5px;
top: 1px; top: 1px;
} }
.chart_show {
min-height: 268px;
}
/************************************************Footer*****************************************/ /************************************************Footer*****************************************/
.footer_div { .footer_div {
border-top: 1px solid rgba(0, 0, 0, 0.15); border-top: 1px solid rgba(0, 0, 0, 0.15);