public/toha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
2 changed files with 4 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/sections/skills.css
+1
View File
@@ -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 {
static/js/home.js
+3 -25
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 ===================== // ================== 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");
} }