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 {
|
.skills-section .card {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skills-section .card .card-body {
|
.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 =====================
|
// ================== Project cards =====================
|
||||||
// Add click action on project category selector buttons
|
// Add click action on project category selector buttons
|
||||||
|
@ -331,17 +309,17 @@ var projectCards;
|
||||||
this.parentElement.classList.toggle("col-sm-12");
|
this.parentElement.classList.toggle("col-sm-12");
|
||||||
if (this.children["SmallImage"].hasAttribute("active")) {
|
if (this.children["SmallImage"].hasAttribute("active")) {
|
||||||
let mainLogo = this.children["LargeImage"].getAttribute("Style");
|
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.children["SmallImage"].removeAttribute("active");
|
||||||
|
|
||||||
this.setAttribute("Style", mainLogo);
|
this.setAttribute("Style", mainLogo);
|
||||||
} else {
|
} else {
|
||||||
let mainLogo = this.children["SmallImage"].getAttribute("Style");
|
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.children["LargeImage"].removeAttribute("active");
|
||||||
this.setAttribute("Style", mainLogo);
|
this.setAttribute("Style", mainLogo);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.children["caption"] != undefined) {
|
if (this.children["caption"] != undefined) {
|
||||||
this.children["caption"].classList.toggle("hidden");
|
this.children["caption"].classList.toggle("hidden");
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue