1
0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-02-13 03:19:19 +00:00

add pin indicator to stats page so users have an indication of why lower rate shapes may be at the top

This commit is contained in:
David Burhans 2020-06-15 23:49:55 -05:00
parent f64ac04d9e
commit bd265d36de
2 changed files with 33 additions and 1 deletions

View File

@ -80,6 +80,7 @@
background: #f4f4f4;
@include S(margin-bottom, 4px);
display: grid;
position: relative;
@include DarkThemeOverride {
background: #222428;
@ -103,6 +104,19 @@
@include S(padding, 0, 3px);
}
div.pin {
@include S(width, 12px);
@include S(height, 12px);
@include S(padding, 0px);
background: uiResource("icons/pin.png") center center / 95% no-repeat;
position: absolute;
opacity: 0.6;
transition: opacity 0.12s ease-in-out;
@include DarkThemeInvert;
}
}
}
@ -135,6 +149,13 @@
background: rgba(0, 10, 20, 0.05);
justify-self: end;
}
.pin {
grid-column: 2 / 2;
grid-row: 1 / 3;
@include S(top, 4px);
@include S(right, 8px);
}
}
}
&[data-displaymode="detailed"] .content.hasEntries {
@ -153,6 +174,13 @@
color: #55595a;
}
.pin {
grid-column: 1 / 2;
grid-row: 1 / 3;
@include S(top, 4px);
@include S(left, 40px);
}
canvas.graph {
@include S(width, 270px);
@include S(height, 40px);

View File

@ -32,7 +32,11 @@ export class HUDShapeStatisticsHandle {
initElement() {
this.element = document.createElement("div");
this.element.setAttribute("data-shape-key", this.definition.getHash());
if (this.root.hud.parts.pinnedShapes.isShapePinned(this.definition.getHash())) {
const pinButton = document.createElement("div");
pinButton.classList.add("pin");
this.element.appendChild(pinButton);
}
this.counter = document.createElement("span");
this.counter.classList.add("counter");
this.element.appendChild(this.counter);