diff --git a/static/js/portico/help.js b/static/js/portico/help.js new file mode 100644 index 0000000000..d428d21c07 --- /dev/null +++ b/static/js/portico/help.js @@ -0,0 +1,59 @@ +const Ps = require('perfect-scrollbar'); + +(function () { + var html_map = {}; + var loading = { + name: null, + }; + + var fetch_page = function (path, callback) { + $.get(path, function (res) { + var $html = $(res).find(".markdown .content"); + $html.find(".back-to-home").remove(); + + callback($html.html().trim()); + }); + }; + + $(".sidebar a").click(function (e) { + var path = $(this).attr("href"); + + if (loading.name === path) { + return; + } + + history.pushState({}, "", path); + + if (html_map[path]) { + $(".markdown .content").html(html_map[path]); + } else { + loading.name = path; + + fetch_page(path, function (res) { + html_map[path] = res; + $(".markdown .content").html(html_map[path]); + loading.name = null; + }); + } + + $(".sidebar").removeClass("show"); + + e.preventDefault(); + }); + + Ps.initialize($(".sidebar")[0], { + suppressScrollX: true, + useKeyboard: false, + // Picked so that each mousewheel bump moves 1 emoji down. + wheelSpeed: 0.68, + }); + + window.addEventListener("popstate", function () { + var path = window.location.pathname; + $(".markdown .content").html(html_map[path]); + }); + + $(".hamburger").click(function () { + $(".sidebar").toggleClass("show"); + }); +}()); diff --git a/static/styles/portico-signin.css b/static/styles/portico-signin.css index 38db015f6e..ec4753927f 100644 --- a/static/styles/portico-signin.css +++ b/static/styles/portico-signin.css @@ -689,6 +689,8 @@ button.login-google-button { margin-right: 10px; } +/* -- media queries -- */ + @media (max-width: 950px) { .split-view .left-side { width: 400px; diff --git a/static/styles/portico.css b/static/styles/portico.css index 001472877b..7b093fe9cd 100644 --- a/static/styles/portico.css +++ b/static/styles/portico.css @@ -75,6 +75,71 @@ body { -moz-osx-font-smoothing: grayscale; } +.app.help { + position: fixed; + width: 100vw; + height: calc(100vh - 64px); + left: 0px; + + box-shadow: 0px -20px 50px rgba(0, 0, 0, 0.04); + overflow: auto; +} + +.help .sidebar { + width: 300px; + + position: fixed; + z-index: 1; + /* 100vh - navbar - paddingTop - paddingBottom - bottomNav */ + height: calc(100vh - 64px - 10px - 10px); + padding: 10px 20px 10px 20px; + + background-color: #278676; + color: #dae0df; + + overflow: auto; +} + +.help .sidebar h2 { + font-size: 1.2em; + font-weight: 400; + margin-bottom: 0px; + + text-transform: uppercase; + color: #fff; +} + +.help .sidebar h3 { + font-size: 1em; + font-weight: 400; + text-transform: uppercase; + color: #badcd6; + + line-height: 1; + margin: 10px 0 5px 10px; +} + +.help .sidebar ul { + margin-left: 25px; +} + +.help .sidebar li { + list-style-type: circle; + font-size: 0.95; + font-weight: 500; + line-height: 1.7; + + cursor: pointer; +} + +.help .sidebar li a { + color: inherit; +} + +.app.help .hamburger { + display: none; +} + .markdown h1[id]:before, .markdown h2[id]:before, .markdown h3[id]:before, @@ -390,6 +455,22 @@ input.text-error { line-height: 0.8; } + +.header-main .logo .light { + display: inline-block; + vertical-align: top; + margin-top: 8px; + + font-size: 1.2em; + font-weight: 300; + color: #aaa; +} + +.header-main .logo pipe { + position: relative; + top: -1px; +} + .header-main .logo .brand-logo { width: 25px; margin-top: 3px; @@ -940,7 +1021,6 @@ input.new-organization-button { .app-main, .header-main, .footer-main { - max-width: 1200px; min-width: 350px; margin: 0px auto; padding: 0px 20px 0px 20px; @@ -1144,20 +1224,29 @@ input.new-organization-button { } /* -- markdown styling -- */ - .markdown { - max-width: 800px; - margin: 20px auto 0px auto; - padding: 20px; + position: absolute; + right: 0px; + /* 100vw - sidebar width - paddingTop - paddingBottom */ + width: calc(100vw - 340px - 30px - 30px); + padding: 20px 30px 100px 30px; + + min-height: calc(100vh - 64px - 100px - 20px); font-weight: 400; font-size: 1rem; line-height: 1.5; color: hsl(0, 0%, 40%); + background: #fff; + + overflow: auto; -webkit-font-smoothing: antialiased; - outline: 10000px solid hsla(0, 0%, 94%, 0.5); - box-shadow: 0px 0px 30px hsla(0, 0%, 0%, 0.2); +} + +.markdown .content { + max-width: 1000px; + margin-left: 0px; } .markdown a { @@ -1282,6 +1371,11 @@ input.new-organization-button { margin: 5px 0px; } +.markdown .footer { + height: auto; + width: calc(100% - 40px); +} + @media (max-height: 678px) { .portico-page { /* the footer becomes two lines */ @@ -1330,6 +1424,34 @@ input.new-organization-button { } @media (max-width: 1000px) { + .app.help .markdown { + padding-top: 40px; + width: calc(100vw - 40px); + height: calc(100vh - 64px - 10px - 10px - 55px - 40px); + left: 0; + } + + .app.help .hamburger { + display: block; + position: absolute; + top: 20px; + right: 20px; + fill: hsl(0, 0%, 40%); + z-index: 1; + + cursor: pointer; + } + + .app.help .sidebar { + right: 100vw; + transform: translateX(0); + transition: all 0.3s ease; + } + + .app.help .sidebar.show { + transform: translateX(340px); + } + .feature-line .platform-text { display: block; width: 100%; @@ -1368,6 +1490,10 @@ input.new-organization-button { margin-bottom: 10px !important; } + .footer { + height: auto; + } + .postal-envelope { transform: none; -webkit-transform: none; @@ -1406,6 +1532,26 @@ input.new-organization-button { display: block; } + .app.help { + position: absolute; + } + + .app.help .sidebar { + width: calc(100% - 40px); + } + + .app.help .sidebar.show { + transform: translateX(100%); + } + + .app.help .markdown { + position: absolute; + top: 0; + padding-left: 20px; + padding-right: 20px; + width: calc(100vw - 40px); + } + .app-main, .header-main, .footer-main { @@ -1432,10 +1578,6 @@ input.new-organization-button { font-size: 12px; } - .app-main .markdown { - max-width: 85%; - } - .markdown a { white-space: pre-wrap; } diff --git a/templates/zerver/help/index.md b/templates/zerver/help/index.md index d690713b22..db79bdb704 100644 --- a/templates/zerver/help/index.md +++ b/templates/zerver/help/index.md @@ -12,151 +12,3 @@ downloaded [here](https://zulipchat.com/apps/). One Zulip account, associated with a particular company, project, or team, is known as an **organization**. - ---- - -## Account Basics -* [Change your name](/help/change-your-name) -* [Change your email address](/help/change-your-email-address) -* [Change your password](/help/change-your-password) -* [Change your settings](/help/change-your-settings) -* [Change your avatar](/help/change-your-avatar) -* [Change your language](/help/change-your-language) -* [Change the date and time format](/help/change-the-date-and-time-format) -* [Move the users list to the left sidebar](/help/move-the-users-list-to-the-left-sidebar) -* [Join a Zulip organization](/help/join-a-zulip-organization) -* [Signing in](/help/signing-in) -* [Signing out](/help/signing-out) - -* [Deactivate your account](/help/deactivate-your-account) - -## Messages -### Sending -* [Send a stream message](/help/send-a-stream-message) -* [Send a private message](/help/send-a-private-message) -* [Format your message using Markdown](/help/format-your-message-using-markdown) -* [Preview your message before sending](/help/preview-your-message-before-sending) -* [View and edit your message drafts](/help/view-and-edit-your-message-drafts) -* [Add emoji](/help/add-emoji) -* [Upload and share files](/help/upload-and-share-files) -* [Manage your uploaded files](/help/manage-your-uploaded-files) - - -* [Enable or disable Press Enter to send](/help/enable-or-disable-pressing-enter-to-send) -* [Verify that your message has been successfully sent](/help/verify-that-your-message-has-been-successfully-sent) - -* [Send a status message](/help/format-your-message-using-markdown#status-messages) -* [@-mention a team member](/help/at-mention-a-team-member) -* [Make an announcement](/help/make-an-announcement) -* [Send a message in a different language](/help/send-a-message-in-a-different-language) -* [Reply to a message](/help/reply-to-a-message) -### Reading -* [View the Markdown source of a message](/help/view-the-markdown-source-of-a-message) -* [View the exact time a message was sent](/help/view-the-exact-time-a-message-was-sent) -* [View an image at full size](/help/view-an-image-at-full-size) -* [Collapse a message](/help/collapse-a-message) -* [Star a message](/help/star-a-message) -* [Add an emoji reaction to a message](/help/add-an-emoji-reaction-to-a-message) -* [Share a message or conversation](/help/share-a-message-or-conversation) -* [Search for messages](/help/search-for-messages) -### Editing -* [Edit or delete a message](/help/edit-or-delete-a-message) -* [Change the topic of a message](/help/change-the-topic-of-a-message) -* [View a message's edit history](/help/view-a-messages-edit-history) - -## People -* [Check whether someone is here or away](/help/check-whether-someone-is-here-or-away) -* [Invite a friend to Zulip](/help/invite-a-friend-to-zulip) -* [Send someone a private message](/help/send-someone-a-private-message) -* [Send a group of people a private message](/help/send-a-group-of-people-a-private-message) - -## Streams & Topics -* [About streams and topics](/help/about-streams-and-topics) -* [Browse and subscribe to streams](/help/browse-and-subscribe-to-streams) -* [Create a stream](/help/create-a-stream) -* [View your current stream subscriptions](/help/browse-and-subscribe-to-streams#browse-streams) -* [View messages from a stream](/help/view-messages-from-a-stream) -* [View messages from a topic](/help/view-messages-from-a-topic) -* [View messages from a user](/help/view-messages-from-a-user) -* [View messages containing files or links](/help/view-messages-containing-files-or-links) -* [Add or invite someone to a stream](/help/add-or-invite-someone-to-a-stream) -* [Change the stream description](/help/change-the-stream-description) -* [Rename a stream](/help/rename-a-stream) -* [Unsubscribe from a stream](/help/unsubscribe-from-a-stream) -* [Change the privacy of a stream](/help/change-the-privacy-of-a-stream) -* [Organize the Streams sidebar](/help/organize-the-streams-sidebar) -* [Pin a stream](/help/pin-a-stream) -* [Change the color of a stream](/help/change-the-color-of-a-stream) -* [Message a stream by email](/help/message-a-stream-by-email) - -## Notifications -* [Mute a stream](/help/mute-a-stream) -* [Mute a topic](/help/mute-a-topic) -* [Set notifications for a single stream](/help/set-notifications-for-a-single-stream) -* [Configure desktop notifications](/help/configure-desktop-notifications) -* [Configure audible notifications](/help/configure-audible-notifications) -* [Configure email notifications](/help/configure-email-notifications) -* [Configure mobile push notifications](/help/configure-mobile-notifications) -* [Configure email digest notifications](/help/configure-email-digest-notifications) -* [Add an alert word](/help/add-an-alert-word) - -## Tools & Customization -* [Keyboard shortcuts](/help/keyboard-shortcuts) -* [Add a bot or integration](/help/add-a-bot-or-integration) -* [Import users and channels from Slack](/help/import-users-and-channels-from-slack) - -## Misc -* [Tips for Zulip on Windows](/help/zulip-on-windows) -* [Tips for Zulip on Android](/help/zulip-on-android) - - - - - -* [The Zulip browser window](/help/the-zulip-browser-window) -* [Zulip glossary](/help/zulip-glossary) - -# Administering a Zulip organization - -* [Getting your organization started with Zulip](/help/getting-your-organization-started-with-zulip) - -## Organization Settings - -* [Change your organization settings](/help/change-your-organization-settings) -* [Change your organization's name](/help/change-your-organizations-name) -* [Change your organization's description](/help/change-your-organizations-description) -* [Change your organization's avatar](/help/change-your-organizations-avatar) -* [Restrict user email addresses to certain domains](/help/restrict-user-email-addresses-to-certain-domains) -* [Allow anyone to join without an invitation](/help/allow-anyone-to-join-without-an-invitation) -* [Only allow admins to invite new users](/help/only-allow-admins-to-invite-new-users) -* [Only allow admins to create new streams](/help/only-allow-admins-to-create-new-streams-feature) -* [Only allow admins to add emoji](/help/only-allow-admins-to-add-emoji) -* [Allow image/link previews](/help/allow-image-link-previews) -* [Prevent users from changing their name](/help/prevent-users-from-changing-their-name) -* [Prevent users from changing their email address](/help/prevent-users-from-changing-their-email-address) -* [Restrict editing of old messages and topics](/help/restrict-editing-of-old-messages-and-topics) -* [Require users to include topics in stream messages](/help/require-users-to-include-topics-in-stream-messages) -* [Change the default language for your organization](/help/change-the-default-language-for-your-organization) -* [Add custom emoji](/help/add-custom-emoji) - -* [Add a custom linkification filter](/help/add-a-custom-linkification-filter) - -## Users & Bots -* [Deactivate or reactivate a user](/help/deactivate-or-reactivate-a-user) -* [Deactivate or reactivate a bot](/help/deactivate-or-reactivate-a-bot) -* [Make a user an administrator](/help/make-a-user-an-administrator) -* [Change a user's name](/help/change-a-users-name) -* [View all bots in your organization](/help/view-all-bots-in-your-organization) - -## Streams -* [Delete a stream](/help/delete-a-stream) -* [Set default streams for new users](/help/set-default-streams-for-new-users) -* [Rename a stream](/help/rename-a-stream) -* [Change a stream's description](/help/change-the-stream-description) -* [Make a public stream private](/help/change-the-privacy-of-a-stream#make-a-public-stream-private) -* [Add someone to a stream](/help/add-or-invite-someone-to-a-stream) -* [Remove someone from a stream](/help/remove-someone-from-a-stream) - -## Linking to a Zulip server - -* [Join Zulip chat badge](/help/join-zulip-chat-badge) diff --git a/templates/zerver/help/main.html b/templates/zerver/help/main.html index 9ecabcd5d8..015c273107 100644 --- a/templates/zerver/help/main.html +++ b/templates/zerver/help/main.html @@ -1,26 +1,31 @@ -{% extends "zerver/portico.html" %} +{% extends "zerver/portico-help.html" %} {# Zulip User Documentation. #} {% block portico_content %} +