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%;
}