diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index 949e2e059..cc3e776f1 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -315,6 +315,9 @@ function OpenNavPanels() { dragElement(document.getElementById("sheld")); dragElement(document.getElementById("left-nav-panel")); dragElement(document.getElementById("right-nav-panel")); +setTimeout(function () { + dragElement(document.getElementById("expression-holder")) +}, 2000); function dragElement(elmnt) { @@ -342,6 +345,7 @@ function dragElement(elmnt) { //disable scrollbars when dragging to prevent jitter $("body").css("overflow", "hidden"); + //get window size let winWidth = window.innerWidth; let winHeight = window.innerHeight; @@ -387,6 +391,9 @@ function dragElement(elmnt) { elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; + $(elmnt).css("bottom", "unset"); + $(elmnt).css("right", "unset"); + } }, 50) @@ -403,6 +410,7 @@ function dragElement(elmnt) { document.onmousemove = null; //revert scrolling to normal after drag to allow recovery of vastly misplaced elements $("body").css("overflow", "auto"); + } } diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index 4587b6929..fd1591d6e 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/public/scripts/extensions/expressions/index.js @@ -248,7 +248,7 @@ async function setExpression(character, expression, force) { img.attr('src', imgUrl); img.removeClass('default'); img.off('error'); - img.on('error', function() { + img.on('error', function () { $(this).attr('src', ''); if (force && extension_settings.expressions.showDefault) { setDefault(); @@ -285,7 +285,11 @@ function onClickExpressionImage() { (function () { function addExpressionImage() { - const html = `
`; + const html = ` +
+
+ +
`; $('body').append(html); } function addSettings() { diff --git a/public/scripts/extensions/expressions/style.css b/public/scripts/extensions/expressions/style.css index a4f2549bc..212a8c5e9 100644 --- a/public/scripts/extensions/expressions/style.css +++ b/public/scripts/extensions/expressions/style.css @@ -5,7 +5,7 @@ } .expression-holder { - max-height: 90vh; + /* max-height: 90vh; max-width: calc((100vw - 800px)/2); width: 100%; position: fixed; @@ -16,14 +16,34 @@ text-align: center; filter: drop-shadow(2px 2px 2px #51515199); transition: 500ms; + z-index: 3; */ + + /* min-width: 100px; + min-height: 100px; */ + max-height: 90vh; + max-width: 90vh; + width: calc((100vw - var(--sheldWidth)) /2); + position: absolute; + + bottom: 1px; + padding: 0; + + filter: drop-shadow(2px 2px 2px #51515199); + z-index: 3; + resize: both; + overflow: hidden; + /* border: 1px solid red; */ + } img.expression { - max-width: 100%; - max-height: 90vh; + /* max-width: 90vw; + max-height: 90vh; */ + width: 100%; + height: 100%; vertical-align: bottom; - object-fit: cover; + object-fit: contain; } img.expression.default { diff --git a/public/style.css b/public/style.css index 4ec3abb45..b34ba4b2a 100644 --- a/public/style.css +++ b/public/style.css @@ -3318,7 +3318,7 @@ body.waifuMode #chat { } body.waifuMode .expression-holder { - max-height: 90vh; + /* max-height: 90vh; max-width: unset; width: 100%; position: fixed; @@ -3330,14 +3330,38 @@ body.waifuMode .expression-holder { text-align: center; filter: drop-shadow(2px 2px 2px #51515199); transition: 500ms; + z-index: 1; */ + + max-height: 90vh; + max-width: 90vw; + /* width: 100vw; */ + /* width: min-content; */ + height: 90vh; + width: 90vw; + position: absolute; + left: 5vw; + /* right: calc(100vw / 2); */ + /* display: flex !important; */ + /* justify-self: center; */ + bottom: 0; + /* padding-left: 10px; */ + /* padding-right: 10px; */ + /* text-align: center; */ + filter: drop-shadow(2px 2px 2px #51515199); + /* transition: 500ms; */ z-index: 1; + resize: both; } body.waifuMode img.expression { - height: 90vh; + /* height: 90vh; max-width: 100%; max-height: 90vh; - vertical-align: bottom; + vertical-align: bottom; */ + + height: 90vh; + /* width: 100px; */ + /* vertical-align: bottom; */ } /* ---------- @media queries must always go at the bottom ------------*/ @@ -3430,7 +3454,7 @@ body.waifuMode img.expression { resize: none; left: 0 !important; - top: 42px !important; + top: 42px; width: 100% !important; max-width: 100%; }