machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[accelerator] fast track chevrons animation

Browse Source
This commit is contained in:
Mononaut 2024-07-09 08:57:09 +00:00
parent 2c81ebb637
commit adde1a86e4
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
View File

@ -81,13 +81,13 @@
<div class="node-spacer"></div>
<div class="interval-spacer"></div>
<div class="node">
<div class="acc-to-confirmed loading right"></div>
<div class="acc-to-confirmed right go-faster"></div>
</div>
<div class="interval-spacer">
<div class="acc-to-confirmed loading"></div>
<!-- <div class="acc-to-confirmed go-faster loading"></div> -->
</div>
<div class="node" [id]="'confirmed'">
<div class="acc-to-confirmed loading left"></div>
<div class="acc-to-confirmed left go-faster"></div>
<div class="shape-border waiting">
<div class="shape animate"></div>
</div>
@ -129,8 +129,8 @@
<div class="seen-to-acc left"></div>
<div class="seen-to-acc right"></div>
<div class="shape-border accelerated-selected">
<div class="shape accelerating"></div>
<div class="connector down loading"></div>
<div class="shape accelerating position-relative"></div>
</div>
<div class="time" style="margin-top: 3px;">
<span i18n="transaction.audit.accelerated">Accelerated</span>&nbsp;<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>

48
frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
View File

@ -52,7 +52,7 @@
.interval, .interval-spacer {
width: 8em;
min-width: 5em;
min-width: 8em;
max-width: 8em;
height: 32px;
display: flex;
@ -112,6 +112,28 @@
background: var(--tertiary);
border-radius: 5px;
&.go-faster {
// background:
// linear-gradient(-135deg, var(--tertiary) 34%, transparent 34%),
// linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) 0 5px,
// linear-gradient(-225deg, var(--tertiary) 16%, transparent 16%) 0 -5px,
// linear-gradient(-225deg, var(--mainnet-alt) 66%, transparent 66%),
// var(--tertiary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px;
border-radius: 0;
&.right {
left: calc(50% + 5px);
margin-right: calc(-4em + 5px);
animation: goFasterRight 1s infinite linear;
}
&.left {
right: calc(50% + 5px);
margin-left: calc(-4em + 5px);
animation: goFasterLeft 1s infinite linear;
}
}
&.loading {
animation: acceleratePulse 1s infinite;
}
@ -131,7 +153,12 @@
left: -5px;
top: -73px;
transform: translateX(120%);
background: var(--tertiary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%),
// linear-gradient(315deg, var(--tertiary) 16%, transparent 16%) 5px 0,
// linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) -5px 0,
// linear-gradient(45deg, var(--mainnet-alt) 66%, transparent 66%),
// var(--tertiary);
background-size: 10px 20px;
&.down {
border-top-left-radius: 10px;
@ -142,7 +169,7 @@
}
&.loading {
animation: acceleratePulse 1s infinite;
animation: goFasterUp 1s infinite linear;
}
}
}
@ -220,3 +247,18 @@
50% { background-color: var(--mainnet-alt) }
100% { background-color: var(--tertiary) }
}
@keyframes goFasterUp {
0% { background-position-y: 0; }
100% { background-position-y: -40px; }
}
@keyframes goFasterLeft {
0% { background-position: left 0px bottom 0px }
100% { background-position: left 40px bottom 0px; }
}
@keyframes goFasterRight {
0% { background-position: right 0 bottom 0px; }
100% { background-position: right -40px bottom 0px; }
}