footer: Integrate newly designed footer.

This footer was designed and mostly written by @terpimost.

This adds a new design of the footer for both corporate and not
corporate enabled pages.
This commit is contained in:
Aman Agrawal 2023-03-08 18:14:05 +00:00 committed by Tim Abbott
parent e8cefe181a
commit dbe930394f
12 changed files with 306 additions and 320 deletions

View File

@ -46,7 +46,7 @@
</div>
<div class="feature-end">
<div class="bottom-register-buttons">
<div class="bottom-register-buttons extra_margin_before_footer">
<h1>
Join today!
</h1>

View File

@ -48,7 +48,7 @@
</div>
</div>
</div>
<div class="bottom-register-buttons">
<div class="bottom-register-buttons extra_margin_before_footer">
<h1>
Most communities get an 85%+ discount on <a href="/plans">Zulip Cloud Standard</a>!
</h1>

View File

@ -708,7 +708,7 @@
</div>
<div class="bottom-register-buttons">
<div class="bottom-register-buttons extra_margin_before_footer">
<h1>
<a href="/plans">Zulip Cloud Standard</a> is free for open-source projects!
</h1>

View File

@ -392,7 +392,7 @@
</div>
<div class="feature-end">
<div class="bottom-register-buttons">
<div class="bottom-register-buttons extra_margin_before_footer">
<h1>
<a href="/plans">Zulip Cloud Standard</a> is free for
academic research!

View File

@ -43,7 +43,7 @@
{{ render_markdown_path(article, context=api_uri_context, pure_markdown=True) }}
{% endif %}
<div id="footer" class="documentation-footer">
<div class="documentation-footer">
<hr />
{% if corporate_enabled %}
{% if page_is_policy_center %}

View File

