Merge pull request #26 from hppeng-wynn/spell_detail_clickable

Spell detail clickable

builder/index.html

@@ -1240,31 +1240,31 @@
                 </div>
                 <div class="col-xl-3 mb-3">
                     <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
-                        <div class="col">
-                            <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
+                        <div class = "col">
+                            <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
                             <div class = "spell-display dark-5 rounded-bottom py-2 dark-shadow" id = "build-melee-stats" style="display: none;"></div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
+                        <div class = "col">
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell0-infoAvg">spell1</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">spell1</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell1-infoAvg">spell2</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell1-infoAvg">spell2</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell2-infoAvg">spell3</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell2-infoAvg">spell3</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell3-infoAvg">spell4</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
+                        <div class = "col">
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell3-infoAvg">spell4</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
                         </div>
-                        <div class="col">
-                            <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
+                        <div class = "col">
+                            <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
                         </div>
                         
                     </div>

js/sq2bs.js

@@ -252,10 +252,13 @@ function show_tab(tab) {
 }
 
 function toggle_spell_tab(tab) {
+    let arrow_img = document.querySelector("#" + "arrow_" + tab + "Avg");
     if (document.querySelector("#"+tab).style.display == "none") {
         document.querySelector("#"+tab).style.display = "";
+        arrow_img.src = arrow_img.src.replace("down", "up");
     } else {
         document.querySelector("#"+tab).style.display = "none";
+        arrow_img.src = arrow_img.src.replace("up", "down");
     }
 }
 

js/sq2display.js

@@ -1412,6 +1412,13 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
             part_divavg.append(overallaverageLabel);
         }
     }
+
+    //up and down arrow - done ugly
+    let arrow = document.createElement("img");
+    arrow.id = "arrow_" + overallparent_elem.id;
+    arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem";
+    arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png";
+    overallparent_elem.appendChild(arrow);
 }
 
 function displaysq2EquipOrder(parent_elem, buildOrder){