- smoother drag bounces

- z-index removed for drawer icons
- draggables can go to Y=0
This commit is contained in:
RossAscends
2023-04-18 04:34:48 +09:00
parent df8fabed28
commit 7c5f6be823
3 changed files with 32 additions and 27 deletions

View File

@ -63,7 +63,7 @@
<div id="top-settings-holder">
<!-- background selection menu -->
<div id="ai-config-button" class="drawer" style="z-index:3002;">
<div id="ai-config-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders closedIcon" title="AI Response Configuration"></div>
</div>
@ -800,7 +800,7 @@
</div>
</div>
<div id="sys-settings-button" class="drawer" style="z-index:3001;">
<div id="sys-settings-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation closedIcon" title="API Connections"></div>
</div>
@ -968,7 +968,7 @@
</div>
</div>
<div id="advanced-formatting-button" class="drawer" style="z-index:3005;">
<div id="advanced-formatting-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-font closedIcon" title="AI Reponse Formatting"></div>
</div>
@ -1080,7 +1080,7 @@
</div>
</div>
<div id="WI-SP-button" class="drawer" style="z-index:3003;">
<div id="WI-SP-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
</div>
@ -1132,7 +1132,7 @@
</div>
</div>
<div id="user-settings-button" class="drawer" style="z-index:3004;">
<div id="user-settings-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
</div>
@ -1301,7 +1301,7 @@
</div>
</div>
<div id="logo_block" class="drawer" style="z-index:3001;" title="Change Background Image">
<div id="logo_block" class="drawer" title="Change Background Image">
<div id="site_logo" class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-panorama closedIcon"></div>
</div>
@ -1319,7 +1319,7 @@
</div>
</div>
<div id="extensions-settings-button" class="drawer" style="z-index:3004;">
<div id="extensions-settings-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-cubes closedIcon" title="Extensions"></div>
</div>
@ -1355,7 +1355,7 @@
</div>
</div>
<div id="rightNavHolder" class="drawer" style="z-index:3001;">
<div id="rightNavHolder" class="drawer">
<div id="unimportantYes" class="drawer-toggle drawer-header">
<div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-id-card closedIcon" title="Character Management">
</div>

View File

@ -364,24 +364,27 @@ function dragElement(elmnt) {
//fix over/underflows:
if (elmnt.offsetTop - pos2 <= 42) {
setTimeout(function () {
if (elmnt.offsetTop - pos2 <= 0) {
//prevent going out of window top + 42px barrier for TopBar (can hide grabber)
elmnt.style.top = "42px";
elmnt.style.top = "0px";
} else if (elmnt.offsetLeft - pos1 <= 0) {
//prevent moving out of window left
elmnt.style.left = "0px";
} else if (maxX >= winWidth) {
//bounce off right
elmnt.style.left = elmnt.offsetLeft - 20 + "px";
elmnt.style.left = elmnt.offsetLeft - 10 + "px";
} else if (maxY >= winHeight) {
//bounce off bottom
elmnt.style.top = elmnt.offsetTop - 20 + "px";
elmnt.style.top = elmnt.offsetTop - 10 + "px";
} else {
// if no problems, set element's new position
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
}
}, 50)
/* console.log("left/top: " + (elmnt.offsetLeft - pos1) + "/" + (elmnt.offsetTop - pos2) +
", win: " + winWidth + "/" + winHeight +

View File

@ -157,7 +157,8 @@ code {
line-height: var(--mainFontSize);
}
#bg1, #bg_custom {
#bg1,
#bg_custom {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
@ -2923,6 +2924,7 @@ label[for="extensions_autoconnect"] {
display: flex;
flex-flow: column;
width: 100%;
/* z-index: 3001; */
}
@ -3002,7 +3004,7 @@ label[for="extensions_autoconnect"] {
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
resize: both;
z-index: 9999;
z-index: 9999 !important;
}
.fillRight,