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

Allow chains to be sorted and filtered (#440)

Browse Source 
* Allow soak tests to generate lots of chains for testing

* Style tweaks, and redo 'all chains' modal

* make highlighted text readable on selected chain

* cargo fmt

* Update frontend/src/index.css

Fix a typo

Co-authored-by: Tarik Gul <47201679+TarikGul@users.noreply.github.com>

* A couple more wee telemetry style tweaks

* ..but make the tab animation faster

* Be more defensive checking for event target

* Comment out animation for now

Co-authored-by: Tarik Gul <47201679+TarikGul@users.noreply.github.com>
This commit is contained in:
James Wilson
2022-01-10 14:57:18 +00:00
committed by GitHub
parent b4fd955c78
commit c00cab33c9
10 changed files with 374 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Chains.css
+45 -13
View File
@@ -21,8 +21,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
color: #000;
padding: 0 76px 0 16px;
height: 40px;
/* min-width is 1350 - 76 - 16 to account for padding */
min-width: 1258px;
min-width: 1350px;
position: relative;
}
@@ -30,13 +29,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
top: 4px;
padding: 0 12px;
color: #fff;
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
height: 36;
line-height: 36px;
height: 36px;
cursor: pointer;
font-size: 0.8em;
position: relative;
z-index: 0;
border-radius: 4px 4px 0 0;
}
@@ -68,24 +69,55 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
}
.Chains-node-count {
padding: 0 5px;
padding: 0px;
display: inline-block;
height: 20px;
border-radius: 20px;
background: #fff;
color: #e6007a;
font-size: 0.9em;
line-height: 20px;
margin: 0 -0.5em 0 0.5em;
margin-left: 0.5em;
padding: 0.3em 0.5em;
}
.Chains-chain-selected {
background: #fff;
/* Create a "tab background" that will rise up on hover/selection */
.Chains-chain::before {
content: '';
background-color: white;
border-radius: 4px 4px 0 0;
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
right: 0;
height: 0px;
/*
To animate the tab height changes, we can uncomment this line:
transition: height ease-in-out 0.2s;
*/
}
/* Animate the tab background to rise up slightly on hover */
.Chains-chain:hover::before {
height: 4px;
}
.Chains-chain.Chains-chain-selected {
color: #393838;
font-weight: bold;
/*
Instead of making the font bold, which changes the container width and
causes some wobbling, apply a tiny text shadow to "bold" it without the
width change:
*/
text-shadow: -0.06ex 0 #393838, 0.06ex 0 #393838;
}
.Chains-chain-selected .Chains-node-count {
/* Animate the tab background to rise up all the way on selection */
.Chains-chain.Chains-chain-selected::before {
height: 36px;
}
.Chains-chain.Chains-chain-selected .Chains-node-count {
background: #393838;
color: #fff;
}