paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 13:03:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

plans: Add comparison-switcher logic and styles.

Browse Source
This commit is contained in:
Karl Stolley
2024-02-05 15:12:04 -05:00
committed by Tim Abbott
parent 0e3699c3dc
commit 5aa3615f4b
3 changed files with 158 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/corporate/comparison_table_integrated.html
View File

@@ -14,19 +14,19 @@
</div>
<div class="comparison-tabs">
<button class="comparison-tab" data-label="tab-cloud" type="button">
<button class="comparison-tab comparison-tab-cloud" data-label="tab-cloud" type="button">
<span class="grouped-icons">
<i class="icon icon-plan icon-cloud"></i>
</span>
Cloud
</button>
<button class="comparison-tab" data-label="tab-hosted" type="button">
<button class="comparison-tab comparison-tab-self-hosted" data-label="tab-hosted" type="button">
<span class="grouped-icons">
<i class="icon icon-plan icon-self-hosted"></i>
</span>
Self-hosted
</button>
<button class="comparison-tab" data-label="tab-all" type="button">
<button class="comparison-tab comparison-tab-all" data-label="tab-all" type="button">
<span class="grouped-icons">
<i class="icon icon-plan icon-cloud"></i>
<i class="icon icon-plan icon-self-hosted"></i>
@@ -39,7 +39,7 @@
<table class="comparison-table">
<colgroup>
<col />
<col span="7" />
<col class="features-col-group" span="7" />
</colgroup>
<thead>
<tr>

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

@@ -147,6 +147,19 @@ $(() => {
const $pricing_wrapper = $(".portico-pricing");
$pricing_wrapper.removeClass("showing-cloud showing-self-hosted");
$pricing_wrapper.addClass(`showing-${tab_to_show.slice(1)}`);
const $comparison_table = $(".zulip-plans-comparison");
// Not all pages that show plans include the comparison
// table, but when it's present, make sure to align the
// comparison table with the current active plans tab
if ($comparison_table.length > 0) {
const plans_columns_count = tab_to_show.slice(1) === "self-hosted" ? 4 : 3;
// Set the correct values for span and colspan
$(".features-col-group").attr("span", plans_columns_count);
$(".subheader-filler").attr("colspan", plans_columns_count);
}
}
});
@@ -162,5 +175,41 @@ $(document).on("click", ".pricing-tab", function () {
const $pricing_wrapper = $(".portico-pricing");
$pricing_wrapper.removeClass("showing-cloud showing-self-hosted");
$pricing_wrapper.addClass(`showing-${id}`);
const $comparison_table = $(".zulip-plans-comparison");
const comparison_table_id = $comparison_table.attr(id);
// Not all pages that show plans include the comparison
// table, but when it's present, make sure to set the
// comparison table features to match the current active tab
// However, once a user has begun to interact with the
// comparison table, giving the `id` attribute a value, we
// no longer apply this logic
if ($comparison_table.length > 0 && !comparison_table_id) {
const plans_columns_count = id === "self-hosted" ? 4 : 3;
// Set the correct values for span and colspan
$(".features-col-group").attr("span", plans_columns_count);
$(".subheader-filler").attr("colspan", plans_columns_count);
}
history.pushState(null, null, `#${id}`);
});
$(document).on("click", ".comparison-tab", function () {
const plans_columns_counts = {
"tab-cloud": 3,
"tab-hosted": 4,
"tab-all": 7,
};
const tab_label = $(this)[0].dataset.label;
const plans_columns_count = plans_columns_counts[tab_label];
const visible_plans_id = `showing-${tab_label}`;
$(".zulip-plans-comparison").attr("id", visible_plans_id);
// Set the correct values for span and colspan
$(".features-col-group").attr("span", plans_columns_count);
$(".subheader-filler").attr("colspan", plans_columns_count);
});

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

@@ -122,7 +122,7 @@
color: hsl(223deg 40% 30%);
font-weight: 600;
border: none;
background-color: hsl(0deg 0% 100%);
background-color: hsl(0deg 0% 100% / 0%);
display: flex;
flex-direction: column;
justify-content: center;
@@ -202,6 +202,10 @@
transition: all 200ms ease-out;
}
.comparison-table th .icon {
display: none;
}
.subheader-filler {
background: hsl(209deg 41% 94%);
}
@@ -421,19 +425,117 @@
/* Change comparison-table visibility on /plans
based on active plan tab. */
.showing-cloud {
#showing-tab-cloud,
#showing-tab-hosted,
#showing-tab-all {
.comparison-tab-cloud,
.comparison-tab-self-hosted,
.comparison-tab-all {
background-color: hsl(0deg 0% 100% / 0%);
cursor: pointer;
&:hover {
background-color: hsl(0deg 0% 100% / 40%);
}
}
}
.showing-cloud,
#showing-tab-cloud {
.comparison-tab-cloud {
background-color: hsl(0deg 0% 100%);
cursor: default;
&:hover {
background-color: hsl(0deg 0% 100%);
}
}
#self-hosted-plan-comparison,
#all-plan-comparison,
.subheader-open-source,
.subheader-self-hosted-legend,
.self-hosted-feature-only,
.self-hosted-cell {
display: none;
}
#cloud-plan-comparison,
.cloud-cell {
display: revert;
}
/* When only Cloud plans appear in the comparison table,
we need to set the border-radius here that is otherwise
displayed on the table itself.
TODO: Unset this property when the header row is stuck,
so that the little flutter of feature-table lines cannot
be seen by eagle-eyed users. */
th.last-cloud-th {
border-top-right-radius: var(--border-radius-table);
}
}
.showing-self-hosted {
.showing-self-hosted,
#showing-tab-hosted {
.comparison-tab-self-hosted {
background-color: hsl(0deg 0% 100%);
cursor: default;
&:hover {
background-color: hsl(0deg 0% 100%);
}
}
#cloud-plan-comparison,
#all-plan-comparison,
.cloud-cell {
display: none;
}
#self-hosted-plan-comparison,
.subheader-open-source,
.subheader-self-hosted-legend,
.self-hosted-feature-only,
.self-hosted-cell {
display: revert;
}
th.last-cloud-th {
border-top-right-radius: unset;
}
}
#showing-tab-all {
.comparison-tab-all {
background-color: hsl(0deg 0% 100%);
cursor: default;
&:hover {
background-color: hsl(0deg 0% 100%);
}
}
#cloud-plan-comparison,
#self-hosted-plan-comparison {
display: none;
}
.subheader-open-source,
.subheader-self-hosted-legend,
#all-plan-comparison,
.cloud-cell,
.self-hosted-cell,
.self-hosted-feature-only {
display: revert;
}
th.last-cloud-th {
border-top-right-radius: unset;
}
.comparison-table th .icon {
display: revert;
}
}