mirror of https://github.com/zulip/zulip.git
help: Add tab styling to untabbed instructions as well.
This changes the border-radius to 6px for the tabbed display, which is not in line with the current Zulip style for border-radius (4px). However 6px really looks a lot better for this (possibly because it's a bigger box than most of our other boxes?)
This commit is contained in:
parent
d6c80d1ce7
commit
83236dc283
|
@ -109,12 +109,21 @@ body {
|
|||
border-radius: 4px 4px 0px 0px;
|
||||
}
|
||||
|
||||
.code-section.no-tabs ul.nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-section .blocks {
|
||||
padding: 10px;
|
||||
|
||||
border: 1px solid hsl(0, 0%, 87%);
|
||||
}
|
||||
|
||||
border-radius: 0px 4px 4px 4px;
|
||||
.code-section.has-tabs .blocks {
|
||||
border-radius: 0px 6px 6px 6px;
|
||||
}
|
||||
|
||||
.code-section.no-tabs .blocks {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* The API tabbed content tends to have a lot of code blocks,
|
||||
|
@ -138,7 +147,8 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.code-section .blocks > .active {
|
||||
.code-section.no-tabs .blocks > div,
|
||||
.code-section.has-tabs .blocks > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
@ -7,12 +7,16 @@ Organization administrators can [change anyone's name](/help/change-a-users-name
|
|||
[prevent users from changing their names](/help/restrict-name-and-email-changes). This
|
||||
is useful when users' names are managed via LDAP or another data source.
|
||||
|
||||
{start_tabs}
|
||||
|
||||
{settings_tab|your-account}
|
||||
|
||||
1. Under **User settings**, click on the button with your name in it.
|
||||
|
||||
1. Change your name, and click **Save**.
|
||||
|
||||
{end_tabs}
|
||||
|
||||
!!! warn ""
|
||||
**Note:** If you are unable to click on the button with your name, check
|
||||
that your organization allows name changes. Follow the steps at
|
||||
|
|
|
@ -20,3 +20,9 @@ Desktop/browser instructions
|
|||
{tab|android}
|
||||
Android instructions
|
||||
{end_tabs}
|
||||
|
||||
## Heading 3
|
||||
|
||||
{start_tabs}
|
||||
Instructions for all platforms
|
||||
{end_tabs}
|
||||
|
|
|
@ -10,7 +10,7 @@ END_TABBED_SECTION_REGEX = re.compile(r'^\{end_tabs\}$')
|
|||
TAB_CONTENT_REGEX = re.compile(r'^\{tab\|\s*(.+?)\s*\}$')
|
||||
|
||||
CODE_SECTION_TEMPLATE = """
|
||||
<div class="code-section" markdown="1">
|
||||
<div class="code-section {tab_class}" markdown="1">
|
||||
{nav_bar}
|
||||
<div class="blocks">
|
||||
{blocks}
|
||||
|
@ -65,10 +65,16 @@ class TabbedSectionsPreprocessor(Preprocessor):
|
|||
def run(self, lines: List[str]) -> List[str]:
|
||||
tab_section = self.parse_tabs(lines)
|
||||
while tab_section:
|
||||
if 'tabs' in tab_section:
|
||||
tab_class = 'has-tabs'
|
||||
else:
|
||||
tab_class = 'no-tabs'
|
||||
tab_section['tabs'] = [{'tab_name': 'null_tab',
|
||||
'start': tab_section['start_tabs_index']}]
|
||||
nav_bar = self.generate_nav_bar(tab_section)
|
||||
content_blocks = self.generate_content_blocks(tab_section, lines)
|
||||
rendered_tabs = CODE_SECTION_TEMPLATE.format(
|
||||
nav_bar=nav_bar, blocks=content_blocks)
|
||||
tab_class=tab_class, nav_bar=nav_bar, blocks=content_blocks)
|
||||
|
||||
start = tab_section['start_tabs_index']
|
||||
end = tab_section['end_tabs_index'] + 1
|
||||
|
|
|
@ -239,7 +239,7 @@ header
|
|||
|
||||
<h1 id="heading">Heading</h1>
|
||||
<p>
|
||||
<div class="code-section" markdown="1">
|
||||
<div class="code-section has-tabs" markdown="1">
|
||||
<ul class="nav">
|
||||
<li data-language="ios">iOS</li>
|
||||
<li data-language="desktop-web">Desktop/Web</li>
|
||||
|
@ -257,7 +257,7 @@ header
|
|||
|
||||
<h2 id="heading-2">Heading 2</h2>
|
||||
<p>
|
||||
<div class="code-section" markdown="1">
|
||||
<div class="code-section has-tabs" markdown="1">
|
||||
<ul class="nav">
|
||||
<li data-language="desktop-web">Desktop/Web</li>
|
||||
<li data-language="android">Android</li>
|
||||
|
@ -273,6 +273,20 @@ header
|
|||
</div>
|
||||
</p>
|
||||
|
||||
<h2 id="heading-3">Heading 3</h2>
|
||||
<p>
|
||||
<div class="code-section no-tabs" markdown="1">
|
||||
<ul class="nav">
|
||||
<li data-language="null_tab">None</li>
|
||||
</ul>
|
||||
<div class="blocks">
|
||||
<div data-language="null_tab" markdown="1"></p>
|
||||
<p>Instructions for all platforms</p>
|
||||
<p></div>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
footer
|
||||
"""
|
||||
|
||||
|
|
Loading…
Reference in New Issue