-
+
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
index 8648052f4..dd815ba45 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -1,7 +1,10 @@
.acceleration-timeline {
position: relative;
width: 100%;
- padding: 0.5em 0 1em;
+ padding: 1em 0;
+ &.lower-padding {
+ padding: 0.5em 0 1em;
+ }
&::after, &::before {
content: '';
@@ -52,7 +55,7 @@
.interval, .interval-spacer {
width: 8em;
- min-width: 5em;
+ min-width: 8em;
max-width: 8em;
height: 32px;
display: flex;
@@ -112,8 +115,20 @@
background: var(--tertiary);
border-radius: 5px;
- &.loading {
- animation: acceleratePulse 1s infinite;
+ &.go-faster {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%239339f4;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%239339f4;' 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 0.8s infinite linear;
+ }
+ &.left {
+ right: calc(50% + 5px);
+ margin-left: calc(-4em + 5px);
+ animation: goFasterLeft 0.8s infinite linear;
+ }
}
&.left {
@@ -123,28 +138,6 @@
left: 50%;
}
}
-
- .connector {
- position: absolute;
- height: 88px;
- width: 10px;
- left: -5px;
- top: -73px;
- transform: translateX(120%);
- background: var(--tertiary);
-
- &.down {
- border-top-left-radius: 10px;
- }
-
- &.up {
- border-top-right-radius: 10px;
- }
-
- &.loading {
- animation: acceleratePulse 1s infinite;
- }
- }
}
.nodes {
@@ -159,16 +152,17 @@
margin-bottom: -8px;
transform: translateY(-50%);
border-radius: 50%;
- padding: 2px;
-
+ cursor: pointer;
+ padding: 4px;
+ background: transparent;
+
.shape {
+ position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: white;
- &.accelerating {
- animation: acceleratePulse 1s infinite;
- }
+ z-index: 1;
}
&.waiting {
@@ -176,17 +170,41 @@
background: var(--grey);
}
}
-
- &.accelerated-selected {
- .shape {
- background: var(--tertiary);
+
+ .connector {
+ position: absolute;
+ z-index: 0;
+ height: 88px;
+ width: 10px;
+ left: -5px;
+ top: -73px;
+ transform: translateX(120%);
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' 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%),
+ background-size: 10px 20px;
+
+ &.down {
+ border-top-left-radius: 10px;
+ }
+
+ &.up {
+ border-top-right-radius: 10px;
+ }
+
+ &.loading {
+ animation: goFasterUp 0.8s infinite linear;
}
}
+ }
+
+ &.accelerated {
+ .shape-border {
+ animation: acceleratePulse 0.4s infinite;
+ }
+ }
- &.mined-selected {
- .shape {
- background: var(--success);
- }
+ &.selected {
+ .shape-border {
+ background: var(--mainnet-alt);
}
}
@@ -220,3 +238,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; }
+}
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
index ba687e093..38d48dd05 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts
@@ -28,14 +28,16 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges {
ngOnChanges(changes): void {
this.now = Math.floor(new Date().getTime() / 1000);
- if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
- if (changes?.eta?.currentValue) {
- if (changes?.acceleratedETA?.currentValue) {
- this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now));
- } else if (changes?.standardETA?.currentValue) {
- this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now));
- }
- }
- }
+ // Hide standard ETA while we don't have a proper standard ETA calculation, see https://github.com/mempool/mempool/issues/65
+
+ // if (changes?.eta?.currentValue || changes?.standardETA?.currentValue || changes?.acceleratedETA?.currentValue) {
+ // if (changes?.eta?.currentValue) {
+ // if (changes?.acceleratedETA?.currentValue) {
+ // this.accelerateRatio = Math.floor((Math.floor(changes.eta.currentValue.time / 1000) - this.now) / (Math.floor(changes.acceleratedETA.currentValue / 1000) - this.now));
+ // } else if (changes?.standardETA?.currentValue) {
+ // this.accelerateRatio = Math.floor((Math.floor(changes.standardETA.currentValue / 1000) - this.now) / (Math.floor(changes.eta.currentValue.time / 1000) - this.now));
+ // }
+ // }
+ // }
}
}