Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

plans: Use IntersectionObserver to handle subheaders.

This commit is contained in:
Karl Stolley 2024-02-06 15:50:06 -05:00 committed by Tim Abbott
parent 7ea313c658
commit 0290642f1d
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/portico/landing-page.js
View File

@ -164,6 +164,17 @@ $(() => {
// Set the correct values for span and colspan
$(".features-col-group").attr("span", plans_columns_count);
$(".subheader-filler").attr("colspan", plans_columns_count);
const observer = new IntersectionObserver(
([entries]) => {
entries.target.classList.toggle("stuck", entries.intersectionRatio < 1);
},
{thresholds: [0.8], rootMargin: "-120px 0px 0px 0px"},
);
for (const subheader of document.querySelectorAll("td.subheader")) {
observer.observe(subheader);
}
}
}
});

46
web/styles/portico/comparison_table.css
View File

@ -543,4 +543,50 @@
.comparison-table th .icon {
display: revert;
}
.comparison-table th {
vertical-align: top;
}
.comparison-table th.comparison-table-feature {
padding-top: 28px;
}
.comparison-table td.stuck {
padding-top: 28px;
}
@media (width <= 730px) {
.comparison-table th {
padding: 8px 2px;
}
.comparison-table th.comparison-table-feature {
padding-top: 24px;
padding-left: 14px;
}
.comparison-table td.subheader.comparison-table-feature {
/* Line up features with plan titles. */
line-height: 18px;
}
.comparison-table td.stuck {
padding-top: 24px;
vertical-align: top;
}
}
@media (width <= 684px) {
.comparison-table td.stuck {
height: 60px;
}
}
@media (width <= 500px) {
.comparison-table td.subheader.comparison-table-feature {
/* Line up features with plan titles. */
line-height: 14px;
}
}
}