mobile fixes
This commit is contained in:
Elisabeth Dickinson
parent
fee11ce8bb
commit
f5f1d77b0d
@ -63,18 +63,16 @@
|
||||
<nav id="o_main_toctree" class="o_side_nav border-end" hidden>
|
||||
{% include "layout_templates/menu.html" %}
|
||||
</nav>
|
||||
<header class="o_main_header border-bottom">
|
||||
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
|
||||
{% include "layout_templates/header.html" %}
|
||||
<button class="navbar-toggler pe-3 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_main_toctree" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="wrap">
|
||||
<nav class="navbar navbar-expand-lg navbar-light d-lg-none" aria-label="Toggle OffCanvas">
|
||||
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</nav>
|
||||
{% set main_classes = [] %}
|
||||
{% if pagename == master_doc %} {# The current page is the homepage #}
|
||||
{% set main_classes = main_classes + ['index'] %} {# TODO EDI should be 'o_index' #}
|
||||
@ -91,7 +89,9 @@
|
||||
{% if 'hide_page_toc' in meta %}
|
||||
{% set main_classes = main_classes + ['o_fullwidth_page'] %}
|
||||
{% endif %}
|
||||
|
||||
<div class="px-3 pt-4 d-lg-none">
|
||||
{% include "layout_templates/searchbox.html" %}
|
||||
</div>
|
||||
<main class="container-fluid {{ ' '.join(main_classes) }}">
|
||||
{% if pagename == master_doc %}
|
||||
{# Custom landing page on the root of the documentation #}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<div class="o_get_help d-lg-flex text-center text-lg-start">
|
||||
<div class="o_get_help container-fluid d-lg-flex">
|
||||
<div class="col-12 col-lg-10">
|
||||
<h5><i class="i-o-help me-2"></i>Get Help</h5>
|
||||
<div>
|
||||
<a href="https://odoo.com/help" target="_blank" class="btn btn-outline-secondary">Contact Support</a>
|
||||
<a href="https://www.odoo.com/forum/help-1" target="_blank" class="btn btn-outline-secondary">Ask the Odoo Community</a>
|
||||
<a href="https://odoo.com/help" target="_blank" class="btn btn-outline-secondary mb-2">Contact Support</a>
|
||||
<a href="https://www.odoo.com/forum/help-1" target="_blank" class="btn btn-outline-secondary mb-2">Ask the Odoo Community</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-2 mt-5 mt-lg-0">
|
||||
<a href="https://www.odoo.com">
|
||||
<img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" width="100" alt="Odoo"/>
|
||||
<div class="col-12 col-lg-2 mt-5 mt-lg-0 text-center">
|
||||
<a class="o_logo" href="https://www.odoo.com">
|
||||
<img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="o_logo_wrapper">
|
||||
<a href="{{ pathto(master_doc) }}" class="o_logo">
|
||||
<img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}"
|
||||
height="30" alt="Odoo"/>
|
||||
height="20" alt="Odoo"/>
|
||||
<span>docs</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="searchbox" class="d-flex flex-grow-1 justify-content-stretch justify-content-lg-start pe-2" role="search">
|
||||
<div 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">
|
||||
<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">
|
||||
@ -6,4 +6,4 @@
|
||||
<button type="submit" class="btn"><i class="i-search"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
<script type="text/javascript">$('#searchbox').show(0);</script>
|
||||
<script type="text/javascript">$('.o_search_wrapper').show(0);</script>
|
||||
|
||||
@ -560,7 +560,7 @@ $input-btn-line-height: $line-height-base !default;
|
||||
$input-btn-focus-width: .25rem !default;
|
||||
$input-btn-focus-color-opacity: .25 !default;
|
||||
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
|
||||
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
|
||||
$input-btn-focus-box-shadow: 0 0 20px $input-btn-focus-width $input-btn-focus-color !default;
|
||||
|
||||
$input-btn-padding-y-sm: .25rem !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
|
||||
@ -6,6 +6,13 @@
|
||||
@import "scss/_typography";
|
||||
@import "scss/_iconfont";
|
||||
|
||||
:root {
|
||||
--o-header-height: 50px;
|
||||
@include media-breakpoint-up(lg) {
|
||||
--o-header-height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
div[aria-label="related navigation"] {
|
||||
display: none;
|
||||
}
|
||||
@ -35,9 +42,7 @@ body {
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
header.o_main_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $o-header-height;
|
||||
height: var(--o-header-height);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -67,6 +72,30 @@ header.o_main_header{
|
||||
margin-right: 3rem;
|
||||
}
|
||||
}
|
||||
.o_search_wrapper {
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-link {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
padding: 0 1rem;
|
||||
@include font-size($font-size-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_logo img {
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 30px
|
||||
}
|
||||
}
|
||||
|
||||
.o_search_wrapper {
|
||||
.o_search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -81,16 +110,6 @@ header.o_main_header{
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-link {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
padding: 0 1rem;
|
||||
@include font-size($font-size-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
@ -99,12 +118,12 @@ header.o_main_header{
|
||||
|
||||
.o_side_nav {
|
||||
width: $o-side-nav-width;
|
||||
height: calc(100vh - #{$o-header-height});
|
||||
height: calc(100vh - var(--o-header-height));
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top:$o-header-height;
|
||||
left:-100%;
|
||||
&.o-mobile-show {
|
||||
top: var(--o-header-height);
|
||||
left: -100%;
|
||||
&.show {
|
||||
left:0;
|
||||
width: 100%;
|
||||
}
|
||||
@ -245,11 +264,11 @@ header.o_main_header{
|
||||
display: block;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: $o-header-height;
|
||||
top: var(--o-header-height);
|
||||
right: 0;
|
||||
width: $o-on-page-width;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - #{$o-header-height});
|
||||
max-height: calc(100vh - var(--o-header-height));
|
||||
padding: 3rem 3rem 3rem 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -280,7 +299,7 @@ header.o_main_header{
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
#wrap {
|
||||
margin-top: $o-header-height;
|
||||
margin-top: var(--o-header-height);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: flex;
|
||||
@ -304,6 +323,7 @@ header.o_main_header{
|
||||
main {
|
||||
position: relative;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
left: $o-side-nav-width;
|
||||
@ -485,7 +505,10 @@ header.o_main_header{
|
||||
|
||||
.o_git_link {
|
||||
@include font-size($font-size-secondary);
|
||||
@include o-position-absolute($top: 10px, $right: 1rem);
|
||||
@include o-position-absolute($top: 0px, $right: 1rem);
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include o-position-absolute($top: 10px, $right: 1rem);
|
||||
}
|
||||
i {
|
||||
margin-right: .2rem;
|
||||
}
|
||||
@ -576,8 +599,10 @@ header.o_main_header{
|
||||
font-style: italic;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&:not([class^="col"]) .legend {
|
||||
max-width: 60%;
|
||||
@include media-breakpoint-up(md) {
|
||||
&:not([class^="col"]) .legend {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -810,10 +835,12 @@ header.o_main_header{
|
||||
}
|
||||
|
||||
&.alert-go_to {
|
||||
display: inline-block;
|
||||
border-color: $o-violet;
|
||||
background-color: $gray-lightest;
|
||||
width: calc(50% - 1rem);
|
||||
@include media-breakpoint-up(lg){
|
||||
display: inline-block;
|
||||
width: calc(50% - 1rem);
|
||||
}s
|
||||
a {
|
||||
color: $o-violet-dark;
|
||||
}
|
||||
@ -833,17 +860,13 @@ header.o_main_header{
|
||||
// Footer
|
||||
//------------------------------------------------------------------------------
|
||||
footer {
|
||||
|
||||
> div {
|
||||
padding: 3rem;
|
||||
|
||||
.o_get_help {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
background: $gray-100;
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-left: calc(#{$o-side-nav-width} + 3rem)
|
||||
}
|
||||
}
|
||||
|
||||
.o_get_help {
|
||||
background: $gray-100;
|
||||
|
||||
h5 {
|
||||
color: $secondary;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user