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

[FIX] odoo_theme: fix header display on small screen widths

Browse Source 
The highlight-link was pushing the header height to be on two lines.
It is now absolutely positioned below the searchbar instead of to its right.
The switchers now push themselves to the right instead of being pushed by the searchbar-wrapper.
This commit is contained in:
Elisabeth Dickinson 2021-06-09 11:22:58 +02:00 committed by GitHub
parent b1b48759ba
commit c8750ae032
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/odoo_theme/layout_templates/header.html
View File

@ -5,7 +5,7 @@
</a>
</div>
{%- include "layout_templates/searchbox.html" %}
<div class="d-none d-lg-flex">
<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>

2
extensions/odoo_theme/layout_templates/searchbox.html
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 flex-grow-1 pe-lg-2" role="search">
<div id="searchbox" class="o_search_wrapper pe-lg-2" 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">

2
extensions/odoo_theme/layout_templates/version_switcher.html
View File

@ -1,5 +1,5 @@
<div class="o_versions row gx-2 me-3">
<div class="col col-form-label">
<div class="col align-self-center">
<label class="fw_bold small ms-2">Version</label>
</div>
<div class="col">

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

@ -88,6 +88,7 @@ header.o_main_header {
.o_search_wrapper {
display: flex;
position: relative;
opacity: 1;
@include transition(opacity .3s);
@include media-breakpoint-down(lg) {
@ -95,14 +96,16 @@ header.o_main_header {
position: absolute;
width: calc(100% - (#{$padding-s} * 2));
top: calc(100% + #{$padding-s});
}
}
@include media-breakpoint-up(lg) {
flex-grow: 1;
max-width: 500px;
}
.o_search {
position: relative;
width: 100%;
@include media-breakpoint-up(lg) {
max-width: 500px;
}
.btn {
@include o-position-absolute($top: 50%, $right: 1rem);
@ -123,17 +126,10 @@ header.o_main_header {
}
.highlight-link {
@media only screen and (max-width: 1242px) and (min-width: 992px){
position: absolute;
bottom: 0;
}
@include o-position-absolute($bottom: -1.5rem, $right: 1rem);
margin-bottom: 0;
padding: 0 1rem;
text-align: center;
align-self: center;
a {
@include font-size($font-size-secondary);
@include font-size(12px);
}
}