[MERGE] odoo_theme: revamp header and menu for better mobile support

Previously the switchers were hidden on mobile. These have been moved
to a sub-nav which also contains the button for the sidenav, leaving
more space for the searchbox so it can remain in the header. Like MDN
web docs, the navigation now slides in from the left instead of the
top.

See PR's commits for more details.

task-2800937

closes odoo/documentation#2206

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Odoo's Mergebot 2022-06-15 10:30:46 +02:00 committed by GitHub
commit 10f62b6a49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 218 additions and 206 deletions

16
conf.py
View File

@ -163,14 +163,14 @@ versions_names = {
# The language names that should be shown in the language switcher, if the config option `languages`
# is populated. If a language is passed to `languages` but is not listed here, it will not be shown.
languages_names = {
'de': 'Deutsch',
'en': 'English',
'es': 'Español',
'fr': 'Français',
'nl': 'Nederlands',
'pt_BR': 'Português (BR)',
'uk': 'українська',
'zh_CN': '简体中文',
'de': 'DE',
'en': 'EN',
'es': 'ES',
'fr': 'FR',
'nl': 'NL',
'pt_BR': 'PT',
'uk': 'UA',
'zh_CN': 'ZH',
}
# The specifications of redirect rules used by the redirects extension.

View File

@ -62,24 +62,22 @@
</nav>
</noscript>
{# Shown when the JS has properly set all the classes on the TOC elements #}
<nav id="o_menu" class="o_side_nav border-end">
{%- if 'hide-page-toc' not in meta %}
{# Shown when the JS has properly set all the classes on the TOC elements #}
<aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pb-3 mb-4" hidden>
{%- include "layout_templates/page_toc.html" %}
</aside>
{%- endif %}
<div id="o_main_toctree" class="o_main_toc" hidden>
{%- include "layout_templates/menu.html" %}
<nav id="o_menu" class="o_side_nav">
<div class="o_mobile-overlay" data-bs-toggle="collapse" data-bs-target="#o_menu"></div>
<div class="o_side_nav-inner border-end">
{%- if 'hide-page-toc' not in meta %}
{# Shown when the JS has properly set all the classes on the TOC elements #}
<aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
{%- include "layout_templates/page_toc.html" %}
</aside>
{%- endif %}
<div id="o_main_toctree" class="o_main_toc mt-3" hidden>
{%- include "layout_templates/menu.html" %}
</div>
</div>
</nav>
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
<header class="o_headers">
{%- include "layout_templates/header.html" %}
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</header>
{%- endblock %}

View File

@ -1,12 +1,23 @@
<div class="o_logo_wrapper">
<div class="o_main_header border-bottom d-flex align-items-center">
<div class="o_logo_wrapper">
<a href="{{ pathto(master_doc) }}" class="o_logo">
<img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
<span>docs</span>
</a>
</div>
<div class="d-flex flex-grow-1">
{%- include "layout_templates/searchbox.html" %}
<a class="btn btn-primary fw_semibold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
</div>
</div>
{%- include "layout_templates/searchbox.html" %}
<div class="d-none d-lg-flex ms-auto">
{%- include "layout_templates/language_switcher.html" %}
{%- include "layout_templates/version_switcher.html" %}
<a class="btn btn-primary fw_semibold" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
<div class="o_subheader border-bottom d-flex">
<div class="o_side_nav_toggler_wrapper border-end d-flex d-lg-none">
<button class="h-100 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
<i class="i-sidepanel"></i>
</button>
</div>
<div class="d-flex justify-content-end ms-auto">
{%- include "layout_templates/language_switcher.html" %}
{%- include "layout_templates/version_switcher.html" %}
</div>
</div>

View File

@ -1,13 +1,13 @@
<div class="o_languages me-3">
<div class="o_languages">
<div class="dropdown">
{%- if alternate_languages|length > 0 %}
<button class="btn border dropdown-toggle"
<button class="btn btn-sm dropdown-toggle"
id="languages"
data-bs-toggle="dropdown">
{{ language }} {# The current language #}
</button>
{%- else %}
<button class="btn border dropdown-toggle"
<button class="btn btn-sm dropdown-toggle"
id="languages"
disabled="">
{{ language }} {# The current language #}

View File

@ -1,5 +1,5 @@
{# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
<div id="searchbox" class="o_search_wrapper pe-lg-2" role="search">
<div id="searchbox" class="o_search_wrapper d-flex flex-grow-1" role="search">
<form class="o_search" action="{{ pathto('search') }}" method="get">
<input type="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
<input type="hidden" name="area" value="default">

View File

@ -1,27 +1,22 @@
<div class="o_versions row gx-2 me-3">
<div class="col align-self-center">
<label class="fw_bold small ms-2">Version</label>
</div>
<div class="col">
<div class="dropdown">
{%- if alternate_versions|length > 0 %}
<button class="btn border dropdown-toggle"
id="versions"
data-bs-toggle="dropdown">
{{ version_display_name }} {# The current version #}
</button>
{%- else %}
<button class="btn border dropdown-toggle"
id="versions"
disabled="">
{{ version_display_name }} {# The current version #}
</button>
{%- endif %}
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
{%- for alternate_version, url in alternate_versions %}
<li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
{%- endfor %}
</ul>
</div>
<div class="o_versions row">
<div class="dropdown">
{%- if alternate_versions|length > 0 %}
<button class="btn btn-sm dropdown-toggle"
id="versions"
data-bs-toggle="dropdown">
{{ version_display_name }} {# The current version #}
</button>
{%- else %}
<button class="btn btn-sm dropdown-toggle"
id="versions"
disabled="">
{{ version_display_name }} {# The current version #}
</button>
{%- endif %}
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
{%- for alternate_version, url in alternate_versions %}
<li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
{%- endfor %}
</ul>
</div>
</div>

View File

@ -72,6 +72,7 @@
<glyph unicode="&#xe93e;" glyph-name="tutorial" d="M149.504 243.2s198.656 23.552 290.475-77.483c3.413-10.581 9.216-12.288 19.797-15.36 1.334-0.237 2.87-0.372 4.437-0.372s3.103 0.135 4.596 0.395l-0.159-0.023c9.98 0.312 18.839 4.862 24.879 11.901l0.038 0.046c3.357 3.943 5.761 8.797 6.795 14.141l0.032 0.195c0.335 1.796 0.527 3.862 0.527 5.973s-0.192 4.177-0.558 6.182l0.032-0.209v74.752c0 17.72-14.365 32.085-32.085 32.085v0c-0.001 0-0.001 0-0.002 0-17.6 0-31.891-14.171-32.083-31.726v-10.258c-65.78 37.137-144.436 59.018-228.202 59.018-10.741 0-21.398-0.36-31.96-1.068l1.431 0.077v482.645c55.979-10.581 165.888-38.229 230.059-102.4 5.545-4.701 12.782-7.559 20.687-7.559 17.72 0 32.085 14.365 32.085 32.085 0 7.99-2.92 15.297-7.752 20.914l0.035-0.042c-104.448 102.4-295.595 124.587-303.787 125.611-1.029 0.118-2.222 0.186-3.43 0.186-8.299 0-15.853-3.184-21.509-8.398l0.022 0.020c-6.26-5.966-10.252-14.263-10.58-23.493l-0.002-0.059v-553.643c0.232-9.586 4.381-18.16 10.901-24.215l0.021-0.020c5.638-6.159 13.713-10.007 22.686-10.007 0.905 0 1.802 0.039 2.687 0.116l-0.115-0.008zM542.037 633.344c4.208-2.201 9.191-3.493 14.476-3.493 12.467 0 23.256 7.187 28.449 17.644l0.083 0.185c47.445 95.573 194.56 133.803 262.827 146.432v-482.645c-9.296 0.654-20.145 1.027-31.080 1.027-83.544 0-162.005-21.765-230.021-59.935l2.37 1.222c0 8.875 0 18.773 0 29.696 0 17.532-14.212 31.744-31.744 31.744v0 0c-17.72 0-32.085-14.365-32.085-32.085v-93.525c-0.325-1.898-0.511-4.085-0.511-6.315s0.186-4.416 0.543-6.545l-0.032 0.23c3.677-14.57 16.373-25.291 31.674-25.939l0.070-0.002c1.385-0.237 2.981-0.373 4.608-0.373s3.223 0.136 4.776 0.396l-0.168-0.023c9.557 2.731 15.36 4.437 18.773 14.677 91.136 102.4 289.109 78.165 291.157 78.165 1.452-0.246 3.124-0.386 4.829-0.386 7.878 0 15.056 2.999 20.454 7.917l-0.024-0.022c6.542 6.075 10.691 14.649 10.922 24.193l0.001 0.042v556.032c-0.156 17.601-14.461 31.81-32.084 31.81-0.721 0-1.436-0.024-2.146-0.071l0.096 0.005c-10.923 0-271.019-30.379-348.843-187.392-2.341-4.316-3.718-9.451-3.718-14.907 0-11.88 6.526-22.235 16.188-27.678l0.159-0.082zM1013.76 721.067c-15.842 14.454-35.437 25.064-57.148 30.203l-0.878 0.175c-1.59 0.274-3.422 0.431-5.291 0.431-18.053 0-32.687-14.634-32.687-32.687 0-16.184 11.762-29.621 27.204-32.229l0.192-0.027c5.565-1.185 10.484-3.317 14.827-6.239l-0.15 0.095v-505.856c-45.529 7.313-98.018 11.491-151.484 11.491-72.417 0-143.044-7.665-211.114-22.229l6.587 1.181c-12.547-3.875-21.875-14.458-23.869-27.458l-0.024-0.19v-13.995c-1.090-14.75-13.325-26.304-28.258-26.304-0.386 0-0.77 0.008-1.151 0.023l0.055-0.002h-77.483c-0.321-0.013-0.697-0.021-1.075-0.021-14.865 0-27.023 11.588-27.935 26.223l-0.004 0.080v10.581c0 0.012 0 0.026 0 0.039 0 14.808-10.031 27.273-23.669 30.97l-0.225 0.052c-61.483 13.383-132.11 21.049-204.527 21.049-53.465 0-105.955-4.178-157.159-12.226l5.676 0.735v507.221c4.243 2.362 9.197 4.046 14.461 4.755l0.216 0.024c15.634 2.635 27.396 16.072 27.396 32.256 0 18.053-14.634 32.687-32.687 32.687-1.868 0-3.7-0.157-5.483-0.458l0.192 0.027c-22.589-5.315-42.185-15.925-58.128-30.47l0.102 0.091c-6.134-6.011-10.007-14.307-10.239-23.509l-0.001-0.043v-560.811c-0.001-0.107-0.002-0.234-0.002-0.361 0-9.763 4.505-18.474 11.549-24.169l0.059-0.046c5.52-4.764 12.764-7.665 20.686-7.665 1.978 0 3.914 0.181 5.792 0.527l-0.195-0.030c53.202 9.333 114.46 14.668 176.964 14.668 58.748 0 116.395-4.713 172.584-13.782l-6.167 0.821c8.469-43.063 45.918-75.098 90.85-75.098 0.341 0 0.681 0.002 1.021 0.006h76.407c0.558-0.012 1.215-0.019 1.874-0.019 44.803 0 82.112 32.090 90.195 74.539l0.091 0.573c49.24 8.023 105.997 12.607 163.824 12.607 63.797 0 126.29-5.579 187.019-16.276l-6.437 0.939c1.683-0.316 3.619-0.497 5.597-0.497 7.922 0 15.165 2.902 20.727 7.7l-0.041-0.035c7.103 5.74 11.607 14.451 11.607 24.215 0 0.127-0.001 0.254-0.002 0.381v-0.019 562.517c-0.419 8.994-4.257 17.017-10.234 22.863l-0.006 0.006zM726.357 486.912c0.001 0.081 0.001 0.177 0.001 0.273 0 11.78-6.558 22.029-16.222 27.294l-0.163 0.081-300.373 169.984c-4.512 2.613-9.927 4.155-15.701 4.155-17.532 0-31.744-14.212-31.744-31.744 0-0.021 0-0.042 0-0.062v0.003-341.333c0-0.018 0-0.040 0-0.061 0-11.674 6.235-21.893 15.557-27.506l0.145-0.081c4.534-2.787 10.027-4.438 15.905-4.438 0.049 0 0.097 0 0.146 0h-0.007c0.031 0 0.067 0 0.104 0 5.733 0 11.111 1.52 15.753 4.178l-0.155-0.082 301.056 170.667c9.476 5.692 15.719 15.916 15.719 27.598 0 0.378-0.007 0.754-0.019 1.129l0.001-0.054zM425.301 371.541v230.4l204.8-115.029z" />
<glyph unicode="&#xe93f;" glyph-name="users" d="M512 355.84c-80.495 0-145.749 65.254-145.749 145.749s65.254 145.749 145.749 145.749c80.495 0 145.749-65.254 145.749-145.749 0-0.12 0-0.24 0-0.36v0.019c-0.194-80.348-65.374-145.408-145.749-145.408 0 0 0 0-0.001 0v0zM512 584.533c-0.101 0-0.221 0.001-0.341 0.001-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.676 81.92 81.919v0c0 0 0 0 0 0.001 0 45.123-36.483 81.725-81.56 81.919h-0.018zM512 48.299c-166.912 0-242.347 71.339-245.419 74.411l-9.557 9.216v13.653c-0.001 0.249-0.001 0.544-0.001 0.838 0 88.823 45.479 167.025 114.422 212.588l0.95 0.59c5.573 4.791 12.876 7.708 20.862 7.708 17.72 0 32.085-14.365 32.085-32.085 0-12.909-7.624-24.038-18.615-29.129l-0.198-0.082c-48.611-31.869-81.428-84.377-85.978-144.773l-0.038-0.635c49.99-30.683 110.525-48.856 175.305-48.856 5.692 0 11.351 0.14 16.974 0.418l-0.791-0.031c4.546-0.218 9.875-0.342 15.232-0.342 64.75 0 125.259 18.156 176.714 49.655l-1.482-0.844c-4.752 60.983-37.518 113.431-85.302 144.965l-0.714 0.443c-11.19 5.174-18.814 16.302-18.814 29.212 0 17.72 14.365 32.085 32.085 32.085 7.985 0 15.289-2.917 20.904-7.743l-0.042 0.036c69.893-46.153 115.372-124.354 115.372-213.178 0-0.295-0.001-0.589-0.002-0.884v0.045-13.653l-9.557-9.216c-2.048-3.072-77.483-74.411-244.395-74.411zM254.976 556.544c-80.495 0-145.749 65.254-145.749 145.749s65.254 145.749 145.749 145.749c80.495 0 145.749-65.254 145.749-145.749 0-0.12 0-0.24 0-0.36v0.019c0 0 0 0 0 0 0-80.307-65.101-145.408-145.408-145.408-0.12 0-0.24 0-0.36 0h0.019zM254.976 783.872c-0.101 0-0.221 0.001-0.341 0.001-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.676 81.92 81.919v0c0 0 0 0 0 0.001 0 45.123-36.483 81.725-81.56 81.919h-0.018zM200.704 251.733h-3.413c-71.644 3.816-136.497 30.086-188.367 71.832l0.634-0.493-9.557 9.557v12.971c-0.001 0.249-0.001 0.544-0.001 0.838 0 88.823 45.479 167.025 114.422 212.588l0.95 0.59c4.951 3.282 11.031 5.237 17.567 5.237 11.157 0 20.983-5.694 26.732-14.335l0.074-0.118c2.85-4.879 4.532-10.741 4.532-16.996 0-11.17-5.366-21.087-13.66-27.314l-0.088-0.063c-48.35-32.119-81.049-84.489-85.971-144.721l-0.045-0.687c40.072-24.904 87.931-41.156 139.25-44.994l1.038-0.062c16.031-1.553 28.462-14.957 28.462-31.265 0-1.010-0.048-2.009-0.141-2.994l0.010 0.126c-1.103-16.632-14.864-29.705-31.678-29.705-0.263 0-0.525 0.003-0.787 0.010l0.039-0.001zM769.024 556.544c-0.101 0-0.221 0-0.341 0-80.495 0-145.749 65.254-145.749 145.749s65.254 145.749 145.749 145.749c80.495 0 145.749-65.254 145.749-145.749 0-0.12 0-0.24 0-0.36v0.019c-0.194-80.228-65.179-145.214-145.389-145.408h-0.019zM769.024 783.872c-0.101 0-0.221 0.001-0.341 0.001-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.676 81.92 81.919v0c-0.191 45.046-36.56 81.535-81.542 81.92h-0.037zM823.296 251.733c-16.252 0.793-29.467 12.839-32.058 28.473l-0.027 0.199c-0.049 0.665-0.077 1.44-0.077 2.222 0 16.545 12.523 30.165 28.607 31.899l0.142 0.012c52.182 4.239 99.769 20.704 140.909 46.501l-1.304-0.762c-4.967 60.919-37.666 113.289-85.309 144.966l-0.707 0.442c-11.19 5.174-18.814 16.302-18.814 29.212 0 17.72 14.365 32.085 32.085 32.085 7.985 0 15.289-2.917 20.904-7.743l-0.042 0.036c70.295-46.16 116.134-124.536 116.395-213.635v-13.692l-9.557-9.216c-51.237-41.253-116.090-67.523-186.913-71.304l-0.82-0.035z" />
<glyph unicode="&#xe940;" glyph-name="external-link" d="M851.627 475.307c-18.773 0-34.133-15.36-34.133-34.133v-400.725c0-19.797-16.043-35.84-35.84-35.84h-677.205c-19.797 0-35.84 16.043-35.84 35.84v676.864c0 19.797 16.043 35.84 35.84 35.84h391.168c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133h-391.168c-57.685 0-104.448-46.763-104.448-104.448v-676.523c0-57.685 46.763-104.448 104.448-104.448h676.864c57.685 0 104.448 46.763 104.448 104.448v400.725c0 18.773-15.36 34.133-34.133 34.133zM989.867 960h-314.709c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h229.376l-486.059-489.131c-12.971-13.312-12.971-34.475 0.341-47.787s34.475-13.312 47.787 0l488.789 490.837v-232.448c0-18.773 15.36-34.133 34.133-34.133s34.133 15.36 34.133 34.133v312.661c0 18.773-15.36 34.133-34.133 34.133z" />
<glyph unicode="&#xe941;" glyph-name="sidepanel" d="M923.648 953.515h-823.296c-53.589 0-96.939-43.349-96.939-96.939v-817.152c0-53.589 43.691-96.939 96.939-96.939h823.296c53.589 0 96.939 43.349 96.939 96.939v817.152c0 53.589-43.691 96.939-96.939 96.939zM71.68 39.424v817.152c0 15.701 12.971 28.672 28.672 28.672h260.096v-874.496h-260.096c-15.701 0-28.672 12.971-28.672 28.672zM952.32 39.424c0-15.701-12.971-28.672-28.672-28.672h-494.933v874.496h494.933c15.701 0 28.672-12.971 28.672-28.672v-817.152zM248.149 682.155h-64.171c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h64.171c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133zM248.149 482.133h-64.171c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h64.171c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133zM248.149 282.112h-64.171c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h64.171c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133z" />
<glyph unicode="&#xe943;" glyph-name="warning" d="M512 366.080c-18.851 0-34.133 15.282-34.133 34.133v0 266.923c3.841 14.958 17.205 25.835 33.109 25.835s29.268-10.877 33.058-25.599l0.052-0.237v-267.947c-0.516-17.722-14.464-32.025-31.989-33.105l-0.097-0.005zM561.493 235.349c0-27.334-22.159-49.493-49.493-49.493s-49.493 22.159-49.493 49.493c0 27.334 22.159 49.493 49.493 49.493s49.493-22.159 49.493-49.493zM512-58.539c-0.175 0-0.383 0-0.59 0-85.883 0-166.872 20.95-238.137 58.018l2.866-1.356-7.168-2.731c-37.904-18.971-82.226-31.259-129.098-34.088l-0.95-0.046c-5.386-0.637-11.624-1.001-17.947-1.001-15.234 0-29.975 2.11-43.948 6.054l1.137-0.274c-12.674 5.358-21.951 16.554-24.535 30.123l-0.041 0.256c-0.067 0.972-0.105 2.106-0.105 3.25 0 16.486 7.897 31.128 20.115 40.349l0.128 0.092c2.976 2.392 5.561 5.085 7.768 8.074l0.083 0.118 10.923 16.384c9.496 13.456 19.331 29.181 28.329 45.435l1.367 2.693v4.437c-75.931 87.53-122.203 202.576-122.203 328.43 0 0.816 0.002 1.632 0.006 2.448v-0.126c0 282.77 229.23 512 512 512s512-229.23 512-512v0c-1.933-280.169-229.5-506.543-509.941-506.543-0.724 0-1.447 0.002-2.17 0.005h0.111zM280.235 65.707c0.213 0.005 0.465 0.007 0.717 0.007 6.372 0 12.359-1.647 17.559-4.539l-0.185 0.094c61.793-33.917 135.397-53.886 213.661-53.931h0.014c0.611-0.003 1.335-0.005 2.059-0.005 243.989 0 441.984 196.922 443.722 440.501l0.001 0.165c0 246.198-199.583 445.781-445.781 445.781s-445.781-199.583-445.781-445.781v0c0-0.193 0-0.421 0-0.649 0-116.103 45.5-221.578 119.641-299.568l-0.174 0.185c5.58-6.057 9.001-14.177 9.001-23.097 0-3.951-0.671-7.746-1.906-11.276l0.073 0.239c-3.792-12.731-7.853-23.372-12.589-33.637l0.642 1.552c-12.032-21.257-23.322-38.868-35.435-55.851l1.301 1.92c34.959 3.899 66.833 13.685 95.797 28.379l-1.589-0.731c11.435 5.785 24.829 9.484 39.006 10.23l0.247 0.010zM151.552 98.133v0zM151.552 98.133v0z" />
<glyph unicode="&#xe944;" glyph-name="websites" d="M754.005 745.301c13.385-30.015 21.179-65.040 21.179-101.886 0-1.021-0.006-2.040-0.018-3.058l0.001 0.155c0.006-0.64 0.009-1.397 0.009-2.155 0-36.984-7.791-72.149-21.821-103.942l0.649 1.649c-1.658-3.722-2.623-8.066-2.623-12.635 0-17.532 14.212-31.744 31.744-31.744 0.202 0 0.404 0.002 0.605 0.006h-0.030c0.025 0 0.055 0 0.085 0 13.095 0 24.339 7.93 29.19 19.249l0.079 0.207c16.611 38.226 26.274 82.753 26.274 129.536s-9.663 91.31-27.102 131.692l0.829-2.156c-17.339 41.245-41.452 76.412-71.295 105.771l-0.043 0.042c-5.765 5.765-13.73 9.331-22.528 9.331-17.595 0-31.859-14.264-31.859-31.859 0-8.798 3.566-16.763 9.331-22.528v0c23.967-23.869 43.342-52.329 56.698-83.951l0.646-1.723zM931.499 807.424c-24.028 55.679-56.599 103.235-96.609 143.372l0.012-0.012c-5.807 5.813-13.833 9.408-22.699 9.408s-16.891-3.596-22.698-9.408v0c-5.793-5.753-9.38-13.721-9.38-22.528s3.586-16.775 9.378-22.526l0.002-0.002c34.619-34.218 62.631-75.033 82.009-120.416l0.935-2.464c19.2-44.384 30.367-96.066 30.367-150.357s-11.168-105.974-31.331-152.876l0.963 2.519c-1.586-3.672-2.509-7.947-2.509-12.438 0-13.202 7.974-24.542 19.368-29.466l0.208-0.080c3.551-1.512 7.682-2.39 12.018-2.39 0.095 0 0.19 0 0.285 0.001h-0.015c0.060 0 0.13-0.001 0.201-0.001 13.157 0 24.464 7.919 29.415 19.25l0.080 0.207c21.598 50.426 34.155 109.106 34.155 170.719 0 1.542-0.008 3.082-0.024 4.621l0.002-0.235c0.014 1.303 0.022 2.843 0.022 4.385 0 61.613-12.557 120.293-35.252 173.62l1.097-2.902zM187.392 640.853c0-0.188-0.001-0.411-0.001-0.634 0-46.626 9.668-90.993 27.108-131.208l-0.825 2.135c4.93-11.526 16.174-19.456 29.269-19.456 0.030 0 0.060 0 0.090 0h-0.005c0.025 0 0.054 0 0.083 0 4.517 0 8.829 0.877 12.775 2.471l-0.229-0.082c11.758 4.936 19.866 16.355 19.866 29.667 0 4.445-0.904 8.678-2.537 12.527l0.079-0.21c-13.521 31.012-21.388 67.142-21.388 105.11 0 74.081 29.949 141.167 78.4 189.81l-0.009-0.009c5.793 5.753 9.38 13.721 9.38 22.528s-3.586 16.775-9.378 22.526l-0.002 0.002c-5.807 5.813-13.833 9.408-22.699 9.408s-16.891-3.596-22.698-9.408v0c-60.312-60.239-97.621-143.498-97.621-235.472 0-0.017 0-0.034 0-0.051v0.002zM134.485 439.808c11.668 4.975 19.699 16.349 19.699 29.598 0 4.601-0.969 8.977-2.713 12.933l0.081-0.205c-19.176 44.316-30.33 95.921-30.33 150.132 0 106.625 43.15 203.171 112.941 273.129l-0.008-0.008c5.765 5.765 9.331 13.73 9.331 22.528 0 17.595-14.264 31.859-31.859 31.859-8.798 0-16.763-3.566-22.528-9.331v0c-81.386-80.892-131.758-192.907-131.758-316.687 0-0.625 0.001-1.25 0.004-1.874v0.096c-0.014-1.303-0.022-2.843-0.022-4.385 0-61.613 12.557-120.293 35.252-173.62l-1.097 2.902c5.701-11.36 17.258-19.019 30.605-19.019 4.079 0 7.991 0.715 11.617 2.028l-0.238-0.075zM485.376 485.547v-394.923c-0.109-0.991-0.171-2.141-0.171-3.305 0-17.72 14.365-32.085 32.085-32.085s32.085 14.365 32.085 32.085c0 1.164-0.062 2.314-0.183 3.446l0.012-0.141v394.923c58.562 14.82 101.205 67.049 101.205 129.238 0 73.52-59.6 133.12-133.12 133.12s-133.12-59.6-133.12-133.12c0-62.189 42.644-114.417 100.285-129.040l0.92-0.198zM517.12 683.52c37.703 0 68.267-30.564 68.267-68.267s-30.564-68.267-68.267-68.267c-37.703 0-68.267 30.564-68.267 68.267v0c0 37.703 30.564 68.267 68.267 68.267v0zM642.389 238.421c-0.779 0.068-1.685 0.107-2.6 0.107-16.246 0-29.642-12.205-31.519-27.945l-0.015-0.151c-0.051-0.676-0.080-1.464-0.080-2.259 0-16.425 12.342-29.968 28.258-31.859l0.152-0.015c160.085-17.749 226.645-63.829 226.645-84.309 0-32.085-131.072-90.795-345.088-90.795s-344.747 58.709-344.747 90.795c0 20.48 69.973 68.267 232.107 84.992 16.049 1.732 28.434 15.205 28.434 31.571 0 0.902-0.038 1.795-0.111 2.678l0.008-0.116c-2.868 16.194-16.835 28.334-33.637 28.334-0.174 0-0.349-0.001-0.523-0.004h0.026c-68.267-7.168-289.451-38.912-289.451-148.48 0-102.4 204.8-154.624 409.6-154.624s409.6 53.248 409.6 154.624c-3.413 107.861-220.501 140.288-287.061 147.456z" />
<glyph unicode="&#xe945;" glyph-name="arrow-down" d="M824.32 299.861c-5.807 5.813-13.833 9.408-22.699 9.408s-16.891-3.596-22.698-9.408v0l-234.837-248.149v876.203c0 17.72-14.365 32.085-32.085 32.085s-32.085-14.365-32.085-32.085v-880.981l-234.837 251.563c-5.821 6.32-14.137 10.265-23.374 10.265-8.392 0-16.023-3.256-21.7-8.575l0.018 0.016c-5.895-6.125-9.527-14.467-9.527-23.656 0-8.287 2.953-15.885 7.865-21.797l-0.045 0.056 288.085-307.2c5.789-6.271 14.037-10.198 23.203-10.24h0.008c9.076 0.229 17.236 3.967 23.213 9.901l-0.002-0.002 292.181 307.2c5.696 5.736 9.217 13.64 9.217 22.365 0 9.061-3.796 17.236-9.886 23.019l-0.014 0.013z" />

Before

Width:  |  Height:  |  Size: 265 KiB

After

Width:  |  Height:  |  Size: 266 KiB

View File

@ -15,10 +15,13 @@
document.querySelectorAll('a[class="dropdown-item"]').forEach(element => {
element.addEventListener('click', async event => {
if (element.hasAttribute('href')) {
event.preventDefault();
const fallbackUrls = await _generateFallbackUrls(element.getAttribute('href'));
const fallbackUrl = await _getFirstValidUrl(fallbackUrls);
window.location.href = fallbackUrl;
const targetUrl = element.getAttribute('href');
if (!targetUrl.startWith('/')) { // Don't test for valid URLs if in localhost.
event.preventDefault();
const fallbackUrls = await _generateFallbackUrls(targetUrl);
const fallbackUrl = await _getFirstValidUrl(fallbackUrls);
window.location.href = fallbackUrl;
}
}
});
});

View File

@ -422,3 +422,8 @@
content: $i-article;
}
}
.i-sidepanel {
&:before {
content: $i-sidepanel;
}
}

View File

@ -157,6 +157,7 @@ $i-lightbulb: "\e921";
$i-check: "\e909";
$i-edit: "\e932";
$i-article: "\e94e";
$i-sidepanel: "\e941";
//------------------------------------------------------------------------------
@ -231,9 +232,13 @@ $doc_cyan: $color-alpha;
// Header
$o-header-mobile-height: 50px;
$o-header-height: 90px;
$o-header-height: 80px;
$o-header-white: #ffffff;
$o-subheader-height: calc(#{$o-header-height}/2.5);
$o-headers-mobile-height: calc(#{$o-header-mobile-height} + (#{$o-subheader-height}));
$o-headers-height: calc(#{$o-header-height} + #{$o-subheader-height});
// Navigation
$o-side-nav-width: 350px;
$o-on-page-width: 20%;

View File

@ -11,6 +11,7 @@ div[aria-label="related navigation"] {
}
body {
position: relative;
a:not(:hover), a.o_logo {
text-decoration: none !important;
}
@ -51,146 +52,127 @@ span.viewcode-link {
// Header with logo, searchbar and switchers
//------------------------------------------------------------------------------
header.o_main_header {
header {
width: 100%;
height: $o-header-mobile-height;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: $o-header-white;
z-index: 10;
padding: 0 $padding-s;
@include media-breakpoint-up(lg) {
height: $o-header-height;
padding: 0 $padding-m;
}
@include media-breakpoint-up(xl) {
padding: 0 $padding-l 0 $padding-m;
}
.o_logo_wrapper {
> .o_logo {
img {
margin-bottom: -2px;
vertical-align: baseline;
}
span {
@include font-size($font-size-base);
color: $o-violet;
@include o-easter-egg($img:'img/ducky.svg');
}
.o_main_header {
height: $o-header-mobile-height;
background-color: $o-header-white;
padding: 0 $padding-s;
@include media-breakpoint-up(lg) {
height: $o-header-height;
padding: 0 $padding-m;
}
@include media-breakpoint-up(xl) {
width: calc(#{$o-side-nav-width} - #{$padding-l});
}
@include media-breakpoint-up(lg) {
margin-right: $margin-l;
}
}
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
.o_search_wrapper {
display: flex;
position: relative;
opacity: 1;
@include transition(opacity .3s);
@include media-breakpoint-down(lg) {
display: block;
position: absolute;
width: calc(100% - (#{$padding-s} * 2));
top: calc(100% + #{$padding-s});
}
@include media-breakpoint-up(lg) {
flex-grow: 1;
max-width: 500px;
padding: 0 $padding-l 0 $padding-m;
}
.o_search {
position: relative;
width: 100%;
.o_logo_wrapper {
margin-right: $margin-s;
@include media-breakpoint-up(xl) {
width: calc(#{$o-side-nav-width} - #{$padding-m});
}
@include media-breakpoint-up(lg) {
margin-right: $margin-l;
}
> .o_logo {
img {
margin-bottom: -2px;
vertical-align: baseline;
}
.btn {
@include o-position-absolute($top: 50%, $right: 1rem);
@include o-transform (translateY(-50%)) ;
padding: 0;
font-size: 1.2rem;
color: $gray;
span {
@include font-size($font-size-base);
color: $o-violet;
@include o-easter-egg($img:'img/ducky.svg');
}
}
}
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
> div:not(.o_logo_wrapper) {
@include media-breakpoint-up(lg) {
width: calc(100% - (#{$o-side-nav-width}));
}
}
}
&.o_header_scrolled {
.o_search_wrapper {
@include media-breakpoint-down(lg) {
opacity: 0;
position: relative;
@include media-breakpoint-up(lg) {
padding-right: $padding-m;
}
.o_search {
position: relative;
width: 100%;
.btn {
@include o-position-absolute($top: 50%, $right: .5rem);
@include o-transform (translateY(-50%)) ;
@include media-breakpoint-up(lg) {
right: 1rem;
}
padding: 0;
font-size: 1.2rem;
color: $gray;
}
.form-control {
@include media-breakpoint-down(lg) {
padding: 0.275rem 0.5rem;
font-size: $font-size-secondary;
}
}
}
.highlight-link {
@include o-position-absolute($bottom: -4.5rem, $right: 0);
@include media-breakpoint-up(lg) {
bottom: -1.5rem;
right: $padding-m;
}
margin-bottom: 0;
a {
@include font-size(12px);
}
}
}
}
.highlight-link {
@include o-position-absolute($bottom: -1.5rem, $right: 1rem);
margin-bottom: 0;
a {
@include font-size(12px);
.o_subheader {
background: $gray-lighter;
height: $o-subheader-height;
padding-right: $padding-s;
@include media-breakpoint-up(lg) {
padding: 0 $padding-m;
}
}
.navbar-toggler {
&[aria-expanded="true"] {
.icon-bar {
&:nth-of-type(1) {
@include o-transform(rotate(45deg));;
@include o-transform-origin(10%, 10%)
}
&:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
&:nth-of-type(3) {
@include o-transform(rotate(-45deg));
@include o-transform-origin(10%, 90%)
}
}
@include media-breakpoint-up(xl) {
padding: 0 $padding-l 0 0;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: $gray-dark;
@include o-transition(all, .2s);
&+ .icon-bar {
margin-top: 4px;
.o_side_nav_toggler_wrapper {
height: 100%;
button {
&:focus, &:focus-visible{
box-shadow: none;
outline:none;
}
&[aria-expanded="true"]{
background-color: rgba(0,0,0, .2);
}
}
&:nth-of-type(1) {
@include o-transform(rotate(0));
}
&:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}
&:nth-of-type(3) {
@include o-transform(rotate(0));
}
}
&:focus {
box-shadow: none;
outline:none;
}
}
}
@ -201,32 +183,44 @@ header.o_main_header {
.o_side_nav {
width: 100%;
height: 100%;
overflow-y: auto;
position: fixed;
top: -100%;
left:0;
@include o-transition(all, .3s);
padding-top: 4rem;
padding-left: $padding-s;
background-color: lighten($o-violet-dark, 70%) ;
z-index: 10;
@include font-size($font-size-secondary);
color: $o-violet-dark;
font-weight: $fw_regular;
@include media-breakpoint-up(lg) {
width: calc(#{$o-side-nav-width} - 1rem);
height: calc(100vh - #{$o-header-height});
top: $o-header-height;
padding-top: $padding-m;
padding-left: $padding-m;
.o_mobile-overlay {
background-color: rgba(0,0,0,.3);
@include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right:0);
opacity: 0;
transition: opacity .2s linear;
z-index: -100;
}
@include media-breakpoint-up(xl) {
width: $o-side-nav-width;
.o_side_nav-inner {
width: 90%;
height: calc(100% - (#{$o-headers-mobile-height});
overflow-y: auto;
position: fixed;
left: -100%;
@include o-transition(all, .3s);
padding-left: $padding-s;
background-color: lighten($o-violet-dark, 70%) ;
z-index: 10;
@include font-size($font-size-secondary);
color: $o-violet-dark;
font-weight: $fw_regular;
@include media-breakpoint-up(lg) {
width: $o-side-nav-width;
height: calc(100vh - (#{$o-headers-height}));
left: 0;
padding-top: $padding-m;
padding-left: $padding-m;
}
}
&.show {
top: $o-header-mobile-height;
.o_mobile-overlay {
opacity: 1;
z-index: 1;
}
.o_side_nav-inner {
left: 0;
}
}
.toctree-l1 {
@ -370,7 +364,7 @@ header.o_main_header {
display: none;
@include media-breakpoint-up(xl) {
display: block;
top: $o-header-height;
top: $o-headers-height;
right: 0;
padding: $padding-l $padding-s $padding-l 0;
overflow-y: auto;
@ -379,7 +373,7 @@ header.o_main_header {
position: sticky;
width: $o-on-page-width;
height: 100%;
max-height: calc(100vh - #{$o-header-height});
max-height: calc(100vh - #{$o-headers-height});
}
&.o_in_nav_toc {
display: block;
@ -415,11 +409,11 @@ header.o_main_header {
//------------------------------------------------------------------------------
#wrap {
margin-top: $o-header-mobile-height;
margin-top: $o-headers-mobile-height;
@include media-breakpoint-up(lg) {
display: flex;
justify-content: space-between;
margin-top: $o-header-height;
margin-top: $o-headers-height;
}
code {
@ -439,7 +433,6 @@ header.o_main_header {
main {
position: relative;
padding-top: 5rem;
padding-bottom: $padding-l;
@include media-breakpoint-up(lg) {
left: calc(#{$o-side-nav-width} - #{$padding-s});
@ -627,6 +620,7 @@ header.o_main_header {
}
article.doc-body {
padding-top: $padding-s;
position: relative;
.o_git_link {