pezkuwichain/pezkuwi-telemetry
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-telemetry.git synced 2026-06-12 15:51:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Turbo Render (#298)

Browse Source 
* More responsive React updates on scroll

* `Icon`s now use shadow dom

* Faster Sparkline

* Recycle table rows

* Separate Header from Chain to avoid vdom diffing

* Separate THead from Row.HEADER to avoid vdom diffing

* Throttle rendering updates on chain tabs, also styles

* Minor tweaks and fixes

* Created components for all columns

* Wrapping up Column refactor

* Rename Row--td to Column

* Lazy `Ago`

* Update styles for faster layouting

* Minor cleanup

* Fix Connection

* Use shadow DOM in `PolkadotIcon`

* Comments and tweaks for the List component

* Faster Tooltip and Truncate

* Minor tweaks

* Tooltiped columns can now be copied

* Future-proof Connection

* Remove the <div> wrapper from Icon

* Fix dash on missing graph data

* Clean up some SVGs

* Cleanup and comments

* Localize the use of `previousKeys` to `recalculateKeys`

* Custom appState disjoint from React component state

* Make appState and appUpdate refs readonly

* Cleanup
This commit is contained in:
Maciej Hirsz
2020-11-11 13:41:01 +01:00
committed by GitHub
parent 675776c3e1
commit ebb01c1a7d
72 changed files with 1863 additions and 1118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Chains.css
+21 -23
View File
@@ -1,28 +1,25 @@
.Chains {
background: #b5aeae;
background: #e6007a;
color: #000;
padding: 0 76px 0 16px;
height: 40px;
min-width: 1318px;
/* min-width is 1350 - 76 - 16 to account for padding */
min-width: 1258px;
position: relative;
}
.Chains-chain {
top: 4px;
padding: 0 12px;
background: #b5aeae;
color: #444;
color: #fff;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.5);
height: 40px;
line-height: 40px;
margin-right: 4px;
height: 36;
line-height: 36px;
cursor: pointer;
font-size: 0.8em;
font-weight: bold;
position: relative;
}
.Chains-chain:first-child {
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px 4px 0 0;
}
.Chains-all-chains {
@@ -49,27 +46,28 @@
margin: 0;
height: 28px;
width: 28px;
color: #3c3c3b;
color: #fff;
}
.Chains-node-count {
padding: 0 5px;
display: inline-block;
padding: 0 0.5em 0.1em;
border-radius: 1em;
background: #8c8787;
color: #fff;
font-weight: normal;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
height: 20px;
border-radius: 20px;
background: #fff;
color: #e6007a;
font-size: 0.9em;
line-height: 1.4em;
margin: 0 -0.3em 0 0.3em;
line-height: 20px;
margin: 0 -0.5em 0 0.5em;
}
.Chains-chain-selected {
background: #fff;
color: #000;
color: #393838;
font-weight: bold;
}
.Chains-chain-selected .Chains-node-count {
background: #e6007a;
background: #393838;
color: #fff;
}