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

portico: Add comparison checkboxes to /for/education. 

On narrow width screens, user can now scroll the table,
instead of table collapsing all the text together making
it look weird.
This commit is contained in:
Alya Abbott 2021-08-04 23:54:23 -07:00 committed by Tim Abbott
parent f2d58f1d5d
commit 78184c5bc5
4 changed files with 237 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/styles/portico/landing_page.css
View File

@ -927,7 +927,8 @@ nav {
}
/* -- compare css -- */
.compare {
.compare,
.compare-education {
background: linear-gradient(
198deg,
hsl(170deg 34% 47%),
@ -935,6 +936,10 @@ nav {
);
color: hsl(0, 0%, 100%);
.table-container {
overflow-x: auto;
}
.gradients .gradient.white-fade {
background: none;
}
@ -944,21 +949,20 @@ nav {
}
.padded-content {
width: 900px;
max-width: 900px;
margin: 0 auto;
position: relative; /* To place the content on top of gradients. */
z-index: 2;
}
table {
min-width: 550px;
padding: 33px;
border: 20px solid transparent;
width: 100%;
text-align: left;
border-collapse: collapse;
font-weight: 400;
color: hsla(0, 0%, 100%, 0.8);
thead th {
@ -1004,7 +1008,8 @@ nav {
&:nth-of-type(3),
&:nth-of-type(4),
&:nth-of-type(5) {
&:nth-of-type(5),
&:nth-of-type(6) {
width: 18%;
background-color: hsl(162, 67%, 25%);
}
@ -1031,7 +1036,8 @@ nav {
&:nth-of-type(3),
&:nth-of-type(4),
&:nth-of-type(5) {
&:nth-of-type(5),
&:nth-of-type(6) {
background-color: hsl(162, 44%, 38%);
}
@ -1091,6 +1097,27 @@ nav {
}
}
.compare-education {
color: hsl(0, 0%, 0%);
background: none;
table {
min-width: 650px;
.number {
font-weight: 800;
&.one {
color: hsl(0, 0%, 100%, 0.4);
}
}
td:first-of-type {
padding: 10px 10px 10px 0;
}
}
}
/* -- faq css -- */
.faqs {
position: relative;

131
templates/zerver/compare-education.html Normal file
View File

@ -0,0 +1,131 @@
<div class="compare-education">
<div class="padded-content">
<div class="text-header">
<div class="text-content">
<h1 class="center"><span>Zulip: The most complete communication hub for your class.</span></h1>
</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Feature</th>
<th >Zulip</th>
<th class="normal">Slack</th>
<th class="normal">Discord</th>
<th class="normal">Piazza</th>
<th class="normal">CampusWire</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rich, modern chat</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Apps for every platform</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Self-hosting option for full control over data</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Dedicated account</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Topic-based threading</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Resolve topics/questions</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Move topics/questions</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Native LaTeX support</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Built-in spoilers</td>
<td class="yes"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Emoji reactions</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>@-mention groups</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Scales to 10,000s of users</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td># supported languages</td>
<td class="number">17</td>
<td class="number">13</td>
<td class="number">30</td>
<td class="number one">1</td>
<td class="number one">1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

141
templates/zerver/compare.html
View File

@ -6,76 +6,77 @@
<h1 class="center"><span>Zulip: The most complete team chat solution.</span></h1>
</div>
</div>
<table>
<thead>
<tr>
<th>Feature</th>
<th class="uniform">Zulip</th>
<th class="normal uniform">Slack</th>
<th class="normal uniform">Mattermost</th>
<th class="normal uniform">Discord</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apps for every platform</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Hundreds of integrations</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
</tr>
<tr>
<td>Self hosting available</td>
<td class="yes"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="no"></td>
</tr>
<tr>
<td>Emoji reactions</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Markdown formatting</td>
<td class="yes"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Topic-based threading</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Lightning-fast search</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Free and open source</td>
<td class="yes"></td>
<td class="no"></td>
<td>Open core *</td>
<td class="no"></td>
</tr>
</tbody>
</table>
<div class="table-container">
<table>
<thead>
<tr>
<th>Feature</th>
<th class="uniform">Zulip</th>
<th class="normal uniform">Slack</th>
<th class="normal uniform">Mattermost</th>
<th class="normal uniform">Discord</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apps for every platform</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Hundreds of integrations</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="no"></td>
</tr>
<tr>
<td>Self hosting available</td>
<td class="yes"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="no"></td>
</tr>
<tr>
<td>Emoji reactions</td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Markdown formatting</td>
<td class="yes"></td>
<td class="no"></td>
<td class="yes"></td>
<td class="yes"></td>
</tr>
<tr>
<td>Topic-based threading</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Lightning-fast search</td>
<td class="yes"></td>
<td class="no"></td>
<td class="no"></td>
<td class="no"></td>
</tr>
<tr>
<td>Free and open source</td>
<td class="yes"></td>
<td class="no"></td>
<td>Open core *</td>
<td class="no"></td>
</tr>
</tbody>
</table>
</div>
<p class="terms">
<span class="term">
* Mattermost Team is open source, but many features

3
templates/zerver/for-education.html
View File

@ -184,7 +184,7 @@
<ul>
<li>
<div class="list-content">
Zulip Cloud is built with <a href="/privacy/">privacy</a> and <a href="/security/">security</a> in mind.
Zulip Cloud is built with <a href="/privacy/">privacy</a> and <a href="/security/">security</a> in mind. We will never sell data or ads.
</div>
</li>
<li><div class="list-content">Zulip is <a href="https://github.com/zulip">100% open source</a>. We work hard to make it <a href="https://zulip.readthedocs.io/en/latest/production/install.html">easy to set up</a> and run a self-hosted Zulip installation, where you have full control of the data.</div></li>
@ -344,6 +344,7 @@
</p>
</div>
{% include "zerver/compare-education.html" %}
</div>