rainbownapkin/canopy
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects Releases Wiki Activity

Fixed userlist breaking the page layout

Browse source
This commit is contained in:
rainbow napkin 2024-12-05 04:46:57 -05:00
parent a20bb99af2
commit 3f0af3a519
3 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
www/js/channel/chat.js
View file

@ -196,14 +196,19 @@ class chatBox{
//Fix busted layout
var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;
this.chatPanel.style.width = `${this.chatPanel.getBoundingClientRect().width + pageBreak}px`;
//This sometimes gets called before userList ahs been initiated :p
if(this.client.userList != null){
this.client.userList.clickDragger.fixCutoff();
}
}
}
toggleUI(show = this.chatPanel.style.display == "none"){
toggleUI(show = !this.chatPanel.checkVisibility()){
if(show){
this.chatPanel.style.display = "flex";
this.showChatIcon.style.display = "none";
this.client.player.hideVideoIcon.style.display = "flex";
this.client.userList.clickDragger.fixCutoff();
}else{
this.chatPanel.style.display = "none";
this.showChatIcon.style.display = "flex";

6
www/js/channel/userlist.js
View file

@ -86,6 +86,9 @@ class userList{
});
this.colorMap = newMap;
//Make sure we're not cutting the ux off
this.clickDragger.fixCutoff();
}
renderUser(user, flair){
@ -118,10 +121,11 @@ class userList{
this.userList.appendChild(userSpan);
}
toggleUI(show = this.userDiv.style.display == "none"){
toggleUI(show = !this.userDiv.checkVisibility()){
if(show){
this.userDiv.style.display = "flex";
this.toggleIcon.classList.replace("bi-caret-left-fill","bi-caret-down-fill");
this.clickDragger.fixCutoff();
}else{
this.userDiv.style.display = "none";
this.toggleIcon.classList.replace("bi-caret-down-fill","bi-caret-left-fill");

19
www/js/utils.js
View file

@ -222,10 +222,8 @@ class canopyUXUtils{
//If we let go here, the width isn't breaking anything so there's nothing to fix.
this.fixWidth = false;
}else{
//We need to move the element back, but we can't do it all the way while we're still dragging as it will thrash
this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak - 1)}vw`;
//If we stop dragging here, let the endDrag function know to fix the pixel difference used to prevent thrashing
this.fixWidth = true;
//call fixCutoff with standalone mode off, and a pre-calculated pageBreak
this.fixCutoff(false, pageBreak);
}
}
}
@ -234,6 +232,19 @@ class canopyUXUtils{
return (px / window.innerWidth) * 100;
}
fixCutoff(standalone = true, pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width){
//We need to move the element back, but we can't do it all the way while we're still dragging as it will thrash
this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak - 1)}vw`;
//If we stop dragging here, let the endDrag function know to fix the pixel difference used to prevent thrashing
this.fixWidth = true;
//If we're calling this outside of drag()
if(standalone){
//call end drag to finish the job
this.endDrag();
}
}
}
}