From 65a429b664af0eca1f376dc3a9e77dbc39959b18 Mon Sep 17 00:00:00 2001 From: vlebert <49779177+vlebert@users.noreply.github.com> Date: Sat, 5 Jun 2021 20:14:32 +0200 Subject: 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 Co-authored-by: Emruz Hossain --- static/css/sections/skills.css | 1 + static/js/home.js | 28 +++------------------------- 2 files changed, 4 insertions(+), 25 deletions(-) (limited to 'static') 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"); } -- cgit v1.2.3