From 4f43a81313f9b77ab4293556b545979af3106547 Mon Sep 17 00:00:00 2001
From: reschan <h>
Date: Thu, 16 Jun 2022 07:18:29 +0700
Subject: [PATCH] change columns to 9, adjust sizes, fix selecteds

---
 builder/index.html        |   2 +-
 css/sq2bs.css             |   9 +++------
 js/sq2bs.js               |  18 ++++++++----------
 media/atree/connect-3.png | Bin 0 -> 7142 bytes
 4 files changed, 12 insertions(+), 17 deletions(-)
 create mode 100644 media/atree/connect-3.png

diff --git a/builder/index.html b/builder/index.html
index 919c603..c307134 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -617,7 +617,7 @@
                                             <div class="col border rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;">
 
                                             </div>
-                                            <div class="col" id="atree-active">
+                                            <div class="col mx-auto" id="atree-active">
                                                 Active:
                                             </div>
                                         </div>
diff --git a/css/sq2bs.css b/css/sq2bs.css
index 6790cb9..27fb6dd 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -475,12 +475,9 @@ a:hover {
 }
 
 /* atree hover */
-.atree-node {
-    opacity: 75%;
-}
-
-.atree-node:hover {
-    opacity: 100%;
+.atree-selected {
+    border: 5px solid blue;
+    border-radius: 50%;
 }
 
 .hide-scroll {
diff --git a/js/sq2bs.js b/js/sq2bs.js
index 8b97a88..cf57510 100644
--- a/js/sq2bs.js
+++ b/js/sq2bs.js
@@ -544,10 +544,10 @@ function construct_AT(elem, tree) {
                     let row = document.createElement('div');
                     row.classList.add("row");
                     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.classList.add('col', 'px-0');
                         row.appendChild(col);
@@ -571,7 +571,7 @@ function construct_AT(elem, tree) {
                 if (e.target !== this) {return;}
                 let tooltip = this.children[0];
                 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";
             });
 
@@ -581,13 +581,11 @@ function construct_AT(elem, tree) {
                 tooltip.style.display = "none";
             });
 
-
-
-            node_elem.classList.add("atree-node");
+            node_elem.classList.add("fake-button");
 
             let active_tooltip = document.createElement('div');
-            active_tooltip.classList.add("rounded-bottom", "dark-7", "border");
-            active_tooltip.style.width = elem.getBoundingClientRect().width * .95 + "px";
+            active_tooltip.classList.add("rounded-bottom", "dark-7", "border", "mb-2", "mx-auto");
+            active_tooltip.style.width = elem.getBoundingClientRect().width * .80 + "px";
             active_tooltip.style.display = "none";
 
             // tooltip text formatting
@@ -618,11 +616,11 @@ function construct_AT(elem, tree) {
                 let tooltip = document.getElementById("atree-ab-" + node.title.replaceAll(" ", ""));
                 if (tooltip.style.display == "block") {
                     tooltip.style.display = "none";
-                    this.classList.add("atree-node");
+                    this.classList.remove("atree-selected");
                 } 
                 else {
                     tooltip.style.display = "block";
-                    this.classList.remove("atree-node");
+                    this.classList.add("atree-selected");
                 }
             });
         };
diff --git a/media/atree/connect-3.png b/media/atree/connect-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..736036614e8594d8f6ea71c1300c387407a62b4f
GIT binary patch
literal 7142
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
TO{u6v2>5cgce6XaHi-K_$P=Ah

literal 0
HcmV?d00001