[IMP] website, *: adapt vertical header
*: website_sale, website_sale_wishlist This commit improves the layout of the vertical header. task-3060986 Part-of: odoo/odoo#119650
This commit is contained in:
Brieuc-brd
@@ -1,35 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
|
||||
<defs>
|
||||
<linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="47.717%" y2="52.283%">
|
||||
<stop offset="0%" stop-color="#00A09D"/>
|
||||
<stop offset="100%" stop-color="#00E2FF"/>
|
||||
</linearGradient>
|
||||
<rect id="path-29" width="234" height="50" x="0" y="5"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" class="header_template_vertical">
|
||||
<g class="bg_ver">
|
||||
<use fill="#000" fill-opacity=".14" xlink:href="#path-29"/>
|
||||
<use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-29"/>
|
||||
</g>
|
||||
<g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(98 10)">
|
||||
<path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
|
||||
</g>
|
||||
<rect width="214" height="1" x="10" y="29" fill="#FFF" class="rectangle_ver" opacity=".375"/>
|
||||
<g fill="#FFF" class="group" opacity=".804" transform="translate(64 39)">
|
||||
<rect width="23" height="4" class="rectangle" rx="1"/>
|
||||
<g class="link" transform="translate(28)">
|
||||
<rect width="23" height="4" class="rectangle" rx="1"/>
|
||||
</g>
|
||||
<g class="link" transform="translate(56)">
|
||||
<rect width="23" height="4" class="rectangle" rx="1"/>
|
||||
</g>
|
||||
<g class="link" transform="translate(84)">
|
||||
<rect width="23" height="4" class="rectangle" rx="1"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="#FFF" class="group" opacity=".804" transform="translate(10 17)">
|
||||
<rect width="23" height="4" class="rectangle" rx="1"/>
|
||||
</g>
|
||||
<rect width="20" height="9" fill="#FFF" class="rectangle" rx="4.5" transform="translate(204 12)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="234" height="60" viewBox="0 0 234 60" xmlns="http://www.w3.org/2000/svg"><path transform="translate(0 5)" fill="url(#header_preview_vertical__a)" d="M0 0h234v50H0z"/><rect x="12" y="20" width="8" height="8" rx="2" fill="#fff"/><rect x="22" y="20" width="8" height="8" rx="2" fill="#fff"/><rect x="32" y="20" width="8" height="8" rx="2" fill="#fff"/><path d="M107.89 27.789v-1.865h-3.708V20.21h-2.374v7.58l6.082-.001Zm3.945.13c.852 0 1.565-.158 2.136-.473a3.208 3.208 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491Zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964v-3.232h-3.67v1.577h1.589v.714c-.26.16-.538.29-.828.388a2.518 2.518 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.469 2.469 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367a3.35 3.35 0 0 0-1.52 1.393c-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.172 3.172 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46Zm8.244 0c.853 0 1.565-.158 2.136-.473a3.208 3.208 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491Z" fill="#fff"/><rect x="194" y="20" width="8" height="8" rx="2" fill="#fff"/><rect x="204" y="20" width="8" height="8" rx="2" fill="#fff"/><rect x="214" y="20" width="8" height="8" rx="2" fill="#fff"/><rect x="94" y="36" width="12" height="4" rx="1" fill="#fff"/><rect x="108" y="36" width="18" height="4" rx="1" fill="#fff"/><rect x="128" y="36" width="12" height="4" rx="1" fill="#fff"/><defs><linearGradient id="header_preview_vertical__a" x1="0" y1="0" x2="236.447" y2="18.188" gradientUnits="userSpaceOnUse"><stop stop-color="#357C83"/><stop offset="1" stop-color="#01A09D"/></linearGradient></defs></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 2.6 KiB |
@@ -978,21 +978,6 @@ $-transition-duration: 200ms;
|
||||
height: $o-theme-navbar-fixed-logo-height;
|
||||
}
|
||||
}
|
||||
@if o-website-value('header-template') == 'vertical' {
|
||||
.o_header_centered_logo {
|
||||
display: none;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar-brand {
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
|
||||
img {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.o_header_standard.o_header_is_scrolled {
|
||||
@if index(('menu_logo_below', 'logo_menu_below'), o-website-value('header-template')) != null {
|
||||
@@ -1124,23 +1109,7 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
@if o-website-value('header-template') == 'vertical' {
|
||||
header .o_header_centered_logo {
|
||||
order: -1;
|
||||
width: 50%;
|
||||
margin-top: $spacer;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
order: inherit;
|
||||
width: 40%;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
padding-top: $navbar-padding-y;
|
||||
padding-bottom: $navbar-padding-y;
|
||||
}
|
||||
} @else if o-website-value('header-template') == 'sidebar' {
|
||||
@if o-website-value('header-template') == 'sidebar' {
|
||||
@include media-breakpoint-up(lg) {
|
||||
#wrapwrap {
|
||||
// Two different website options might add padding:
|
||||
|
||||
@@ -707,126 +707,70 @@
|
||||
<template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
|
||||
<xpath expr="//header//nav" position="replace">
|
||||
<t t-call="website.navbar">
|
||||
<t t-set="_navbar_classes" t-valuef="flex-lg-column shadow-sm py-0"/>
|
||||
<div id="top_menu_container" class="container align-items-center flex-lg-column flex-wrap">
|
||||
<div class="d-flex flex-lg-row justify-content-between w-100 align-items-center flex-wrap flex-lg-nowrap">
|
||||
<!-- Left -->
|
||||
<div class="o_header_centered_logo">
|
||||
<div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_1"/>
|
||||
</div>
|
||||
<t t-set="_navbar_classes" t-valuef="d-none d-lg-block pt-3 shadow-sm"/>
|
||||
|
||||
<div id="top_menu_container" class="container flex-wrap gap-3">
|
||||
<div class="d-grid align-items-center w-100 o_grid_header_3_cols">
|
||||
<ul class="navbar-nav align-items-center gap-1">
|
||||
<!-- Search bar -->
|
||||
<t t-call="website.placeholder_header_search_box">
|
||||
<t t-set="_layout" t-valuef="modal"/>
|
||||
<t t-set="_input_classes" t-valuef="border border-end-0 p-3"/>
|
||||
<t t-set="_submit_classes" t-valuef="border border-start-0 px-4 bg-o-color-4"/>
|
||||
<t t-set="_button_classes" t-valuef="o_navlink_background text-reset"/>
|
||||
</t>
|
||||
<!-- Social Links -->
|
||||
<t t-call="website.placeholder_header_social_links"/>
|
||||
<!-- Text element -->
|
||||
<t t-call="website.placeholder_header_text_element">
|
||||
<t t-set="_link_class" t-valuef="nav-link"/>
|
||||
</t>
|
||||
</ul>
|
||||
<!-- Brand -->
|
||||
<t t-call="website.placeholder_header_brand">
|
||||
<t t-set="_link_class" t-valuef="m-0"/>
|
||||
<t t-set="_link_class" t-valuef="mx-auto mw-100"/>
|
||||
</t>
|
||||
<!-- Right -->
|
||||
<div class="o_header_centered_logo text-end">
|
||||
<div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2"/>
|
||||
</div>
|
||||
<!-- Call To Action -->
|
||||
<t t-call="website.placeholder_header_call_to_action">
|
||||
<t t-set="_div_classes" t-valuef="ms-1 d-block d-lg-none ms-auto me-4"/>
|
||||
</t>
|
||||
<!-- Navbar Toggler -->
|
||||
<t t-call="website.navbar_toggler">
|
||||
<t t-set="_toggler_class" t-valuef="my-3"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="d-lg-flex flex-lg-row align-items-center w-100">
|
||||
<!-- Navbar Collapse -->
|
||||
<div id="top_menu_collapse" class="collapse navbar-collapse flex-wrap">
|
||||
<div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_vertical_3"/>
|
||||
<ul class="navbar-nav align-items-center gap-1 flex-wrap justify-content-end ms-auto">
|
||||
<!-- Sign In -->
|
||||
<t t-call="portal.placeholder_user_sign_in">
|
||||
<t t-set="_link_class" t-valuef="o_navlink_background btn rounded-circle text-reset"/>
|
||||
</t>
|
||||
<!-- User Dropdown -->
|
||||
<t t-call="portal.user_dropdown">
|
||||
<t t-set="_icon" t-value="true"/>
|
||||
<t t-set="_item_class" t-valuef="dropdown"/>
|
||||
<t t-set="_icon_class" t-valuef="fa-stack"/>
|
||||
<t t-set="_link_class" t-valuef="o_navlink_background btn d-flex align-items-center rounded-pill py-1 text-reset"/>
|
||||
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end"/>
|
||||
</t>
|
||||
<!-- Language Selector -->
|
||||
<t t-call="website.placeholder_header_language_selector">
|
||||
<t t-set="_btn_class" t-valuef="px-2"/>
|
||||
<t t-set="_div_classes" t-valuef="d-none d-lg-block"/>
|
||||
</t>
|
||||
<!-- Nav -->
|
||||
<t t-call="website.navbar_nav">
|
||||
<t t-set="_nav_class" t-valuef="mx-auto order-first order-lg-5"/>
|
||||
<!-- Menu -->
|
||||
<t t-foreach="website.menu_id.child_id" t-as="submenu">
|
||||
<t t-call="website.submenu">
|
||||
<t t-set="item_class" t-valuef="nav-item"/>
|
||||
<t t-set="link_class" t-valuef="nav-link"/>
|
||||
</t>
|
||||
</t>
|
||||
<!-- Sign In -->
|
||||
<t t-call="portal.placeholder_user_sign_in">
|
||||
<t t-set="_item_class" t-valuef="nav-item ms-lg-3"/>
|
||||
<t t-set="_link_class" t-valuef="nav-link"/>
|
||||
</t>
|
||||
<!-- User Dropdown -->
|
||||
<t t-call="portal.user_dropdown">
|
||||
<t t-set="_user_name" t-value="True"/>
|
||||
<t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-3"/>
|
||||
<t t-set="_link_class" t-valuef="nav-link fw-bold"/>
|
||||
</t>
|
||||
<!-- Language Selector -->
|
||||
<t t-call="website.placeholder_header_language_selector">
|
||||
<t t-set="_div_classes" t-valuef="nav-item d-block d-lg-none mb-2"/>
|
||||
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
|
||||
</t>
|
||||
<t t-set="_txt_class" t-valuef="small"/>
|
||||
<t t-set="_btn_class" t-valuef="o_navlink_background rounded-pill py-1 text-reset"/>
|
||||
<t t-set="_flag_class" t-valuef="m-2"/>
|
||||
<t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end"/>
|
||||
</t>
|
||||
<!-- Call To Action -->
|
||||
<t t-call="website.placeholder_header_call_to_action">
|
||||
<t t-set="_div_classes" t-valuef="d-none d-lg-block order-lg-last"/>
|
||||
<t t-call="website.header_call_to_action_pill"/>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center w-100">
|
||||
<!-- Navbar -->
|
||||
<t t-call="website.navbar_nav">
|
||||
<t t-set="_nav_class" t-valuef="pb-0"/>
|
||||
|
||||
<!-- Menu -->
|
||||
<t t-foreach="website.menu_id.child_id" t-as="submenu">
|
||||
<t t-call="website.submenu">
|
||||
<t t-set="item_class" t-valuef="nav-item"/>
|
||||
<t t-set="link_class" t-valuef="nav-link"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="template_header_vertical_oe_structure_header_vertical_1" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_1)">
|
||||
<xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_1']" position="replace">
|
||||
<div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_1">
|
||||
<section class="s_text_block" data-snippet="s_text_block" data-name="Text">
|
||||
<div class="container">
|
||||
<div class="s_social_media no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
|
||||
<h6 class="s_social_media_title d-none" contenteditable="true">Follow us</h6>
|
||||
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
|
||||
<i class="fa fa-facebook m-1 o_editable_media"/>
|
||||
</a>
|
||||
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
|
||||
<i class="fa fa-twitter m-1 o_editable_media"/>
|
||||
</a>
|
||||
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
|
||||
<i class="fa fa-linkedin m-1 o_editable_media"/>
|
||||
</a>
|
||||
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
|
||||
<i class="fa fa-instagram m-1 o_editable_media"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="template_header_vertical_oe_structure_header_vertical_2" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_2)">
|
||||
<xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_2']" position="replace">
|
||||
<div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2">
|
||||
<section class="s_text_block" data-snippet="s_text_block" data-name="Text">
|
||||
<div class="container">
|
||||
<small><i class="fa fa-1x fa-fw fa-phone me-2"/><a href="tel:+1(650)555-0111">+1 (650) 555-0111</a></small>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="template_header_vertical_oe_structure_header_vertical_3" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_3)">
|
||||
<xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_3']" position="replace">
|
||||
<div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_vertical_3">
|
||||
<section class="s_text_block" data-snippet="s_text_block" data-name="Text">
|
||||
<div class="container">
|
||||
<div class="s_hr w-100 text-start pt0 pb0" data-name="Separator">
|
||||
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<t t-call="website.template_header_mobile"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -73,11 +73,11 @@
|
||||
</template>
|
||||
|
||||
<template id="template_header_vertical" inherit_id="website.template_header_vertical">
|
||||
<xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
|
||||
<xpath expr="//t[@t-call='portal.placeholder_user_sign_in']" position="before">
|
||||
<t t-call="website_sale.header_cart_link">
|
||||
<t t-set="_icon" t-value="True"/>
|
||||
<t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
|
||||
<t t-set="_link_class" t-value="'nav-link'"/>
|
||||
<t t-set="_link_class" t-value="'o_navlink_background btn position-relative rounded-circle p-1 text-reset'"/>
|
||||
<t t-set="_badge_class" t-value="'position-absolute top-0 end-0 mt-n1 me-n1 rounded-pill'"/>
|
||||
</t>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
@@ -100,8 +100,8 @@
|
||||
<xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
|
||||
<t t-call="website_sale_wishlist.header_wishlist_link">
|
||||
<t t-set="_icon" t-value="True"/>
|
||||
<t t-set="_item_class" t-value="'nav-item ms-lg-3'"/>
|
||||
<t t-set="_link_class" t-value="'nav-link'"/>
|
||||
<t t-set="_link_class" t-value="'o_navlink_background btn position-relative rounded-circle p-1 text-reset'"/>
|
||||
<t t-set="_badge_class" t-value="'position-absolute top-0 end-0 mt-n1 me-n1 rounded-pill'"/>
|
||||
</t>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user