- 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"> <div id="top-settings-holder">
<!-- background selection menu --> <!-- 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 class="drawer-toggle drawer-header">
<div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders closedIcon" title="AI Response Configuration"></div> <div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders closedIcon" title="AI Response Configuration"></div>
</div> </div>
@ -800,7 +800,7 @@
</div> </div>
</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 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 id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation closedIcon" title="API Connections"></div>
</div> </div>
@ -968,7 +968,7 @@
</div> </div>
</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-toggle">
<div class="drawer-icon fa-solid fa-font closedIcon" title="AI Reponse Formatting"></div> <div class="drawer-icon fa-solid fa-font closedIcon" title="AI Reponse Formatting"></div>
</div> </div>
@ -1080,7 +1080,7 @@
</div> </div>
</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-toggle drawer-header">
<div class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div> <div class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
</div> </div>
@ -1132,7 +1132,7 @@
</div> </div>
</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-toggle">
<div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div> <div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
</div> </div>
@ -1301,7 +1301,7 @@
</div> </div>
</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 id="site_logo" class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-panorama closedIcon"></div> <div class="drawer-icon fa-solid fa-panorama closedIcon"></div>
</div> </div>
@ -1319,7 +1319,7 @@
</div> </div>
</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-toggle">
<div class="drawer-icon fa-solid fa-cubes closedIcon" title="Extensions"></div> <div class="drawer-icon fa-solid fa-cubes closedIcon" title="Extensions"></div>
</div> </div>
@ -1355,7 +1355,7 @@
</div> </div>
</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="unimportantYes" class="drawer-toggle drawer-header">
<div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-id-card closedIcon" title="Character Management"> <div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-id-card closedIcon" title="Character Management">
</div> </div>

View File

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

View File

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