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

user docs: Convert browser scrollbar overflow from .markdown to html. 

Remove overflow: hidden from the body and overflow: auto from the
.markdown element. Adjust the scroll-margin-top on the heading
elements so that using the hash, the page opens at perfect
location. Add position: fixed to .sidebar so that it does not scroll
with the content.

For the mobile view, change the .sidebar right from 100vw to 100%.

Also change how the hamburger menu changes its position: use right
instead of left as that works better than translate combined with
left.
This commit is contained in:
Signior-X 2021-03-27 17:45:35 +05:30 committed by Tim Abbott
parent f63c1fa639
commit 3392be5688
4 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/zerver/base.html
View File

@ -37,7 +37,7 @@
{% endblock %} {% endblock %}
</head> </head>
<body class="{% if noscroll %}noscroll{% endif %}"> <body>
{% block content %} {% block content %}
{% endblock %} {% endblock %}

1
templates/zerver/documentation_main.html
View File

@ -1,6 +1,5 @@
{% extends "zerver/portico-help.html" %} {% extends "zerver/portico-help.html" %}
{% set entrypoint = "help" %} {% set entrypoint = "help" %}
{% set noscroll = true %}
{# Zulip user and API documentation. #} {# Zulip user and API documentation. #}
{% block title %} {% block title %}

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

@ -2,7 +2,6 @@
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
overflow: auto;
& h1[id], & h1[id],
h2[id], h2[id],

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

@ -98,7 +98,6 @@ html {
display: inline-flex; display: inline-flex;
box-shadow: 0 -20px 50px hsl(0deg 0% 0% / 4%); box-shadow: 0 -20px 50px hsl(0deg 0% 0% / 4%);
overflow: auto;
color: hsl(0deg 0% 27%); color: hsl(0deg 0% 27%);
@ -125,7 +124,7 @@ html {
height: calc(100vh - 59px); height: calc(100vh - 59px);
border-right: 1px solid hsl(219deg 10% 97%); border-right: 1px solid hsl(219deg 10% 97%);
overflow: auto; position: fixed;
background-color: hsl(153deg 32% 55%); background-color: hsl(153deg 32% 55%);
color: hsl(0deg 0% 100%); color: hsl(0deg 0% 100%);
@ -252,10 +251,10 @@ html {
background-color: hsl(0deg 0% 100%); background-color: hsl(0deg 0% 100%);
width: calc(100vw - 300px); width: calc(100vw - 300px);
height: calc(100vh - 59px); height: calc(100vh - 59px);
margin-left: 300px;
& :target { & :target {
/* Match to where simplebar scrolls */ scroll-margin-top: 59px;
scroll-margin-top: 20px;
} }
/* Highlight the headings as well as the first child /* Highlight the headings as well as the first child
of any targeted div, as in the API documentation. */ of any targeted div, as in the API documentation. */
@ -1061,6 +1060,7 @@ input.new-organization-button {
.app.help { .app.help {
.markdown { .markdown {
width: 100vw; width: 100vw;
margin-left: 0;
.content { .content {
max-width: none; max-width: none;
@ -1072,7 +1072,7 @@ input.new-organization-button {
display: block; display: block;
position: fixed; position: fixed;
top: 70px; top: 70px;
left: 9px; right: calc(100% - 40px);
fill: hsl(0deg 0% 100%); fill: hsl(0deg 0% 100%);
z-index: 2; z-index: 2;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -1082,7 +1082,7 @@ input.new-organization-button {
.sidebar { .sidebar {
position: fixed; position: fixed;
top: 59px; top: 59px;
right: calc(100vw - 50px); right: calc(100% - 50px);
width: 100%; width: 100%;
min-width: unset; min-width: unset;
height: calc(100vh - 59px); height: calc(100vh - 59px);
@ -1102,7 +1102,7 @@ input.new-organization-button {
} }
+ .hamburger { + .hamburger {
transform: translateX(calc(100vw - 50px)); right: 12px;
} }
~ .markdown { ~ .markdown {