Merge pull request #4 from dr-carlos/master

Finish hiding redundant, messy items from page.

builder.js

@@ -452,8 +452,11 @@ function calculateBuild(save_skp, skp){
         }
         document.getElementById("level-choice").value = level;
 
-        for (let i of document.getElementsByClassName("hide-container")) {
-			i.style.visibility = "visible";
+        for (let i of document.getElementsByClassName("hide-container-block")) {
+			i.style.display = "block";
+        }
+        for (let i of document.getElementsByClassName("hide-container-grid")) {
+			i.style.display = "grid";
 		}
 
         player_build = new Build(level, equipment, powderings, new Map());

display.js

@@ -105,9 +105,9 @@ function displaySetBonuses(parent_id,build) {
     parent_div.append(set_summary_elem);
     
     if (build.activeSetCounts.size) {
-        parent_div.parentElement.style.visibility = "visible";
+        parent_div.parentElement.style.display = "block";
     } else {
-        parent_div.parentElement.style.visibility = "hidden";
+        parent_div.parentElement.style.display = "none";
     }
 
     for (const [setName, count] of build.activeSetCounts) {

index.html

@@ -393,13 +393,13 @@
                     </div>
                 </div>
             </div>
-            <div class="build-overall-container hide-container" style="visibility: hidden;">
+            <div class="build-overall-container hide-container-block" style="display: none;">
                 <div class = "center build-overall" id = "build-overall">
                     <br/>
                     <div class = "center" id = "build-overall-stats"></div>
                 </div>
             </div>
-            <div class="spell-info-container hide-container" style="visibility: hidden;">
+            <div class="spell-info-container hide-container-block" style="display: none;">
                 <div class="spell-info">
                     <div class="center" id="build-melee-statsAvg">melee</div>
                 </div>
@@ -497,7 +497,7 @@
                 Update Stats
             </button>
         </div>
-        <div class = "build">
+        <div class = "build hide-container-grid" style="display: none;">
             <div class = "center build-helmet" id = "build-helmet" style = "grid-item-1">
                 <div class = "center" id = "build-helmet-stats"></div>
             </div>
@@ -532,7 +532,7 @@
             <div class = "center build-defense-stats" id = "build-defense-stats" style = "grid-item-12">
             </div>
         </div>
-        <div class = "spells">
+        <div class = "spells hide-container-grid" style="display: none;">
             <div class = "center spell-info" id = "spell0" style = "grid-item-1">
                 <!--div class = "center" id = "spell0-name">Spell 1</div-->
                 <div class = "center" id = "spell0-info">Spell 1</div>
@@ -551,7 +551,7 @@
             </div>
         </div>
         <div class="misc">
-            <div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1;visibility:hidden;">
+            <div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; display: none;">
                 <div class = "center" id = "set-info">Set info</div>
             </div>
             <div class = "center int-info" id = "int-info-div" style = "grid-column:4;grid-row:1;visibility:visible;">

narrow.css

@@ -33,3 +33,35 @@
 .skp-input {
 
 }
+
+.hide-container-block {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.hide-container-grid {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.set-info-div {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromNone {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

wide.css

@@ -30,3 +30,35 @@
 .skp-input {
 
 }
+
+.hide-container-block {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.hide-container-grid {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+.set-info-div {
+    animation-duration: 0.5s;
+    animation-name: fadeInFromNone;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInFromNone {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}