@ -1,112 +1,49 @@
<footer id="footer">
{% if corporate_enabled %}
<div class="footer">
<div class="footer-section">
<h3>{{ _("Product") }}</h3>
<div class='footer__container'>
<div class="footer__section">
<h3 class="footer__section-title">
{{ _("Product") }}
</h3>
<ul>
<li><a href="/">{{ _("Home") }}</a></li>
<li><a href="/why-zulip/">{{ _("Why Zulip") }}</a></li>
<li><a href="/features/">{{ _("Features") }}</a></li>
<li><a href="/plans/">{{ _("Plans &amp; pricing") }}</a></li>
<li><a href="/plans/">{{ _("Plans & pricing") }}</a></li>
<li><a href="/self-hosting/">{{ _("Self-hosting") }}</a></li>
<li><a href="/apps/">{{ _("Desktop &amp; mobile apps") }}</a></li>
<li><a href="/security/">{{ _("Security") }}</a></li>
<li><a href="/integrations/">{{ _("Integrations") }}</a></li>
<li class="extra_margin"><a href="/apps/">{{ _("Desktop & mobile apps") }}</a></li>
<li><a href="/new/">{{ _("New organization") }}</a></li>
<li><a href="/accounts/go/">{{ _("Log in") }}</a></li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("Solutions") }}</h3>
<div class="footer__section">
<h3 class="footer__section-title">
{{ _("Solutions") }}
</h3>
<ul>
<li>
<a href="/for/business/">{{ _("Business") }}</a>
</li>
<li>
<a href="/for/education/">{{ _("Education") }}</a>
</li>
<li>
<a href="/for/research/">{{ _("Research") }}</a>
</li>
<li>
<a href="/for/events/">{{ _("Events and conferences") }}</a>
</li>
<li>
<a href="/for/open-source/">{{ _("Open source projects") }}</a>
</li>
<li>
<a href="/for/communities/">{{ _("Communities") }}</a>
</li>
<li><a href="/for/business/">{{ _("Business") }}</a></li>
<li><a href="/for/education/">{{ _("Education") }}</a></li>
<li><a href="/for/research/">{{ _("Research") }}</a></li>
<li><a href="/for/events/">{{ _("Events & conferences") }}</a></li>
<li><a href="/for/open-source/">{{ _("Open source projects") }}</a></li>
<li class="extra_margin"><a href="/for/communities/">{{ _("Communities") }}</a></li>
<li><a href="/use-cases/">{{ _("Customer stories") }}</a></li>
<li><a href="/communities/">{{ _("Open communities") }}</a></li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("Customer stories") }}</h3>
<ul>
<li>
<a href="/case-studies/idrift/">iDrift AS {{ _("Company") }}</a>
</li>
<li>
<a href="/case-studies/tum/">{{ _("Technical University of Munich") }}</a>
</li>
<li>
<a href="/case-studies/ucsd/">{{ _("University of California San Diego") }}</a>
</li>
<li>
<a href="/case-studies/lean/">{{ _("Lean theorem prover community") }}</a>
</li>
<li>
<a href="/case-studies/asciidoctor/">{{ _("Asciidoctor open-source community") }}</a>
</li>
<li>
<a href="/case-studies/rust/">{{ _("Rust language community") }}</a>
</li>
<li>
<a href="/case-studies/recurse-center/">Recurse Center</a>
</li>
<li>
<a href="/communities/">{{ _("Open communities directory") }}</a>
</li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("Accounts") }}</h3>
<ul>
{% if find_team_link_disabled %}
{% else %}
<li><a href="{{ root_domain_uri }}/accounts/find">{{ _("Find accounts") }}</a></li>
{% endif %}
{% if open_realm_creation %}
<li><a href="{{ root_domain_uri }}/new/">{{ _("New organization") }}</a></li>
{% endif %}
<li><a href="{{ root_domain_uri }}/terms/">{{ _("Terms of Service") }}</a></li>
<li><a href="{{ root_domain_uri }}/privacy/">{{ _("Privacy policy") }}</a></li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("For users") }}</h3>
<ul>
<li>
<a href="/help/getting-started-with-zulip">{{ _("Getting started") }}</a>
</li>
<li>
<a href="/help">{{ _("Help center") }}</a>
</li>
<li>
<a href="/development-community/" target="_blank">
{{ _("Community chat") }}
</a>
</li>
<li>
<a href="/help/contact-support">{{ _("Contact support") }}</a>
</li>
<li>
<a href="https://blog.zulip.com/">{{ _("Blog") }}</a>
</li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("For administrators") }}</h3>
<div class="footer__section">
<h3 class="footer__section-title">
{{ _("Resources") }}
</h3>
<ul>
<li><a href="/help/getting-started-with-zulip">{{ _("Getting started") }}</a></li>
<li><a href="/help">{{ _("Help center") }}</a></li>
<li><a href="/development-community/" target="_blank">{{ _("Community chat") }}</a></li>
<li class="extra_margin"><a href="/help/contact-support">{{ _("Contact support") }}</a></li>
<li>
<a href="/help/getting-your-organization-started-with-zulip">
{{ _("Setting up your organization") }}
{{ _("Organization set up") }}
</a>
</li>
<li>
@ -119,17 +56,13 @@
{{ _("Upgrading a Zulip server") }}
</a>
</li>
<li>
<a href="https://zulip.readthedocs.io/en/latest/production/upgrade-or-modify.html#modifying-zulip">
{{ _("Modifying Zulip") }}
</a>
</li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("For contributors") }}</h3>
<div class="footer__section">
<h3 class="footer__section-title">
{{ _("Contributing") }}
</h3>
<ul>
<li><a href="https://github.com/zulip/zulip/">{{ _("GitHub") }}</a></li>
<li>
<a href="https://zulip.readthedocs.io/en/latest/contributing/contributing.html">
{{ _("Contributing guide") }}
@ -141,46 +74,45 @@
{{ _("Translation") }}
</a>
</li>
<li><a href="/api/">REST API</a></li>
<li><a href="/api/">API</a></li>
<li><a href="https://github.com/zulip/zulip/">{{ _("GitHub") }}</a></li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("About us") }}</h3>
<div class="footer__section">
<h3 class="footer__section-title">
{{ _("About us") }}
</h3>
<ul>
<li><a href="/team/">{{ _("Team") }}</a> &amp; <a href="/history/">{{ _("History") }}</a></li>
<li>
<a href="/team/">{{ _("Team") }}</a>
&
<a href="/history/">{{ _("History") }}</a>
</li>
<li><a href="/values/">{{ _("Values") }}</a></li>
<li><a href="https://twitter.com/zulip/">Twitter</a></li>
<li><a href="/jobs/">{{ _("Jobs") }}</a></li>
<li><a href="/attribution">{{ _("Website attributions") }}</a></li>
<li><a href="https://github.com/sponsors/zulip">{{ _("Sponsor Zulip") }}</a></li>
</ul>
</div>
</div>
{% else %}
<div class="footer self-hosted-footer">
<div class="footer-section">
<ul>
<li>
<a href="/help">{{ _("Help center") }}</a>
</li>
</ul>
</div>
<div class="footer-section">
<ul>
<li>
<a href="/policies">{{ _("Policies") }}</a>
</li>
</ul>
</div>
<div class="break"></div>
<div class="footer-section powered-by-zulip">
<ul>
<li>
{% trans %}
Powered by <a href="https://zulip.com" class="coloured-text">Zulip</a>
{% endtrans %}
</li>
<li><a href="https://blog.zulip.com/" target="_blank">{{ _("Blog") }}</a></li>
<li><a href="https://twitter.com/zulip/">Twitter</a></li>
<li><a href="https://zulip.com/help/support-zulip-project">{{ _("Support Zulip") }}</a></li>
</ul>
</div>
</div>
{% endif %}
<div class="footer__legal {% if not corporate_enabled %}footer__legal_not_corporate{% endif %}">
<div class="footer__legal-container">
{% if corporate_enabled %}
<div class="copyright">© Kandra Labs, Inc. (“Zulip”)</div>
{% else %}
<div class="copyright">{% trans %}Powered by <a href="https://zulip.com">Zulip</a>{% endtrans %}</div>
{% endif %}
<div class="footer__legal-spacer"></div>
{% if not corporate_enabled %}
<a href="/help">{{ _("Help center") }}</a>
{% endif %}
<a href="{{ root_domain_uri }}/terms/">{{ _("Terms of Service") }}</a>
<a href="{{ root_domain_uri }}/privacy/">{{ _("Privacy policy") }}</a>
{% if corporate_enabled %}
<a href="https://zulip.com/attribution/">{{ _("Website attributions") }}</a>
{% endif %}
</div>
</div>
</footer>

