NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] theme: improve search bar implementation and behavior

Browse Source 
This commit removes the extra search bar that was dedicated to the
mobile layout and adapts the desktop's one to be compatible with mobile.
It also brings back the "Hide Search Matches" button.
This commit is contained in:
Elisabeth Dickinson 2021-05-12 09:49:55 +02:00 committed by GitHub
parent 0fcc06c2db
commit 26d489c6e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/odoo_theme/layout.html
View File

@ -91,10 +91,6 @@
{%- set main_classes = main_classes + ['o_fullwidth_page'] %} {%- set main_classes = main_classes + ['o_fullwidth_page'] %}
{%- endif %} {%- endif %}
<div class="px-3 py-4 d-lg-none">
<!-- Searchbox only visible in mobile -->
{%- include "layout_templates/searchbox.html" %}
</div>
<main class="container-fluid {{ ' '.join(main_classes) }}"> <main class="container-fluid {{ ' '.join(main_classes) }}">
{%- if pagename == master_doc %} {%- if pagename == master_doc %}
{# Custom landing page on the root of the documentation #} {# Custom landing page on the root of the documentation #}

3
extensions/odoo_theme/layout_templates/searchbox.html
View File

@ -1,6 +1,5 @@
{# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #} {# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
{# NOTE: currently renamed to '_searchbox' to hide the button until it receives proper styling #} <div id="searchbox" class="o_search_wrapper flex-grow-1 pe-lg-2" role="search">
<div id="_searchbox" class="o_search_wrapper flex-grow-1 justify-content-stretch justify-content-lg-start pe-lg-2" role="search">
<form class="o_search" action="{{ pathto('search') }}" method="get"> <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="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
<input type="hidden" name="area" value="default"> <input type="hidden" name="area" value="default">

16
extensions/odoo_theme/static/style.scss
View File

@ -72,17 +72,22 @@ header.o_main_header{
} }
} }
.o_search_wrapper { .o_search_wrapper {
display: flex;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
display: none !important; display: block;
position: absolute;
width: 100%;
padding: 0 10px;
top: calc(100% + 30px);
} }
} }
.highlight-link { .highlight-link {
margin-bottom: 0; margin-bottom: 0;
display: flex; padding: 0 1rem;
align-items: center; text-align: center;
align-self: center;
a { a {
padding: 0 1rem;
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
} }
} }
@ -369,6 +374,9 @@ header.o_main_header{
main { main {
position: relative; position: relative;
padding-top: 3rem; padding-top: 3rem;
@include media-breakpoint-down(lg) {
padding-top: 7rem;
}
padding-bottom: 3rem; padding-bottom: 3rem;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {