diff --git a/static/src/css/pylote.css b/static/src/css/pylote.css
index c8d25c9a2e85c3291cfeffcfc7a8e1f05be12d46..9fd8e41b74183a83ef766a620b2625cc164fcdda 100644
--- a/static/src/css/pylote.css
+++ b/static/src/css/pylote.css
@@ -181,7 +181,94 @@ li#menu-contact .btn-primary{
/*Navigation*/
-
+/* Icon 1 */
+
+.animated-icon3 {
+width: 30px;
+height: 20px;
+position: relative;
+margin: 0px;
+-webkit-transform: rotate(0deg);
+-moz-transform: rotate(0deg);
+-o-transform: rotate(0deg);
+transform: rotate(0deg);
+-webkit-transition: .5s ease-in-out;
+-moz-transition: .5s ease-in-out;
+-o-transition: .5s ease-in-out;
+transition: .5s ease-in-out;
+cursor: pointer;
+}
+
+.animated-icon3 span {
+display: block;
+position: absolute;
+height: 3px;
+width: 100%;
+border-radius: 9px;
+opacity: 1;
+left: 0;
+-webkit-transform: rotate(0deg);
+-moz-transform: rotate(0deg);
+-o-transform: rotate(0deg);
+transform: rotate(0deg);
+-webkit-transition: .25s ease-in-out;
+-moz-transition: .25s ease-in-out;
+-o-transition: .25s ease-in-out;
+transition: .25s ease-in-out;
+}
+
+.animated-icon3 span {
+background: #3E3E3D;
+}
+
+/* Icon 4 */
+
+.animated-icon3 span:nth-child(1) {
+top: 0px;
+-webkit-transform-origin: left center;
+-moz-transform-origin: left center;
+-o-transform-origin: left center;
+transform-origin: left center;
+}
+
+.animated-icon3 span:nth-child(2) {
+top: 10px;
+-webkit-transform-origin: left center;
+-moz-transform-origin: left center;
+-o-transform-origin: left center;
+transform-origin: left center;
+}
+
+.animated-icon3 span:nth-child(3) {
+top: 20px;
+-webkit-transform-origin: left center;
+-moz-transform-origin: left center;
+-o-transform-origin: left center;
+transform-origin: left center;
+}
+
+.animated-icon3.open span:nth-child(1) {
+-webkit-transform: rotate(45deg);
+-moz-transform: rotate(45deg);
+-o-transform: rotate(45deg);
+transform: rotate(45deg);
+top: 0px;
+left: 8px;
+}
+
+.animated-icon3.open span:nth-child(2) {
+width: 0%;
+opacity: 0;
+}
+
+.animated-icon3.open span:nth-child(3) {
+-webkit-transform: rotate(-45deg);
+-moz-transform: rotate(-45deg);
+-o-transform: rotate(-45deg);
+transform: rotate(-45deg);
+top: 21px;
+left: 8px;
+}
.navbar-collapse{
height: -webkit-fill-available;
background-color: #fff;
@@ -191,13 +278,18 @@ li#menu-contact .btn-primary{
background-color: #fff;
}
-header .navbar-brand.logo .logo-mobile{
+#logo-mobile{
height: 60px;
- padding: 5px 15px;
+ padding: 5px 20px;
+}
+
+#logo-mobile-menu{
+ height: 50px;
+ padding: 5px 20px;
}
.navbar-collapse{
- padding-top: 40px;
+ padding-top: 50px;
}
li.nav-item.active a{
@@ -208,13 +300,13 @@ li.nav-item.active a{
margin-top: 200px;
}
-li.nav-item.dropdown, li.nav-item.divider{
+/*li.nav-item.dropdown, li.nav-item.divider{
display: none !important;
}
li.nav-item.dropdown.o_extra_menu_items{
display: block !important;
-}
+}*/
#oe_main_menu_navbar + #wrapwrap .menu-nav-top.o_header_affix{
top: 170px;
@@ -287,6 +379,7 @@ div#wrap{
.navbar-light .navbar-toggler{
border-color: rgba(0, 0, 0, 0);
+ padding: 1.25rem 0.75rem;
}
.navbar-light .navbar-toggler-icon {
@@ -382,6 +475,10 @@ footer, footer .btn-primary{
font-size: 12px;
}
+.o_show{
+ display: block;
+}
+
#footer .btn-primary{
font-weight: 700;
color: #56A099;
@@ -1341,7 +1438,7 @@ h2.o_default_snippet_text:after{
*/
.carousel-right-inner-border{
- border-bottom: 1px solid #56A099;
+ border-bottom: 0px solid #56A099;
padding-bottom: 20px;
}
@@ -1368,7 +1465,8 @@ h2.o_default_snippet_text:after{
}
.carousel-text-right-inner{
- width: 130px;
+ /*width: 130px;*/
+ width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
diff --git a/static/src/css/pylote_mobil.css b/static/src/css/pylote_mobil.css
index 333755834e74a68ebbd038478df9ea10e56bea26..886334666044c83d04cbbdcd3adb7823721b8a36 100644
--- a/static/src/css/pylote_mobil.css
+++ b/static/src/css/pylote_mobil.css
@@ -14,7 +14,6 @@
font-size: 26px;
}
-
.home-header-title {
padding: 0px ;
}
@@ -270,7 +269,7 @@
letter-spacing: 3px;
}
- .carousel-text-right-inner{
+ /*.carousel-text-right-inner{
width: 400px;
}
@@ -318,7 +317,7 @@
.link-publi {
border-top: none ;
border-left: 1px solid #56A099;
- }
+ }*/
.mentions{
margin-top: 0;
@@ -359,6 +358,58 @@
#cleaner h2{
text-align: left;
}
+ .carousel-text-right-inner{
+ width: 400px;
+ }
+
+ .carousel-right-inner-border{
+ border-bottom: 1px solid #56A099;
+ }
+
+ .s_carousel .carousel-control-prev-icon, .s_carousel .carousel-control-next-icon, .s_quotes_carousel .carousel-control-prev-icon, .s_quotes_carousel .carousel-control-next-icon{
+ margin-top: 0px;
+ }
+
+ .carousel-right-partner{
+ text-align: left;
+ }
+
+ .carousel-right-inner .circle-home-border{
+ width: 90px;
+ height: 90px;
+ }
+
+ .carousel-text-right-inner p{
+ font-size: 16px;
+ }
+
+ .carousel-control-prev, .carousel-control-next{
+ align-items: center;
+ top: 0;
+ margin: 0;
+ }
+
+
+ .circle-home-border p.o_default_snippet_text{
+ font-size: 15px;
+ }
+
+
+ .link-bottom a{
+ margin: 0;
+ display: initial;
+ margin-right: 10px;
+ }
+
+ .link-bottom h5{
+ margin-right: 10px;
+ display: inline-block;
+ }
+
+ .link-publi {
+ border-top: none ;
+ border-left: 1px solid #56A099;
+ }
}
@media (min-width: 1200px) {
.on-environment-banner .d-flex{
diff --git a/static/src/img/._logo-mobile-menu.png b/static/src/img/._logo-mobile-menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..b11e7f0762f4bc4c5a542de3b000d12f30ad03d9
Binary files /dev/null and b/static/src/img/._logo-mobile-menu.png differ
diff --git a/static/src/img/logo-mobile-menu.png b/static/src/img/logo-mobile-menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c4fbbf89b9b37408c7b73c8edeb62c0c21e2ac8
Binary files /dev/null and b/static/src/img/logo-mobile-menu.png differ
diff --git a/static/src/js/script_to_top.js b/static/src/js/script_to_top.js
index 7ea50ca6e9d8802ac1c3bc45c17dcd218fb0e3bc..3b665b69230c375c2f3108b6efac20932c9613f5 100644
--- a/static/src/js/script_to_top.js
+++ b/static/src/js/script_to_top.js
@@ -3,9 +3,24 @@ odoo.define('pylote_website.scroll_totop', function (require) {
$(document).ready(function () {
- $( '#navbar-toggler' ).on( 'click', function () {
- $("#logo-mobile").attr('style','display: none');
+ $( '#button-open-menu' ).on( 'click', function () {
+ if($("#logo-mobile").hasClass("o_show")) {
+ $("#logo-mobile").removeClass('o_show');
+ $("#logo-mobile-menu").removeClass('o_hidden');
+ $("#logo-mobile").addClass('o_hidden');
+ $("#logo-mobile-menu").addClass('o_show');
+ } else {
+ $("#logo-mobile").removeClass('o_hidden');
+ $("#logo-mobile-menu").removeClass('o_show');
+ $("#logo-mobile").addClass('o_show');
+ $("#logo-mobile-menu").addClass('o_hidden');
+ }
+ // $("#logo-mobile").attr('style','display: none');
+ // $("#logo-mobile-menu").attr('style','display: block');
+ // $("#button-open-menu").attr('style','display: none');
+ $('.animated-icon3').toggleClass('open');
});
+
$( '#myNavbar a' ).on( 'click', function () {
$( '#myNavbar' ).find( 'li.active' ).removeClass( 'active' );
diff --git a/views/menu.xml b/views/menu.xml
index 71f6e76fb58254da5deacab2940483487c8aca36..b15eee3d2a19a0f498cab78e42f23e3e65496cd4 100644
--- a/views/menu.xml
+++ b/views/menu.xml
@@ -1,11 +1,54 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
+
+
<template id="custom_navbar" name="Custom nav-bar" customize_show="True" inherit_id="website.layout">
-
- <!-- <xpath expr="//div[@class='collapse navbar-collapse']" position="before">
- <t t-call="website.language_selector"/>
- </xpath> -->
+ <xpath expr="//header" position="replace">
+ <header id="menu_odoo" class="o_header_affix affix affixed">
+ <nav class="navbar navbar-expand-md navbar-light bg-light">
+ <div class="container">
+ <a href="/" class="d-block d-sm-none-pylote navbar-brand logo">
+ <img id="logo-mobile" class="logo-mobile o_show" src="/pylote_website/static/src/img/logo-pylote-sans-text.png" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
+ <img id="logo-mobile-menu" class="o_hidden" src="/pylote_website/static/src/img/logo-mobile-menu.png" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
+ <!-- <img id="logo-mobile-menu" class="logo-mobile d-block d-sm-none-pylote" src="/pylote_website/static/src/img/logo-mobile-menu.png" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/> -->
+ </a>
+ <a href="/" class="d-none d-sm-block-pylote navbar-brand logo">
+ <!-- <img id="logo-mobile" class="logo-mobile d-block d-sm-none-pylote" src="/pylote_website/static/src/img/logo-pylote-sans-text.png" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/> -->
+
+ <img t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
+ </a>
+
+ <button id="button-open-menu" type="button" class="navbar-toggler third-button" data-toggle="collapse" data-target="#top_menu_collapse">
+ <div class="animated-icon3"><span></span><span></span><span></span></div>
+ </button>
+
+ <div class="collapse navbar-collapse" id="top_menu_collapse">
+
+ <ul class="nav navbar-nav ml-auto text-right" id="top_menu">
+ <t t-foreach="website.menu_id.child_id" t-as="submenu">
+ <t t-call="website.submenu">
+ <t t-set="item_class" t-value="'nav-item'"/>
+ <t t-set="link_class" t-value="'nav-link'"/>
+ </t>
+ </t>
+ <!-- <li class="nav-item" id="menu-news">
+ <a role="menuitem" href="/blog/news" t-att-class="'active nav-link' if request.httprequest.path == '/blog/our-blog-1' else 'nav-link' ">
+ <span data-oe-model="website.menu" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">News</span>
+ </a>
+ </li> -->
+ <!-- <li class="nav-item" id="menu-contact">
+ <a role="menuitem" href="/contact" t-att-class="'active nav-link btn-primary' if request.httprequest.path == '/contact' else 'nav-link btn-primary'" >
+ <span data-oe-model="website.menu" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Contact us</span>
+ </a>
+ </li> -->
+ </ul>
+ </div>
+ </div>
+ </nav>
+ </header>
+ </xpath>
+
<xpath expr="//ul[@id='top_menu']" position="inside">
<li class="nav-item" id="menu-news">
<a role="menuitem" href="/blog/news" t-att-class="'active nav-link' if request.httprequest.path == '/blog/our-blog-1' else 'nav-link' ">
@@ -19,17 +62,18 @@
</li>
</xpath>
+ <!--
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="#{'o_header_affix affix affixed'}" separator=" "/>
- </xpath>
+ </xpath> -->
- <xpath expr="//a[@class='navbar-brand logo']" position="replace">
+ <!-- <xpath expr="//a[@class='navbar-brand logo']" position="replace">
<a href="/" class="navbar-brand logo">
<img id="logo-mobile" class="logo-mobile d-block d-sm-none-pylote" src="/pylote_website/static/src/img/logo-pylote-sans-text.png" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
<img class="d-none d-sm-block-pylote" t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
</a>
- </xpath>
+ </xpath> -->
</template>
diff --git a/views/page_our_differenciation.xml b/views/page_our_differenciation.xml
index 5c30ac92ea201d57b540e5e9ec87e1e411e0eef2..d9085c1241f5f3301dae7c4ec11c9b8bd18fd706 100644
--- a/views/page_our_differenciation.xml
+++ b/views/page_our_differenciation.xml
@@ -36,7 +36,7 @@
</div>
</div>
</div>
- <div id="our-mission" class="bloc-part">
+ <div id="our-mission" class="bloc-part pb-md-5 pb-sm-0">
<div class="container">
<div class=" pt-5 pb-5">
<h2>Our mission, vision, values</h2>
@@ -106,7 +106,7 @@
<div class="container">
<div class="pt-5 pb-5">
<h2>Our innovative technology</h2>
- <div class="row text-left ">
+ <div class="row text-left pb-md-5 pb-sm-0">
<div class="d-none d-sm-block-pylote col-md-6">
<p><span>A world-first patented natural protection solution to avoid bacterial and viral contamination, based on a unique clean technology, patented & proprietary</span></p>
</div>
@@ -127,7 +127,7 @@
<div class="col-md-8">
<img src="/pylote_website/static/src/img/img-techno.png" class="img img-responsive" />
<img src="/pylote_website/static/src/img/img-techno2.png" class="d-none d-sm-block-pylote pt-5 pb-5 img img-responsive" />
- <img src="/pylote_website/static/src/img/img-techno2-mobil.png" class="d-block d-sm-none-pylote pt-5 pb-5 img img-responsive" />
+ <img src="/pylote_website/static/src/img/img-techno2-mobil.png" class="d-block d-sm-none-pylote pt-5 img img-responsive" />
</div>
<div class="col"></div>
</div>
diff --git a/views/snippets.xml b/views/snippets.xml
index 410f9db9045d01e6d4c15d24fb62f8fc343a57c3..5be9eb8f538ae56fb0417250dc50aabbdbbca2fa 100644
--- a/views/snippets.xml
+++ b/views/snippets.xml
@@ -68,9 +68,9 @@
</div>
<div class="container pt-5 pb-5">
<div class="row">
- <div class="col-md-5">
+ <div class="col-lg-5">
</div>
- <div class="col-md-7 link-bottom">
+ <div class="col-lg-7 link-bottom">
<p>You want to know more ?</p>
<a href="#" class="btn-primary">Our technology</a>
<a href="/contact" class="btn-primary">Contact us</a>