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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/corporate/development-community.html
View File

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

2
templates/corporate/for/communities.html
View File

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

2
templates/corporate/for/open-source.html
View File

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

2
templates/corporate/for/research.html
View File

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

2
templates/zerver/documentation_main.html
View File

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

204
templates/zerver/footer.html
View File

@ -1,112 +1,49 @@
<footer id="footer">
{% if corporate_enabled %} {% if corporate_enabled %}
<div class="footer"> <div class='footer__container'>
<div class="footer-section"> <div class="footer__section">
<h3>{{ _("Product") }}</h3> <h3 class="footer__section-title">
{{ _("Product") }}
</h3>
<ul> <ul>
<li><a href="/">{{ _("Home") }}</a></li>
<li><a href="/why-zulip/">{{ _("Why Zulip") }}</a></li> <li><a href="/why-zulip/">{{ _("Why Zulip") }}</a></li>
<li><a href="/features/">{{ _("Features") }}</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="/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="/security/">{{ _("Security") }}</a></li>
<li><a href="/integrations/">{{ _("Integrations") }}</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> </ul>
</div> </div>
<div class="footer-section"> <div class="footer__section">
<h3>{{ _("Solutions") }}</h3> <h3 class="footer__section-title">
{{ _("Solutions") }}
</h3>
<ul> <ul>
<li> <li><a href="/for/business/">{{ _("Business") }}</a></li>
<a href="/for/business/">{{ _("Business") }}</a> <li><a href="/for/education/">{{ _("Education") }}</a></li>
</li> <li><a href="/for/research/">{{ _("Research") }}</a></li>
<li> <li><a href="/for/events/">{{ _("Events & conferences") }}</a></li>
<a href="/for/education/">{{ _("Education") }}</a> <li><a href="/for/open-source/">{{ _("Open source projects") }}</a></li>
</li> <li class="extra_margin"><a href="/for/communities/">{{ _("Communities") }}</a></li>
<li> <li><a href="/use-cases/">{{ _("Customer stories") }}</a></li>
<a href="/for/research/">{{ _("Research") }}</a> <li><a href="/communities/">{{ _("Open communities") }}</a></li>
</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>
</ul> </ul>
</div> </div>
<div class="footer-section"> <div class="footer__section">
<h3>{{ _("Customer stories") }}</h3> <h3 class="footer__section-title">
<ul> {{ _("Resources") }}
<li> </h3>
<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>
<ul> <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> <li>
<a href="/help/getting-your-organization-started-with-zulip"> <a href="/help/getting-your-organization-started-with-zulip">
{{ _("Setting up your organization") }} {{ _("Organization set up") }}
</a> </a>
</li> </li>
<li> <li>
@ -119,17 +56,13 @@
{{ _("Upgrading a Zulip server") }} {{ _("Upgrading a Zulip server") }}
</a> </a>
</li> </li>
<li>
<a href="https://zulip.readthedocs.io/en/latest/production/upgrade-or-modify.html#modifying-zulip">
{{ _("Modifying Zulip") }}
</a>
</li>
</ul> </ul>
</div> </div>
<div class="footer-section"> <div class="footer__section">
<h3>{{ _("For contributors") }}</h3> <h3 class="footer__section-title">
{{ _("Contributing") }}
</h3>
<ul> <ul>
<li><a href="https://github.com/zulip/zulip/">{{ _("GitHub") }}</a></li>
<li> <li>
<a href="https://zulip.readthedocs.io/en/latest/contributing/contributing.html"> <a href="https://zulip.readthedocs.io/en/latest/contributing/contributing.html">
{{ _("Contributing guide") }} {{ _("Contributing guide") }}
@ -141,46 +74,45 @@
{{ _("Translation") }} {{ _("Translation") }}
</a> </a>
</li> </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> </ul>
</div> </div>
<div class="footer-section"> <div class="footer__section">
<h3>{{ _("About us") }}</h3> <h3 class="footer__section-title">
{{ _("About us") }}
</h3>
<ul> <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="/values/">{{ _("Values") }}</a></li>
<li><a href="https://twitter.com/zulip/">Twitter</a></li>
<li><a href="/jobs/">{{ _("Jobs") }}</a></li> <li><a href="/jobs/">{{ _("Jobs") }}</a></li>
<li><a href="/attribution">{{ _("Website attributions") }}</a></li> <li><a href="https://blog.zulip.com/" target="_blank">{{ _("Blog") }}</a></li>
<li><a href="https://github.com/sponsors/zulip">{{ _("Sponsor Zulip") }}</a></li> <li><a href="https://twitter.com/zulip/">Twitter</a></li>
</ul> <li><a href="https://zulip.com/help/support-zulip-project">{{ _("Support Zulip") }}</a></li>
</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>
</ul> </ul>
</div> </div>
</div> </div>
{% endif %} {% 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>

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

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

182
web/styles/portico/footer.css Normal file
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;
}
}
}

16
web/styles/portico/landing_page.css
View File

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

113
web/styles/portico/portico.css
View File

@ -364,10 +364,6 @@ input.text-error {
flex: 1 0 auto; flex: 1 0 auto;
} }
.footer {
flex-shrink: 0;
}
.if-zulip-electron { .if-zulip-electron {
display: none; display: none;
} }
@ -378,91 +374,6 @@ input.text-error {
display: block; 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 { .header-main {
.logo { .logo {
display: block; 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) { @media (width <= 767px) {
body { body {
padding: 0 !important; padding: 0 !important;
@ -1270,16 +1167,6 @@ input.new-organization-button {
max-width: 100vw; max-width: 100vw;
padding: 0 10px; padding: 0 10px;
} }
.footer {
grid-template-columns: repeat(1, max-content);
.footer-section {
width: calc(100% - 40px);
max-width: none;
text-align: center;
}
}
} }
.emoji { .emoji {

1
web/styles/portico/portico_styles.css
View File

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

2
zerver/tests/test_docs.py
View File

@ -188,7 +188,7 @@ class DocPageTest(ZulipTestCase):
# Test the i18n version of one of these pages. # Test the i18n version of one of these pages.
self._test("/en/history/", "Zulip released as open source!") self._test("/en/history/", "Zulip released as open source!")
self._test("/values/", "designed our company") 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("/communities/", "Open communities directory")
self._test("/development-community/", "Zulip development community") self._test("/development-community/", "Zulip development community")
self._test("/features/", "Beautiful messaging") self._test("/features/", "Beautiful messaging")