Merge branch 'master' of https://gitlab.com/epic-tech/explorer2.epic.tech-angular8

2019-08-08 13:03:34 +05:30 · 2019-08-08 13:03:34 +05:30 · 211c6511fa
commit 211c6511fa
parent 6eb014dfd5 357f974c57
15 changed files with 245 additions and 30 deletions
--- a/server/controllers/BlockchainBlock.ts
+++ b/server/controllers/BlockchainBlock.ts
@ -1139,9 +1139,11 @@ export class BlockchainBlockController {
      var alog_type = TotalDifficultyNBlockRequestData.Type;
      var Difftype = TotalDifficultyNBlockRequestData.Difftype;
      if (TotalDifficultyNBlockRequestData.Interval && TotalDifficultyNBlockRequestData.Interval != '1 day') {
-        var dateFormat = 'YYYY-MM-DD';
+        var dateFormat = 'YYYY-MM-DD HH:mm:ss';
+        var tickFormat = '%m-%d';
      }else{
-        var dateFormat = 'HH:mm';
+        var dateFormat = 'YYYY-MM-DD HH:mm:ss';
+        var tickFormat = '%H-%M';
      }
      if(Difftype == "target"){
        var TotalDifficultyNBlockQuery = await getConnection()
@ -1233,7 +1235,8 @@ export class BlockchainBlockController {
          // DifficultyProgpow: DifficultyProgpow,
          Maxrange: Maxrange,
          Minrange: (Minrange * 0.2),
-          TargetDifficulty: TargetDifficulty
+          TargetDifficulty: TargetDifficulty,
+          tickFormat: tickFormat
        },
      });
    } catch (error) {
--- a/server/socket/block.ts
+++ b/server/socket/block.ts
@ -9,8 +9,7 @@ export async function universalGetLatestBlockDetails(socket) {
    letest_block_duration = "";

  const BlockchainLatestBlockQuery = await getConnection().query(
-    "SELECT timestamp,height,edge_bits,hash,secondary_scaling, previous_id, total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block ORDER BY timestamp DESC LIMIT 1"
-  );
+    "SELECT bb.timestamp,bb.proof,bb.height,bb.edge_bits,bb.hash,bb.secondary_scaling, bb.previous_id, bb.total_difficulty_cuckaroo, bb.total_difficulty_cuckatoo, bb.total_difficulty_progpow, bb.total_difficulty_randomx, COUNT(DISTINCT(bi.block_id)) AS input_count, COUNT(DISTINCT(bk.block_id)) AS kernel_count, COUNT(DISTINCT(bo.block_id)) AS output_count FROM blockchain_block bb LEFT JOIN blockchain_input bi ON bi.block_id = bb.hash LEFT JOIN blockchain_kernel bk ON bk.block_id = bb.hash LEFT JOIN blockchain_output bo ON bo.block_id = bb.hash group by bb.hash, bb.timestamp ORDER BY bb.timestamp DESC LIMIT 1");
  const BlockchainPreviousBlockQuery = await getConnection().query(
    "SELECT total_difficulty_cuckaroo, total_difficulty_cuckatoo, total_difficulty_progpow, total_difficulty_randomx FROM blockchain_block WHERE hash=" +
      "'" +
@ -132,10 +131,58 @@ export async function universalGetLatestBlockDetails(socket) {
      BlockchainPreviousBlockQuery[0].total_difficulty_randomx;
  }

+  if(BlockchainLatestBlockQuery[0].proof == "RandomX"){
+   var Difficulty = targetdifficultyrandomx;
+  }else if(BlockchainLatestBlockQuery[0].proof == "ProgPow"){
+    var Difficulty = targetdifficultyprogpow;
+  }else if(BlockchainLatestBlockQuery[0].proof == "Cuckoo" ){
+    var Difficulty = targetdifficultycuckatoo;
+  }
+
  block_height = BlockchainLatestBlockQuery[0].height;
+
+  var current_date = new Date();
+  // var current_date = new Date("Sat Apr 2 2018 15:04:00 GMT+0530 (IST)");
+
+  var enddaydif =
+    Math.abs(
+      BlockchainLatestBlockQuery[0].timestamp.getTime() -
+        current_date.getTime(),
+    ) /
+    (1000 * 60 * 60 * 24);
+  var enddayrnd = Math.round(enddaydif);
+  // if(enddayrnd < 1) {
+  var millseconds = Math.abs(
+    BlockchainLatestBlockQuery[0].timestamp.getTime() -
+      current_date.getTime(),
+  );
+
+  var seconds = Math.floor(millseconds / 1000);
+  var days = Math.floor(seconds / 86400);
+  var hours = Math.floor((seconds % 86400) / 3600);
+  var minutes = Math.floor(((seconds % 86400) % 3600) / 60);
+  seconds = seconds % 60;
+  var dateTimeDurationString = '';
+
+  if (days > 0 && (hours === 0 && minutes === 0))
+    dateTimeDurationString += days > 1 ? days + 'd ' : days + 'd ';
+  if (days > 0 && (hours > 0 || minutes > 0))
+    dateTimeDurationString += days > 1 ? days + 'd ' : days + 'd ';
+  if (hours > 0 && minutes > 0)
+    dateTimeDurationString += hours > 1 ? hours + 'h ' : hours + 'h ';
+  if (hours > 0 && minutes === 0)
+    dateTimeDurationString += hours > 1 ? hours + 'h ' : hours + 'h ';
+  if (minutes > 0)
+    dateTimeDurationString += minutes > 1 ? minutes + 'm ' : minutes + 'm ';
+  if (seconds > 0)
+    dateTimeDurationString += seconds > 1 ? seconds + 's ' : seconds + 's ';
+
  var TotalCuckoo =
    parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckatoo) +
    parseInt(BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo);
+    let balance = BlockchainLatestBlockQuery[0].hash.substring(2, 62);
+    let arr = balance.match(/.{1,6}/g);
+    var hasharray = arr.map(i => '#' + i);

  socket.emit("latestblockdetail", {
    block_height,
@ -149,6 +196,15 @@ export async function universalGetLatestBlockDetails(socket) {
    targetdifficultyprogpow,
    targetdifficultyrandomx,
    TotalCuckoo,
+    age : dateTimeDurationString,
+    input_count: BlockchainLatestBlockQuery[0].input_count,
+    kernel_count: BlockchainLatestBlockQuery[0].kernel_count,
+    output_count: BlockchainLatestBlockQuery[0].output_count,
+    proof: BlockchainLatestBlockQuery[0].proof,
+    hasharray: hasharray,
+    Difficulty: Difficulty,
+    hashstart:BlockchainLatestBlockQuery[0].hash.slice(0, 2),
+    hashend:BlockchainLatestBlockQuery[0].hash.slice(62,64),
    TotalDifficultyCuckaroo:
      BlockchainLatestBlockQuery[0].total_difficulty_cuckaroo,
    TotalDifficultyCuckatoo:
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@ -41,7 +41,7 @@
            
            <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 ml-1" #langSelect (change)="translate.changeLang(langSelect.value)">
+            <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>
            </select>
            <i class="arrow_drpdwn"></i>
--- a/src/app/shared/components/siteheader/siteheader.component.html
+++ b/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">
-                Beta
+                Testnet
              </a>
              <div class="dropdown-menu net_dropdwn" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item p-2" href="https://explorer2.epic.tech">Alpha</a>
+                <a class="dropdown-item p-2 disabled" href="https://explorer2.epic.tech">Mainnet</a>
              </div>
            </li>
          </ul>
@ -36,7 +36,7 @@
        <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"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
-          <select class="langbut py-2 ml-1" #langSelect (change)="translate.changeLang(langSelect.value)">
+          <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>
          </select>
          <i class="arrow_drpdwn"></i>
--- a/src/app/view/home/block-append/block-append.component.css
+++ b/src/app/view/home/block-append/block-append.component.css
@ -0,0 +1,12 @@
+@keyframes MyAnimation {
+  0% {
+    margin-top: -50px;
+  }
+  100% {
+    margin-top: 0px;
+  }
+}
+
+.my-animation {
+  animation: MyAnimation 2s;
+}
--- a/src/app/view/home/block-append/block-append.component.html
+++ b/src/app/view/home/block-append/block-append.component.html
@ -0,0 +1,37 @@
+<div [ngClass]="{'mobile_table alt_color' : true, hght_40: item.id != clickValue }"  id="hash_{{blockdetails.blockchain_block_height}}" #item >
+<div class="my-animation">
+  <div class="row">
+    <div class="col-6 col-md-3 tble_col">
+     <div class="block_div">  <span *ngIf="item.id != clickValue" (click)="onClickPlus(blockdetails.blockchain_block_height);" class="expnd_blck"><i class="fa fa-plus"></i></span>
+      <span  *ngIf="item.id == clickValue" (click)="onClickMinus(blockdetails.blockchain_block_height);" class="expnd_blck"><i class="fa fa-minus"></i></span><h6>Height</h6><span class="blck_value link_to_detail" routerLink="/blockdetail/{{ blockdetails.blockchain_block_height }}">{{ blockdetails.blockchain_block_height }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div [title]="blockdetails.blockchain_block_hash" routerLink="/blockdetail/{{ blockdetails.blockchain_block_hash }}" class="block_div link_to_detail"><h6>Hash</h6><span class="blck_value">{{ blockdetails.hashstart
+      }}<span
+        *ngFor="let color of blockdetails.hasharray"
+        class="hash"
+        [ngStyle]="{ 'background-color': color }"
+      ></span
+      >{{ blockdetails.hashend }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div"><h6 >Age</h6><span class="blck_value">{{ blockdetails.age }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div"><h6>Difficulty</h6><span class="blck_value">{{ blockdetails.target_difficulty | number }}</span></div>
+    </div>
+    <div class="col-6 col-sm-6 col-md-3 tble_col">
+      <div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ blockdetails.PoWAlgo }}</span></div>
+    </div>
+    <div class="col-6 col-sm-6 col-md-3 tble_col">
+      <div class="block_div"><h6>#Inputs</h6><span class="blck_value">{{ blockdetails.input_count }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div"><h6 >#Outputs</h6><span class="blck_value">{{ blockdetails.output_count }}</span></div>
+    </div>
+    <div class="col-6 col-md-3 tble_col">
+      <div class="block_div" ><h6>#Kernels</h6><span class="blck_value">{{ blockdetails.kernal_count }}</span></div>
+    </div>
+  </div>
+</div>
+</div>
--- a/src/app/view/home/block-append/block-append.component.spec.ts
+++ b/src/app/view/home/block-append/block-append.component.spec.ts
@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlockAppendComponent } from './block-append.component';
+
+describe('BlockAppendComponent', () => {
+  let component: BlockAppendComponent;
+  let fixture: ComponentFixture<BlockAppendComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BlockAppendComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlockAppendComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/home/block-append/block-append.component.ts
+++ b/src/app/view/home/block-append/block-append.component.ts
@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-block-append',
+  templateUrl: './block-append.component.html',
+  styleUrls: ['./block-append.component.css'],
+})
+export class BlockAppendComponent implements OnInit {
+  public blockdetails: any;
+  public clickValue: any;
+
+  constructor() {}
+
+  ngOnInit() {
+    console.log(this.blockdetails);
+  }
+
+  public onClickPlus(height) {
+    // this.beforeClick = true;
+    this.clickValue = 'hash_' + height;
+  }
+
+  public onClickMinus(height) {
+    this.clickValue = 0;
+  }
+}
--- 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
@ -28,7 +28,6 @@
  <div class="col-md-3">
    <div
      class="text-center detail_div"
-      [ngStyle]="{ 'min-height.px': minHeight }"
    >
      <p class="mb-0 desc">{{ "home.BLOCKCHAIN_HEIGHT" | translate }}</p>
      <p
@ -42,7 +41,6 @@
  <div class="col-md-3">
    <div
      class="text-center detail_div"
-      [ngStyle]="{ 'min-height.px': minHeight }"
    >
      <p class="mb-0 desc">{{ "home.LATEST_BLOCK" | translate }}</p>
      <p
@ -81,7 +79,6 @@
  <div class="col-md-3">
    <div
      class="text-center detail_div"
-      [ngStyle]="{ 'min-height.px': minHeight }"
    >
      <p class="mb-0 desc">{{ "home.COIN_IN" | translate }}</p>
      <p
--- a/src/app/view/home/block-detail-list/block-detail-list.component.ts
+++ b/src/app/view/home/block-detail-list/block-detail-list.component.ts
@ -36,7 +36,7 @@ export class BlockDetailListComponent implements OnInit {
  }

  ngAfterViewInit() {
-    this.minHeight = this.elementView.nativeElement.offsetHeight;
+    // this.minHeight = this.elementView.nativeElement.offsetHeight;
  }

  getBlockDetails() {
--- a/src/app/view/home/graph-list/graph-list.component.ts
+++ b/src/app/view/home/graph-list/graph-list.component.ts
@ -403,6 +403,7 @@ export class GraphListComponent implements OnInit {
              let BlocksChartDate = res.response.blockDate;
                let TargetDifficulty = res.response.TargetDifficulty;
                let range = [res.response.Minrange, res.response.Maxrange]
+                let tickformat = res.response.tickFormat;
                this.lg_last =
                TargetDifficulty[TargetDifficulty.length - 1];
                
@ -412,7 +413,8 @@ export class GraphListComponent implements OnInit {
                        DifficultychartDate,
                        TargetDifficulty,
                        this.Type,
-                        range
+                        range,
+                        tickformat
                      );
                    break;
                  case 'target':
@ -420,7 +422,8 @@ export class GraphListComponent implements OnInit {
                        DifficultychartDate,
                        TargetDifficulty,
                        this.Type,
-                        range
+                        range,
+                        tickformat
                      );
                   break;
                }
@ -460,7 +463,7 @@ export class GraphListComponent implements OnInit {
    });
  }

-  difficultyChartFunc(DifficultychartDate, TargetDifficulty, Type, range) {
+  difficultyChartFunc(DifficultychartDate, TargetDifficulty, Type, range, tickformat) {
    console.log('range rangerangerange@@@@@@@22444',range);
    this.linearGraphData = {
      data: [
@ -512,7 +515,7 @@ export class GraphListComponent implements OnInit {
        showlegend: false,
        xaxis: {
          tickangle: -45,
-          tickformat: '%m-%d',
+          tickformat: tickformat,
          showgrid: true,
          fixedrange: true
        },
@ -738,6 +741,7 @@ export class GraphListComponent implements OnInit {
  }

  growthFunc(gDate, gReward, gaddedreward) {
+    console.log('gDate gReward gaddedreward',gDate, gReward, gaddedreward)
    this.growthGraphData = {
      data: [
        {
@ -970,6 +974,7 @@ export class GraphListComponent implements OnInit {
      },
      options: null,
    };
+    resolve();
  });
  }
  transactionlinechartFunc(Tdate, Ttotalinput, Ttotalkernal, Ttotaloutput) {
@ -1086,7 +1091,7 @@ export class GraphListComponent implements OnInit {
      options: null,
    };
  }
-  totaldifficultyChartFunc(DifficultychartDate, TargetDifficulty, Type, range) {
+  totaldifficultyChartFunc(DifficultychartDate, TargetDifficulty, Type, range, tickformat) {
    this.linearTotalGraphData = {
      data: [
        {
@ -1097,7 +1102,7 @@ export class GraphListComponent implements OnInit {
          type: 'scatter',
          name: '',
          line: { color: '#ac3333' },
-          hovertemplate: '%{x}<br> Difficulty : %{text:,}',
+          hovertemplate: '%{DifficultychartDate}<br> Difficulty : %{text:,}',
        },
      ],
      layout: {
@ -1107,7 +1112,7 @@ export class GraphListComponent implements OnInit {
        showlegend: false,
        xaxis: {
          tickangle: -45,
-          tickformat: '%m-%d',
+          tickformat: tickformat,
          fixedrange: true,
          showgrid: true
        },
--- a/src/app/view/home/home.module.ts
+++ b/src/app/view/home/home.module.ts
@ -7,6 +7,7 @@ import { GraphListComponent } from './graph-list/graph-list.component';
 import { BlockDetailListComponent } from './block-detail-list/block-detail-list.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared/shared.module';
+import { BlockAppendComponent } from './block-append/block-append.component';

 import { HttpClientModule, HttpClient, HttpParams } from '@angular/common/http';
 import { CookieService } from 'ngx-cookie-service';
@ -22,6 +23,7 @@ import { CustomLoader } from 'src/app/app.module';
    LatestblocksComponent,
    GraphListComponent,
    BlockDetailListComponent,
+    BlockAppendComponent
  ],
  imports: [
    CommonModule,
@ -33,6 +35,7 @@ import { CustomLoader } from 'src/app/app.module';
      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},
  })
  ],
+  entryComponents: [BlockAppendComponent],
  providers: [TransServiceService,CookieService,ChartService],
 })
 export class HomeModule {}
--- a/src/app/view/home/latestblocks/latestblocks.component.html
+++ b/src/app/view/home/latestblocks/latestblocks.component.html
@ -45,6 +45,7 @@
      </div>
    </div>
  </div>
+  <div #block></div>
  <div [ngClass]="{mobile_table : true, hght_40: item.id != clickValue }"
    id="hash_{{hashvalue.blockchain_block_height}}" #item *ngFor="let hashvalue of hashvalues">

--- a/src/app/view/home/latestblocks/latestblocks.component.ts
+++ b/src/app/view/home/latestblocks/latestblocks.component.ts
@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewContainerRef, ViewChild,ComponentFactoryResolver} from '@angular/core';
 import { HttpClient, HttpParams, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { ChartService } from '../../../shared/services/chart.service';
 import { FormGroup, FormControl } from '@angular/forms';
 import { TransServiceService } from '../../../shared/services/trans-service.service';
 import { map, catchError } from 'rxjs/operators';
 import { throwError} from 'rxjs';
+import { BlockAppendComponent } from '../block-append/block-append.component';

@Component({
  selector: 'epic-explorer-latestblocks',
@ -14,6 +15,9 @@ import { throwError} from 'rxjs';
 export class LatestblocksComponent implements OnInit {
  public hashvalues: any;
  public pagedata: any = [];
+  public blockAppend: any;
+  public blockdetails: any;
+  public lastblock: any;
  public clickValue: any;
  public clickPeer: any;
  public beforeClick: boolean = false;
@ -24,11 +28,15 @@ export class LatestblocksComponent implements OnInit {
    pagesize: new FormControl(20),
  });

-  constructor(private chartService: ChartService,public translate: TransServiceService,public http: HttpClient) {}
+  @ViewChild('block', { read: ViewContainerRef,static: true }) block: ViewContainerRef;
+
+
+  constructor(private chartService: ChartService,public translate: TransServiceService,public http: HttpClient, private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this. getpeersList();
    this.gettinghashList(1, 20);
+    this.getLastCeatedBlock();
  }

  public gettinghashList(CurrentPage, PageSize) {
@ -46,6 +54,41 @@ export class LatestblocksComponent implements OnInit {
    );
  }

+  getLastCeatedBlock() {
+    this.chartService.getLatestblockdetails().subscribe(response => {
+      this.blockdetails = response;
+      console.log(this.blockdetails);
+      if (this.lastblock != this.blockdetails.block_height) {
+        console.log('Create');
+        this.createBlock();
+      }
+      this.lastblock = this.blockdetails.block_height;
+    });
+  }
+
+  public createBlock() {
+    const blockFactory = this.resolver.resolveComponentFactory(
+      BlockAppendComponent,
+    );
+    const block = this.block.createComponent(blockFactory);
+    this.blockAppend = {};
+    this.blockAppend['blockchain_block_hash'] = this.blockdetails.hash;
+    this.blockAppend[
+      'blockchain_block_height'
+    ] = this.blockdetails.block_height;
+    this.blockAppend['age'] = this.blockdetails.age;
+    this.blockAppend['target_difficulty'] = this.blockdetails.Difficulty;
+    this.blockAppend['PoWAlgo'] = this.blockdetails.proof;
+    this.blockAppend['input_count'] = this.blockdetails.input_count;
+    this.blockAppend['output_count'] = this.blockdetails.output_count;
+    this.blockAppend['kernal_count'] = this.blockdetails.kernel_count;
+    this.blockAppend['hashstart'] = this.blockdetails.hashstart;
+    this.blockAppend['hashend'] = this.blockdetails.hashend;
+    this.blockAppend['hasharray'] = this.blockdetails.hasharray;
+
+    block.instance.blockdetails = this.blockAppend;
+  }
+
  public getpeersList() {
    this.chartService.apiGetRequest('','/blockchain_kernel/getpeers').subscribe(
      res => {
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@ -286,6 +286,7 @@ a:focus {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: 0.3s linear all;
+  min-height: 100%;
 }
 .detail_div .count {
  font-size: 25px;
@ -645,7 +646,14 @@ body.dark_theme {
 .dark_theme .view_content table{border-color: #384566;}
 .dark_theme .card-body{background-color: #1c2437;}
 .diff_margin{margin-bottom: -10px !important; margin-top: -10px !important;}
-
+@keyframes yellowfade {
+  from {
+    background: yellow;
+  }
+  to {
+    background: transparent;
+  }
+}
 .item-highlight {
  animation: yellowfade 5s ;
  -moz-animation: yellowfade 5s ;