Sticky spell damage

display.js

@@ -914,7 +914,7 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){
     overallaverageDamage.appendChild(overallaverageDamageSecond);
 
     overallparent_elem.append(overallaverageDamage);
-    overallparent_elem.append(document.createElement("br"));
+    //overallparent_elem.append(document.createElement("br"));
 
     //attack speed
     let atkSpd = document.createElement("p");
@@ -936,7 +936,7 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){
     overallatkSpd.appendChild(overallatkSpdFirst);
     overallatkSpd.appendChild(overallatkSpdSecond);
     overallparent_elem.append(overallatkSpd);
-    overallparent_elem.append(document.createElement("br"));
+    //overallparent_elem.append(document.createElement("br"));
 
     //Non-Crit: n->elem, total dmg, DPS
     let nonCritStats = document.createElement("p");
@@ -1374,24 +1374,20 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
 
     let save_damages = [];
 
+    let part_divavg = document.createElement("p");
+    part_divavg.classList.add("nomargin");
+    overallparent_elem.append(part_divavg);
+
     for (const part of spell.parts) {
         parent_elem.append(document.createElement("br"));
         let part_div = document.createElement("p");
         parent_elem.append(part_div);
 
-        let part_divavg = document.createElement("p");
-        //part_divavg.classList.add("Normal");
-        overallparent_elem.append(part_divavg);
-
         let subtitle_elem = document.createElement("p");
         subtitle_elem.textContent = part.subtitle;
+        subtitle_elem.classList.add("nomargin");
         part_div.append(subtitle_elem);
 
-        if (part.summary == true) {
-            let subtitle_elemavg = document.createElement("p");
-            subtitle_elemavg.textContent = part.subtitle;
-            part_divavg.append(subtitle_elemavg);
-        }
         if (part.type === "damage") {
             //console.log(build.expandedStats);
             let _results = calculateSpellDamage(stats, part.conversion,
@@ -1418,12 +1414,12 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
                 let overallaverageLabel = document.createElement("p");
                 let first = document.createElement("b");
                 let second = document.createElement("b");
-                first.textContent = "Average: "; 
+                first.textContent = part.subtitle + " Average: "; 
                 second.textContent = averageDamage.toFixed(2);
                 overallaverageLabel.appendChild(first);
                 overallaverageLabel.appendChild(second);
                 second.classList.add("Damage");
-                overallaverageLabel.classList.add("damageSubtitle");
+                overallaverageLabel.classList.add("overallp");
                 part_divavg.append(overallaverageLabel);
             }
 
@@ -1466,9 +1462,14 @@ function displaySpellDamage(parent_elem, overallparent_elem, build, spell, spell
             part_div.append(healLabel);
             if (part.summary == true) {
                 let overallhealLabel = document.createElement("p");
-                overallhealLabel.textContent = heal_amount;
+                let first = document.createElement("b");
-                overallhealLabel.classList.add("damagep");
+                let second = document.createElement("b");
-                overallhealLabel.classList.add("Set");
+                first.textContent = part.subtitle + ":";
+                second.textContent = heal_amount;
+                overallhealLabel.appendChild(first);
+                second.classList.add("Set");
+                overallhealLabel.appendChild(second);
+                overallhealLabel.classList.add("overallp");
                 part_divavg.append(overallhealLabel);
             }
         }

index.html

@@ -418,6 +418,7 @@
                 </div>
             </div>
             <div class="spell-info-container hide-container-block" style="display: none;">
+                <div class="sticky-box">
                     <div class="spell-info">
                         <div class="center" id="build-melee-statsAvg">melee</div>
                     </div>
@@ -438,6 +439,7 @@
                     </div>
                 </div>
             </div>
+        </div>
         <div class="skillpoints">
             <div class="center" style="grid-column:1;grid-row:1">
                 <div>

styles.css

@@ -14,6 +14,7 @@ th, td {
 
 .nomargin {
     padding: 0px;
+    margin: 0px;
 }
 
 div {
@@ -72,6 +73,8 @@ a.link{
 .smalltitle{
     text-align: center;
     font-size: 125%;
+    margin-top: 10px;
+    margin-bottom: 4px;
 }
 .center {
     text-align: center;

wide.css

@@ -4,6 +4,10 @@
 .spell-info-container {
     grid-column:4;
 }
+.sticky-box {
+    position: sticky;
+    top: 0;
+}
 .summary {
     padding: 2% 4% 4%;
     display: grid;