improve layout of badge unlock popup
This commit is contained in:
parent
a798f41ca6
commit
ac5e24c5d7
GPG key ID:
B8583C4B7D18119E
1 changed files with 58 additions and 26 deletions
|
|
@ -1,7 +1,7 @@
|
|||
// ==UserScript==
|
||||
// @name MultiProbe
|
||||
// @namespace https://*.angusnicneven.com/*
|
||||
// @version 20241012.0
|
||||
// @version 20241013.0
|
||||
// @description Probe with friends!
|
||||
// @author tgpholly
|
||||
// @match https://*.angusnicneven.com/*
|
||||
|
|
@ -55,7 +55,7 @@ console.log("[MP] MultiProbe init");
|
|||
'use strict';
|
||||
|
||||
// Make sure to change the userscript version too!!!!!!!!!!
|
||||
const USERSCRIPT_VERSION_RAW = "20241012.0";
|
||||
const USERSCRIPT_VERSION_RAW = "20241013.0";
|
||||
const USERSCRIPT_VERSION = parseInt(USERSCRIPT_VERSION_RAW.replace(".", ""));
|
||||
|
||||
if (!continueRunningScript) {
|
||||
|
|
@ -284,54 +284,59 @@ kbd {
|
|||
|
||||
@keyframes badgepop {
|
||||
0% {
|
||||
top: -4rem;
|
||||
transform: translate(-50%, -125%);
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0rem;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes badgepopout {
|
||||
0% {
|
||||
top: 0rem;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
top: -4rem;
|
||||
transform: translate(-50%, -125%);
|
||||
}
|
||||
}
|
||||
|
||||
.badgepopout {
|
||||
top: -4rem;
|
||||
transform: translate(-50%, -125%);
|
||||
visibility: visible!important;
|
||||
animation: badgepopout .35s ease-in-out !important;
|
||||
}
|
||||
|
||||
.badgepopin {
|
||||
top: 0rem;
|
||||
transform: translate(-50%, 0%);
|
||||
visibility: visible!important;
|
||||
animation: badgepop .35s ease-in-out !important;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.badgepopcreate {
|
||||
top: -4rem;
|
||||
transform: translate(-50%, -125%);
|
||||
}
|
||||
|
||||
.badgepop {
|
||||
position: absolute;
|
||||
margin-top: .5rem;
|
||||
width: 15rem;
|
||||
visibility: hidden;
|
||||
width: calc(15.0rem + 4vw);
|
||||
background-color: black;
|
||||
|
||||
text-align: start!important;
|
||||
|
||||
padding: .5rem;
|
||||
|
||||
border: 1px solid white;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.badgepop mp_col_auto {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.badgepop mp_text {
|
||||
font-size: 8px;
|
||||
font-size: calc(0.5rem + 0.1vw);
|
||||
color: white;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -346,6 +351,32 @@ mp_container {
|
|||
display: block;
|
||||
}
|
||||
|
||||
mp_row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(-1 * 0);
|
||||
margin-right: calc(-0.5 * 1.5rem);
|
||||
margin-left: calc(-0.5 * 1.5rem);
|
||||
}
|
||||
|
||||
mp_row > * {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-right: calc(1.5rem * 0.5);
|
||||
padding-left: calc(1.5rem * 0.5);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
mp_col {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
mp_col_auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.badgepop * {
|
||||
text-align: unset!important;
|
||||
text-shadow: none!important;
|
||||
|
|
@ -476,10 +507,6 @@ mp_button {
|
|||
buttonBox.classList.add("buttons");
|
||||
user.appendChild(buttonBox);
|
||||
|
||||
/*const followButton = document.createElement("mp_button");
|
||||
followButton.innerText = "F";
|
||||
buttonBox.appendChild(followButton);*/
|
||||
|
||||
const gotoButton = document.createElement("mp_button");
|
||||
gotoButton.innerText = "Go To";
|
||||
const gotoLoc = location;
|
||||
|
|
@ -981,7 +1008,6 @@ mp_button {
|
|||
}
|
||||
} else {
|
||||
localStorage["mpconnectonload"] = true;
|
||||
//doConnect(localStorage["mpapikey"]);
|
||||
}
|
||||
disconnectButton.innerText = localStorage["mpconnectonload"] === "true" ? "Disconnect" : "Connect";
|
||||
|
||||
|
|
@ -1112,7 +1138,12 @@ mp_button {
|
|||
const popup = document.createElement("mp_badge");
|
||||
popup.classList.add("badgepop");
|
||||
popup.classList.add("badgepopcreate");
|
||||
popup.style = "transform:translateX(-50%)";
|
||||
|
||||
const baseRow = document.createElement("mp_row");
|
||||
popup.appendChild(baseRow);
|
||||
|
||||
const imageCol = document.createElement("mp_col_auto");
|
||||
baseRow.appendChild(imageCol);
|
||||
|
||||
const badgeImage = new Image(32, 32);
|
||||
badgeImage.src = image;
|
||||
|
|
@ -1122,17 +1153,18 @@ mp_button {
|
|||
popup.classList.add("badgepopin");
|
||||
setTimeout(() => popupSound.play(), 100);
|
||||
};
|
||||
popup.appendChild(badgeImage);
|
||||
imageCol.appendChild(badgeImage);
|
||||
|
||||
const textRowCol = document.createElement("mp_col");
|
||||
baseRow.appendChild(textRowCol);
|
||||
|
||||
const badgeTitle = document.createElement("mp_text");
|
||||
badgeTitle.innerHTML = `<b>${title}</b>`;
|
||||
badgeTitle.style = "position:absolute;top:.5rem;left:calc(1rem + 32px)";
|
||||
popup.appendChild(badgeTitle);
|
||||
textRowCol.appendChild(badgeTitle);
|
||||
|
||||
const badgeDescription = document.createElement("mp_text");
|
||||
badgeDescription.innerHTML = description;
|
||||
badgeDescription.style = "position:absolute;top:1.1rem;left:calc(1rem + 32px)";
|
||||
popup.appendChild(badgeDescription);
|
||||
badgeDescription.innerHTML = description.replaceAll("\r", "").replaceAll("\n", "<br>");
|
||||
textRowCol.appendChild(badgeDescription);
|
||||
|
||||
popupRoot.appendChild(popup);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue