From 78184c5bc5c7d5ad2d42ebc845fcc5e1062bf1a3 Mon Sep 17 00:00:00 2001 From: Alya Abbott Date: Wed, 4 Aug 2021 23:54:23 -0700 Subject: [PATCH] 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. --- static/styles/portico/landing_page.css | 39 ++++++- templates/zerver/compare-education.html | 131 ++++++++++++++++++++++ templates/zerver/compare.html | 141 ++++++++++++------------ templates/zerver/for-education.html | 3 +- 4 files changed, 237 insertions(+), 77 deletions(-) create mode 100644 templates/zerver/compare-education.html diff --git a/static/styles/portico/landing_page.css b/static/styles/portico/landing_page.css index 737cafaf77..12e132e363 100644 --- a/static/styles/portico/landing_page.css +++ b/static/styles/portico/landing_page.css @@ -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; diff --git a/templates/zerver/compare-education.html b/templates/zerver/compare-education.html new file mode 100644 index 0000000000..04ba9f0a20 --- /dev/null +++ b/templates/zerver/compare-education.html @@ -0,0 +1,131 @@ +
+
+
+
+

Zulip: The most complete communication hub for your class.

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureZulipSlackDiscordPiazzaCampusWire
Rich, modern chat
Apps for every platform
Self-hosting option for full control over data
Dedicated account
Topic-based threading
Resolve topics/questions
Move topics/questions
Native LaTeX support
Built-in spoilers
Emoji reactions
@-mention groups
Scales to 10,000s of users
# supported languages17133011
+
+
+
diff --git a/templates/zerver/compare.html b/templates/zerver/compare.html index 7ff01639d2..272664237e 100644 --- a/templates/zerver/compare.html +++ b/templates/zerver/compare.html @@ -6,76 +6,77 @@

Zulip: The most complete team chat solution.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureZulipSlackMattermostDiscord
Apps for every platform
Hundreds of integrations
Self hosting available
Emoji reactions
Markdown formatting
Topic-based threading
Lightning-fast search
Free and open sourceOpen core *
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureZulipSlackMattermostDiscord
Apps for every platform
Hundreds of integrations
Self hosting available
Emoji reactions
Markdown formatting
Topic-based threading
Lightning-fast search
Free and open sourceOpen core *
+

* Mattermost Team is open source, but many features diff --git a/templates/zerver/for-education.html b/templates/zerver/for-education.html index cebd16bdf9..cb5992f98a 100644 --- a/templates/zerver/for-education.html +++ b/templates/zerver/for-education.html @@ -184,7 +184,7 @@