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

* resize skillcards by CSS instead of JS * Revert "resize skillcards by CSS instead of JS" This reverts commit 169e059. * resize skillcards by CSS instead of JS Co-authored-by: vlebert <[email protected]> Co-authored-by: Emruz Hossain <[email protected]>
khannmb · Jun 5, 2021 · 65a429b · 65a429b
1 parent 08a09d5
commit 65a429b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 25 deletions.
diff --git 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
@@ -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");
  }