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 css -- */
.compare { .compare,
.compare-education {
background: linear-gradient( background: linear-gradient(
198deg, 198deg,
hsl(170deg 34% 47%), hsl(170deg 34% 47%),
@ -935,6 +936,10 @@ nav {
); );
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
.table-container {
overflow-x: auto;
}
.gradients .gradient.white-fade { .gradients .gradient.white-fade {
background: none; background: none;
} }
@ -944,21 +949,20 @@ nav {
} }
.padded-content { .padded-content {
width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
position: relative; /* To place the content on top of gradients. */ position: relative; /* To place the content on top of gradients. */
z-index: 2; z-index: 2;
} }
table { table {
min-width: 550px;
padding: 33px; padding: 33px;
border: 20px solid transparent; border: 20px solid transparent;
width: 100%; width: 100%;
text-align: left; text-align: left;
border-collapse: collapse; border-collapse: collapse;
font-weight: 400; font-weight: 400;
color: hsla(0, 0%, 100%, 0.8); color: hsla(0, 0%, 100%, 0.8);
thead th { thead th {
@ -1004,7 +1008,8 @@ nav {
&:nth-of-type(3), &:nth-of-type(3),
&:nth-of-type(4), &:nth-of-type(4),
&:nth-of-type(5) { &:nth-of-type(5),
&:nth-of-type(6) {
width: 18%; width: 18%;
background-color: hsl(162, 67%, 25%); background-color: hsl(162, 67%, 25%);
} }
@ -1031,7 +1036,8 @@ nav {
&:nth-of-type(3), &:nth-of-type(3),
&:nth-of-type(4), &:nth-of-type(4),
&:nth-of-type(5) { &:nth-of-type(5),
&:nth-of-type(6) {
background-color: hsl(162, 44%, 38%); 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 -- */ /* -- faq css -- */
.faqs { .faqs {
position: relative; 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> <h1 class="center"><span>Zulip: The most complete team chat solution.</span></h1>
</div> </div>
</div> </div>
<div class="table-container">
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Feature</th> <th>Feature</th>
<th class="uniform">Zulip</th> <th class="uniform">Zulip</th>
<th class="normal uniform">Slack</th> <th class="normal uniform">Slack</th>
<th class="normal uniform">Mattermost</th> <th class="normal uniform">Mattermost</th>
<th class="normal uniform">Discord</th> <th class="normal uniform">Discord</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Apps for every platform</td> <td>Apps for every platform</td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
</tr> </tr>
<tr> <tr>
<td>Hundreds of integrations</td> <td>Hundreds of integrations</td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="no"></td> <td class="no"></td>
</tr> </tr>
<tr> <tr>
<td>Self hosting available</td> <td>Self hosting available</td>
<td class="yes"></td> <td class="yes"></td>
<td class="no"></td> <td class="no"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="no"></td> <td class="no"></td>
</tr> </tr>
<tr> <tr>
<td>Emoji reactions</td> <td>Emoji reactions</td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
</tr> </tr>
<tr> <tr>
<td>Markdown formatting</td> <td>Markdown formatting</td>
<td class="yes"></td> <td class="yes"></td>
<td class="no"></td> <td class="no"></td>
<td class="yes"></td> <td class="yes"></td>
<td class="yes"></td> <td class="yes"></td>
</tr> </tr>
<tr> <tr>
<td>Topic-based threading</td> <td>Topic-based threading</td>
<td class="yes"></td> <td class="yes"></td>
<td class="no"></td> <td class="no"></td>
<td class="no"></td> <td class="no"></td>
<td class="no"></td> <td class="no"></td>
</tr> </tr>
<tr> <tr>
<td>Lightning-fast search</td> <td>Lightning-fast search</td>
<td class="yes"></td> <td class="yes"></td>
<td class="no"></td> <td class="no"></td>
<td class="no"></td> <td class="no"></td>
<td class="no"></td> <td class="no"></td>
</tr> </tr>
<tr> <tr>
<td>Free and open source</td> <td>Free and open source</td>
<td class="yes"></td> <td class="yes"></td>
<td class="no"></td> <td class="no"></td>
<td>Open core *</td> <td>Open core *</td>
<td class="no"></td> <td class="no"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<p class="terms"> <p class="terms">
<span class="term"> <span class="term">
* Mattermost Team is open source, but many features * Mattermost Team is open source, but many features

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

@ -184,7 +184,7 @@
<ul> <ul>
<li> <li>
<div class="list-content"> <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> </div>
</li> </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> <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> </p>
</div> </div>
{% include "zerver/compare-education.html" %}
</div> </div>