Skip to content
Extraits de code Groupes Projets
Valider d294de7e rédigé par Juliana's avatar Juliana
Parcourir les fichiers

Modif menu mobile

parent 46229c9d
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Afficher les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 233 ajouts et 25 suppressions
static/src/css/pylote.css
+ 106
− 8
Voir le fichier @ d294de7e
......@@ -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;
......
static/src/css/pylote_mobil.css
+ 54
− 3
Voir le fichier @ d294de7e
......@@ -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{
......
static/src/img/._logo-mobile-menu.png 0 → 100644
+ 0
− 0
Voir le fichier @ d294de7e
static/src/img/._logo-mobile-menu.png

4 ko

static/src/img/logo-mobile-menu.png 0 → 100644
+ 0
− 0
Voir le fichier @ d294de7e
static/src/img/logo-mobile-menu.png

2,59 ko

static/src/js/script_to_top.js
+ 17
− 2
Voir le fichier @ d294de7e
......@@ -3,10 +3,25 @@ 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' );
$( this ).parent( 'li' ).addClass( 'active' );
......
views/menu.xml
+ 51
− 7
Voir le fichier @ d294de7e
<?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="//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="//div[@class='collapse navbar-collapse']" position="before">
<t t-call="website.language_selector"/>
</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>
......
views/page_our_differenciation.xml
+ 3
− 3
Voir le fichier @ d294de7e
......@@ -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 &amp; 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>
......
views/snippets.xml
+ 2
− 2
Voir le fichier @ d294de7e
......@@ -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>
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter