character expressions are now draggable

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");
+
     }
 }
 

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 = `<div id="expression-holder" class="expression-holder"><img class="expression"></div>`;
+        const html = `
+            <div id="expression-holder" class="expression-holder">
+                <div id="expression-holderheader" class="fa-solid fa-grip drag-grabber"></div>
+                <img class="expression">
+            </div>`;
         $('body').append(html);
     }
     function addSettings() {

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 {

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