endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

change columns to 9, adjust sizes, fix selecteds

Browse source
This commit is contained in:
reschan 2022-06-16 07:18:29 +07:00
parent 8df8632c6d
commit 4f43a81313
4 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
builder/index.html
View file

@ -617,7 +617,7 @@
<div class="col border rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;"> <div class="col border rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;">
</div> </div>
<div class="col" id="atree-active"> <div class="col mx-auto" id="atree-active">
Active: Active:
</div> </div>
</div> </div>

9
css/sq2bs.css
View file

@ -475,12 +475,9 @@ a:hover {
} }
/* atree hover */ /* atree hover */
.atree-node { .atree-selected {
opacity: 75%; border: 5px solid blue;
} border-radius: 50%;
.atree-node:hover {
opacity: 100%;
} }
.hide-scroll { .hide-scroll {

18
js/sq2bs.js
View file

@ -544,10 +544,10 @@ function construct_AT(elem, tree) {
let row = document.createElement('div'); let row = document.createElement('div');
row.classList.add("row"); row.classList.add("row");
row.id = "atree-row-" + j; row.id = "atree-row-" + j;
row.style.height = elem.getBoundingClientRect().width / 5 + "px"; row.style.height = elem.getBoundingClientRect().width / 9 + "px";
for (let k = 0; k < 5; k++) { for (let k = 0; k < 9; k++) {
col = document.createElement('div'); col = document.createElement('div');
col.classList.add('col', 'px-0'); col.classList.add('col', 'px-0');
row.appendChild(col); row.appendChild(col);
@ -571,7 +571,7 @@ function construct_AT(elem, tree) {
if (e.target !== this) {return;} if (e.target !== this) {return;}
let tooltip = this.children[0]; let tooltip = this.children[0];
tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY * 1.02 + "px"; tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY * 1.02 + "px";
tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + (elem.getBoundingClientRect().width * .05 / 2) + "px"; tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + (elem.getBoundingClientRect().width * .2 / 2) + "px";
tooltip.style.display = "block"; tooltip.style.display = "block";
}); });
@ -581,13 +581,11 @@ function construct_AT(elem, tree) {
tooltip.style.display = "none"; tooltip.style.display = "none";
}); });
node_elem.classList.add("fake-button");
node_elem.classList.add("atree-node");
let active_tooltip = document.createElement('div'); let active_tooltip = document.createElement('div');
active_tooltip.classList.add("rounded-bottom", "dark-7", "border"); active_tooltip.classList.add("rounded-bottom", "dark-7", "border", "mb-2", "mx-auto");
active_tooltip.style.width = elem.getBoundingClientRect().width * .95 + "px"; active_tooltip.style.width = elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.display = "none"; active_tooltip.style.display = "none";
// tooltip text formatting // tooltip text formatting
@ -618,11 +616,11 @@ function construct_AT(elem, tree) {
let tooltip = document.getElementById("atree-ab-" + node.title.replaceAll(" ", "")); let tooltip = document.getElementById("atree-ab-" + node.title.replaceAll(" ", ""));
if (tooltip.style.display == "block") { if (tooltip.style.display == "block") {
tooltip.style.display = "none"; tooltip.style.display = "none";
this.classList.add("atree-node"); this.classList.remove("atree-selected");
} }
else { else {
tooltip.style.display = "block"; tooltip.style.display = "block";
this.classList.remove("atree-node"); this.classList.add("atree-selected");
} }
}); });
}; };

BIN
media/atree/connect-3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7 KiB