istio
/
istio.io
mirror of https://github.com/istio/istio.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix Improper Spacing When Displaying Multiple Banners (#13616) 

* change banner to sticky positioning

* add homepage banner logic to dynamically adjust

* resolve lint findings
This commit is contained in:
Michael Weiner 2023-07-26 08:30:41 -05:00 committed by GitHub
parent f1dfd1e80f
commit 2d14e2e08d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/sass/misc/_banners.scss
View File

@ -9,7 +9,7 @@
@media screen AND (min-width: $bp-md) {
display: block;
position: fixed;
position: sticky;
z-index: $banner-z;
width: 100%;
text-align: center;
@ -57,8 +57,3 @@
top: $headerHeightLg;
}
}
@media screen AND (min-width: $bp-md) {
.banner-padding {
padding-top: 5rem !important;
}
}

46
src/ts/events.ts
View File

@ -83,13 +83,29 @@ function handleEvents(): void {
if (display) {
el.style.display = "block";
const main = document.querySelector<HTMLElement>("main.primary");
if (main) {
main.classList.add("banner-padding");
const heroSection = document.querySelector<HTMLElement>("main.landing section#banner");
const banners = document.querySelector<HTMLElement>(".banner-container");
if (banners && heroSection) {
let activeBannerCount = 0;
banners.childNodes.forEach((childNode) => {
if ((childNode as HTMLElement).style.display === "block" && (childNode as HTMLElement).classList.contains("banner")) {
activeBannerCount += 1
}
})
const remSpacing = 8.125 + (60/16)*(activeBannerCount)
heroSection.style.marginTop="-"+String(remSpacing)+"rem";
heroSection.style.paddingTop=String(remSpacing)+"rem"
if (timeout > 0) {
window.setTimeout(() => {
el.style.display = "none";
main.classList.remove("banner-padding");
heroSection.style.marginTop="";
heroSection.style.paddingTop=""
}, timeout * 1000);
}
}
@ -97,10 +113,24 @@ function handleEvents(): void {
listen(el, click, () => {
el.style.display = "none";
const main = document.querySelector<HTMLElement>("main.primary");
if (main) {
main.classList.remove("banner-padding");
}
const heroSection = document.querySelector<HTMLElement>("main.landing section#banner");
const banners = document.querySelector<HTMLElement>(".banner-container");
if (banners && heroSection) {
let activeBannerCount = 0;
banners.childNodes.forEach((childNode) => {
if ((childNode as HTMLElement).style.display === "block" && (childNode as HTMLElement).classList.contains("banner")) {
activeBannerCount += 1
}
})
const remSpacing = 8.125 + (60/16)*(activeBannerCount)
heroSection.style.marginTop="-"+String(remSpacing)+"rem";
heroSection.style.paddingTop=String(remSpacing)+"rem"
}
remainingEventImpressions[title].impressions = 0;
saveRemainingEventImpressions();
});