Use CSS to fix Skill cards height instead JS (#342)

* resize skillcards by CSS instead of JS

* Revert "resize skillcards by CSS instead of JS"

This reverts commit 169e0599e9ff771c1cf58c03fb799c42aac65092.

* resize skillcards by CSS instead of JS

Co-authored-by: vlebert <vlebert@tactis.fr>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

2 files changed, 4 insertions, 25 deletions

diff --git a/static/css/sections/skills.css b/static/css/sections/skills.css
index 374d3c6..211da14 100644
--- a/static/css/sections/skills.css
+++ b/static/css/sections/skills.css
@@ -19,6 +19,7 @@
 .skills-section .card {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  height: 100%;
 }
 
 .skills-section .card .card-body {
diff --git a/static/js/home.js b/static/js/home.js
index fe93469..91fc725 100644
--- a/static/js/home.js
+++ b/static/js/home.js
@@ -63,28 +63,6 @@ var projectCards;
       }
     }
 
-    // ==================== Adjust height of the skills card =============
-    function adjustSkillCardsHeight() {
-      if (!isMobile) { // no need to adjust height for mobile devices
-        // primary skills
-        var skillCards = document.getElementById("primary-skills");
-        if (skillCards != null) {
-          var cardElems = skillCards.getElementsByClassName("card");
-          var maxHeight = 0;
-          for (let i = 0; i < cardElems.length; i++) {
-            if (cardElems.item(i).clientHeight > maxHeight) {
-              maxHeight = cardElems.item(i).clientHeight;
-            }
-          }
-          for (let i = 0; i < cardElems.length; i++) {
-            cardElems.item(i).setAttribute("style", "min-height: " + maxHeight + "px;");
-          }
-        }
-      }
-    }
-    $(window).on("load", function () {
-      adjustSkillCardsHeight();
-    });
 
     // ================== Project cards =====================
     // Add click action on project category selector buttons
@@ -331,17 +309,17 @@ var projectCards;
           this.parentElement.classList.toggle("col-sm-12");
           if (this.children["SmallImage"].hasAttribute("active")) {
             let mainLogo = this.children["LargeImage"].getAttribute("Style");
-            this.children["LargeImage"].setAttribute("active",true);
+            this.children["LargeImage"].setAttribute("active", true);
             this.children["SmallImage"].removeAttribute("active");
 
             this.setAttribute("Style", mainLogo);
           } else {
             let mainLogo = this.children["SmallImage"].getAttribute("Style");
-            this.children["SmallImage"].setAttribute("active",true);
+            this.children["SmallImage"].setAttribute("active", true);
             this.children["LargeImage"].removeAttribute("active");
             this.setAttribute("Style", mainLogo);
           }
-         
+
           if (this.children["caption"] != undefined) {
             this.children["caption"].classList.toggle("hidden");
           }