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:
parent
08a09d5c71
commit
65a429b664
2 changed files with 4 additions and 25 deletions
|
@ -19,6 +19,7 @@
|
|||
.skills-section .card {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.skills-section .card .card-body {
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue