Skip to content

Commit 61251d5

Browse files
robodoorobodoo
authored
[FW][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 #2218 Forward-port-of: #2206 Signed-off-by: Antoine Vandevenne (anv) <[email protected]>
2 parents 73e74c7 + e0740d8 commit 61251d5

File tree

15 files changed

+211
-199
lines changed

15 files changed

+211
-199
lines changed

‎conf.py‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -193,14 +193,14 @@
193193
# The language names that should be shown in the language switcher, if the config option `languages`
194194
# is populated. If a language is passed to `languages` but is not listed here, it will not be shown.
195195
languages_names = {
196-
'de': 'Deutsch',
197-
'en': 'English',
198-
'es': 'Español',
199-
'fr': 'Français',
200-
'nl': 'Nederlands',
201-
'pt_BR': 'Português (BR)',
202-
'uk': 'українська',
203-
'zh_CN': '简体中文',
196+
'de': 'DE',
197+
'en': 'EN',
198+
'es': 'ES',
199+
'fr': 'FR',
200+
'nl': 'NL',
201+
'pt_BR': 'PT',
202+
'uk': 'UA',
203+
'zh_CN': 'ZH',
204204
}
205205

206206
# The specifications of redirect rules used by the redirects extension.

‎extensions/odoo_theme/layout.html‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -62,24 +62,22 @@
6262
</nav>
6363
</noscript>
6464
{# Shown when the JS has properly set all the classes on the TOC elements #}
65-
<nav id="o_menu" class="o_side_nav border-end">
66-
{%- if 'hide-page-toc' not in meta %}
67-
{# Shown when the JS has properly set all the classes on the TOC elements #}
68-
<aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pb-3 mb-4" hidden>
69-
{%- include "layout_templates/page_toc.html" %}
70-
</aside>
71-
{%- endif %}
72-
<div id="o_main_toctree" class="o_main_toc" hidden>
73-
{%- include "layout_templates/menu.html" %}
65+
<nav id="o_menu" class="o_side_nav">
66+
<div class="o_mobile-overlay" data-bs-toggle="collapse" data-bs-target="#o_menu"></div>
67+
<div class="o_side_nav-inner border-end">
68+
{%- if 'hide-page-toc' not in meta %}
69+
{# Shown when the JS has properly set all the classes on the TOC elements #}
70+
<aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
71+
{%- include "layout_templates/page_toc.html" %}
72+
</aside>
73+
{%- endif %}
74+
<div id="o_main_toctree" class="o_main_toc mt-3" hidden>
75+
{%- include "layout_templates/menu.html" %}
76+
</div>
7477
</div>
7578
</nav>
76-
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
79+
<header class="o_headers">
7780
{%- include "layout_templates/header.html" %}
78-
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
79-
<span class="icon-bar"></span>
80-
<span class="icon-bar"></span>
81-
<span class="icon-bar"></span>
82-
</button>
8381
</header>
8482
{%- endblock %}
8583

‎extensions/odoo_theme/layout_templates/header.html‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1-
<div class="o_logo_wrapper">
1+
<div class="o_main_header border-bottom d-flex align-items-center">
2+
<div class="o_logo_wrapper">
23
<a href="{{ pathto(master_doc) }}" class="o_logo">
34
<img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
45
<span>docs</span>
56
</a>
7+
</div>
8+
<div class="d-flex flex-grow-1">
9+
{%- include "layout_templates/searchbox.html" %}
10+
<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>
11+
</div>
612
</div>
7-
{%- include "layout_templates/searchbox.html" %}
8-
<div class="d-none d-lg-flex ms-auto">
9-
{%- include "layout_templates/language_switcher.html" %}
10-
{%- include "layout_templates/version_switcher.html" %}
11-
<a class="btn btn-primary fw_semibold" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
13+
<div class="o_subheader border-bottom d-flex">
14+
<div class="o_side_nav_toggler_wrapper border-end d-flex d-lg-none">
15+
<button class="h-100 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
16+
<i class="i-sidepanel"></i>
17+
</button>
18+
</div>
19+
<div class="d-flex justify-content-end ms-auto">
20+
{%- include "layout_templates/language_switcher.html" %}
21+
{%- include "layout_templates/version_switcher.html" %}
22+
</div>
1223
</div>

‎extensions/odoo_theme/layout_templates/language_switcher.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<div class="o_languages me-3">
1+
<div class="o_languages">
22
<div class="dropdown">
33
{%- if alternate_languages|length > 0 %}
4-
<button class="btn border dropdown-toggle"
4+
<button class="btn btn-sm dropdown-toggle"
55
id="languages"
66
data-bs-toggle="dropdown">
77
{{ language }} {# The current language #}
88
</button>
99
{%- else %}
10-
<button class="btn border dropdown-toggle"
10+
<button class="btn btn-sm dropdown-toggle"
1111
id="languages"
1212
disabled="">
1313
{{ language }} {# The current language #}

‎extensions/odoo_theme/layout_templates/searchbox.html‎

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

‎extensions/odoo_theme/layout_templates/version_switcher.html‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,22 @@
1-
<div class="o_versions row gx-2 me-3">
2-
<div class="col align-self-center">
3-
<label class="fw_bold small ms-2">Version</label>
4-
</div>
5-
<div class="col">
6-
<div class="dropdown">
7-
{%- if alternate_versions|length > 0 %}
8-
<button class="btn border dropdown-toggle"
9-
id="versions"
10-
data-bs-toggle="dropdown">
11-
{{ version_display_name }} {# The current version #}
12-
</button>
13-
{%- else %}
14-
<button class="btn border dropdown-toggle"
15-
id="versions"
16-
disabled="">
17-
{{ version_display_name }} {# The current version #}
18-
</button>
19-
{%- endif %}
20-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
21-
{%- for alternate_version, url in alternate_versions %}
22-
<li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
23-
{%- endfor %}
24-
</ul>
25-
</div>
1+
<div class="o_versions row">
2+
<div class="dropdown">
3+
{%- if alternate_versions|length > 0 %}
4+
<button class="btn btn-sm dropdown-toggle"
5+
id="versions"
6+
data-bs-toggle="dropdown">
7+
{{ version_display_name }} {# The current version #}
8+
</button>
9+
{%- else %}
10+
<button class="btn btn-sm dropdown-toggle"
11+
id="versions"
12+
disabled="">
13+
{{ version_display_name }} {# The current version #}
14+
</button>
15+
{%- endif %}
16+
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
17+
{%- for alternate_version, url in alternate_versions %}
18+
<li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
19+
{%- endfor %}
20+
</ul>
2621
</div>
2722
</div>

‎extensions/odoo_theme/static/fonts/icomoon.eot‎

236 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)