View File

@ -13,10 +13,6 @@ export function path_parts() {
return window.location.pathname.split("/").filter((chunk) => chunk !== "");
}
const hello_events = function () {
$(".footer").addClass("hello");
};
const apps_events = function () {
const info = {
windows: {
@ -158,10 +154,6 @@ const events = function () {
if (path_parts().includes("apps")) {
apps_events();
}
if (path_parts().includes("hello")) {
hello_events();
}
};
$(() => {

View File

@ -0,0 +1,182 @@
:root {
--color-footer-background: hsl(238, 28%, 27%);
--color-links: hsl(238, 100%, 82%);
@media (prefers-color-scheme: dark) {
--color-footer-background: hsl(238, 28%, 21%);
}
}
#footer {
background: var(--color-footer-background);
box-sizing: border-box;
ul {
/* Override bootstrap defaults */
list-style: none;
margin: 0;
}
.footer__container {
max-width: 1132px;
padding: 52px 52px 0;
display: flex;
justify-content: space-between;
gap: 40px;
flex-flow: row wrap;
margin: 0 auto;
}
.footer__section {
flex-shrink: 0;
}
.footer__section-title {
display: block;
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 133%;
letter-spacing: 0.1em;
color: hsl(0, 0%, 100%);
opacity: 0.8;
text-transform: uppercase;
border-bottom: 0;
margin-bottom: 0;
}
.footer__section ul {
margin: 28px 0 0;
display: flex;
flex-direction: column;
align-items: flex-start;
li {
margin-bottom: 10px;
}
}
li {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: var(--color-links);
border-bottom: 1px solid var(--color-footer-background);
transition: border 0.4s ease-out;
}
a,
a:visited {
font-weight: 400;
font-size: 16px;
color: var(--color-links);
}
a:hover,
a:focus {
color: var(--color-links);
border-bottom: 1px solid var(--color-links);
transition: none;
text-decoration: none;
outline: none;
}
.footer__legal {
margin: 24px 0 5px;
padding: 0 52px;
border-top: 1px solid hsl(0, 0%, 100%, 0.1);
a {
margin-bottom: 10px;
border-bottom: 1px solid var(--color-footer-background);
&:hover {
border-bottom: 1px solid var(--color-links);
}
}
&.footer__legal_not_corporate {
margin-top: 0;
}
}
.footer__legal-container {
max-width: 1132px;
padding-top: 15px;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
margin: 0 auto;
box-sizing: border-box;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 18px;
}
.footer__legal-spacer {
flex-grow: 1;
}
.footer__legal-container .copyright {
color: hsl(0, 0%, 100%, 0.5);
margin-bottom: 8px;
}
.footer__legal-container a {
font-size: 14px;
line-height: 18px;
}
.footer__legal-container a:not(:last-child) {
margin-right: 2em;
}
.footer__section .extra_margin {
margin-bottom: 40px;
}
/* #footer responsivity and global fixes */
@media (max-width: 940px) {
.footer__container {
justify-content: flex-start;
row-gap: 0;
}
.footer__legal-container {
justify-content: flex-end;
}
}
@media (max-width: 600px) {
.footer__legal {
padding: 0 10px;
}
.footer__legal-spacer {
width: 100%;
}
.footer__legal-container {
column-gap: 20px;
justify-content: center;
a:not(:last-child) {
margin-right: 0;
}
}
}
@media (max-width: 400px) {
.footer__container {
gap: 0;
flex-direction: column;
}
.footer__section .extra_margin {
margin-bottom: 36px;
}
}
}

View File

@ -1952,14 +1952,6 @@ nav {
filter: invert(0.9);
}
.footer.hello li a {
color: hsl(220, 15%, 76%);
}
.footer.hello li a:hover {
color: hsl(0, 0%, 100%);
}
/* -- apps page -- */
.portico-landing.apps {
padding-top: 0;
@ -3607,10 +3599,6 @@ nav {
padding: 20px;
}
.footer {
width: 100vw;
}
/* the gradients leave the bottom of the text and the button white so we
want to have the gradients stay darker for longer.
*/
@ -3964,6 +3952,10 @@ nav {
.case-study-page,
.solutions-page {
.bottom-register-buttons.extra_margin_before_footer {
margin-bottom: 60px;
}
.hero-text {
position: relative;
width: 80%;

View File

@ -364,10 +364,6 @@ input.text-error {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
.if-zulip-electron {
display: none;
}
@ -378,91 +374,6 @@ input.text-error {
display: block;
}
/* -- new footer -- */
.footer {
margin: 0;
z-index: 100;
width: calc(100%);
text-align: center;
font-size: 16px;
background-color: hsl(33, 34%, 96%);
display: grid;
grid-template-columns: repeat(4, max-content);
justify-content: center;
padding-top: 50px;
padding-bottom: 50px;
a {
color: inherit !important;
}
.footer-section {
margin: 0 20px;
vertical-align: top;
text-align: left;
/* 20-22vw for fitting content in the 4 column grid layout. We
need to set max-width so to avoid content overflow in different
languagues on different widths. */
max-width: 21vw;
@media (width < 1200px) {
ul li {
text-indent: -5px;
padding-left: 5px;
}
}
h3 {
text-transform: uppercase;
font-size: 1em;
font-weight: 600;
line-height: 1.2;
margin-bottom: 5px;
}
ul {
color: hsl(0, 0%, 40%);
list-style-type: none;
margin-left: 0;
font-weight: 400;
}
.coloured-text {
color: hsl(0, 0%, 20%);
font-weight: bold;
}
}
}
.self-hosted-footer {
padding: 20px 0 10px;
display: flex;
flex-wrap: wrap;
.break {
flex-basis: 100%;
height: 0;
}
.powered-by-zulip {
padding: 0;
padding-top: 10px;
opacity: 0.9;
font-size: 15px;
}
.footer-section {
padding-bottom: 5px;
margin: 0 15px;
}
.footer-section ul {
margin: 0;
}
}
/* -- end new footer -- */
.header-main {
.logo {
display: block;
@ -1171,20 +1082,6 @@ input.new-organization-button {
}
}
@media (width <= 815px) {
.footer {
width: 100%;
margin-left: auto;
margin-right: auto;
grid-template-columns: repeat(2, max-content);
.footer-section {
/* 40vw to fit content in 2 grid columns. */
max-width: 40vw;
}
}
}
@media (width <= 767px) {
body {
padding: 0 !important;
@ -1270,16 +1167,6 @@ input.new-organization-button {
max-width: 100vw;
padding: 0 10px;
}
.footer {
grid-template-columns: repeat(1, max-content);
.footer-section {
width: calc(100% - 40px);
max-width: none;
text-align: center;
}
}
}
.emoji {

View File

@ -2,3 +2,4 @@
@import url("portico.css");
@import url("portico_signin.css");
@import url("markdown.css");
@import url("footer.css");

View File

@ -188,7 +188,7 @@ class DocPageTest(ZulipTestCase):
# Test the i18n version of one of these pages.
self._test("/en/history/", "Zulip released as open source!")
self._test("/values/", "designed our company")
self._test("/hello/", "Chat for distributed teams", landing_missing_strings=["Log in"])
self._test("/hello/", "Chat for distributed teams", landing_missing_strings=["xyz"])
self._test("/communities/", "Open communities directory")
self._test("/development-community/", "Zulip development community")
self._test("/features/", "Beautiful messaging")