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 169e0599e9.

* resize skillcards by CSS instead of JS

Co-authored-by: vlebert <vlebert@tactis.fr>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
vlebert 2021-06-05 20:14:32 +02:00 committed by GitHub
parent 08a09d5c71
commit 65a429b664
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 25 deletions

View file

@ -19,6 +19,7 @@
.skills-section .card {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
height: 100%;
}
.skills-section .card .card-body {

View file

@ -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");
}