[FIX] account,portal,sale: fix left menu borders

The menu wasn't correctly responsive. Now we always set the left and bottom border on the list elements, and remove them from the parent. This way the style will be correct even if the elements flex to the same line on some screen size.

PR: #26801
task-1876864
This commit is contained in:
Sébastien Theys
2018-09-19 12:00:37 +02:00
committed by Romain Derie
parent 34c47eecd3
commit 3ef1394806
3 changed files with 22 additions and 10 deletions
@@ -96,7 +96,7 @@
<t t-set="entries">
<ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
<li class="list-group-item o_payment_button flex-grow-1 flex-sm-grow-0">
<li class="list-group-item flex-grow-1">
<div class="o_download_pdf btn-toolbar flex-sm-nowrap">
<div class="btn-group flex-grow-1 mr-1 mb-1">
<a class="btn btn-secondary btn-block o_download_btn" t-att-href="invoice.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
@@ -106,8 +106,8 @@
</div>
</div>
</li>
<li t-if="invoice.user_id" class="list-group-item flex-grow-1 o_portal_contact_block">
<div class="small mb-1"><strong class="text-muted">Your Contact:</strong></div>
<li t-if="invoice.user_id" class="list-group-item flex-grow-1">
<div class="small mb-1"><strong class="text-muted">Your Contact</strong></div>
<div class="row">
<div class="col flex-grow-0 pr-2">
<img t-if="invoice.user_id.image" class="rounded-circle mt-1 o_portal_contact_img" t-attf-src="data:image/png;base64,#{invoice.user_id.image}" alt="Contact"/>
+15 -3
View File
@@ -473,10 +473,22 @@ form label {
}
.o_portal_sidebar {
.o_portal_contact_block {
@include media-breakpoint-down(md) {
#sidebar_content.card {
border-left: 0;
border-bottom: 0;
> div.card-body {
border-left: $border-width solid $border-color;
border-bottom: 0;
}
> ul > li {
border-left: $border-width solid $border-color;
margin-bottom: -1px;
}
> div.card-footer {
border-left: $border-width solid $border-color;
border-bottom: $border-width solid $border-color;
}
}
+4 -4
View File
@@ -150,7 +150,7 @@
</div>
</li>
<li class="navspy list-group-item pl-0 d-none d-lg-block" t-ignore="true" role="complementary">
<li class="navspy list-group-item pl-0 d-none d-lg-block flex-grow-1" t-ignore="true" role="complementary">
<ul class="nav flex-column bs-sidenav" data-id="quote_sidebar"></ul>
</li>
@@ -163,7 +163,7 @@
<t t-if="sale_order.remaining_validity_days &gt; 1">days</t><t t-else="">day</t>
</div>
</li>
<li t-if="sale_order.amount_undiscounted &gt; sale_order.amount_untaxed" class="list-group-item">
<li t-if="sale_order.amount_undiscounted &gt; sale_order.amount_untaxed" class="list-group-item flex-grow-1">
<small><b class="text-muted">Your advantage</b></small>
<small>
<b t-field="sale_order.amount_undiscounted"
@@ -181,8 +181,8 @@
</li>
</t>
<li t-if="sale_order.user_id" class="list-group-item flex-grow-1 o_portal_contact_block">
<div class="small mb-1"><strong class="text-muted">Your Contact:</strong></div>
<li t-if="sale_order.user_id" class="list-group-item flex-grow-1">
<div class="small mb-1"><strong class="text-muted">Your Contact</strong></div>
<div class="row flex-nowrap">
<div class="col flex-grow-0 pr-2">
<img class="rounded-circle mr4 float-left o_portal_contact_img" t-if="sale_order.user_id.image" t-attf-src="data:image/png;base64,#{sale_order.user_id.image}" alt="Contact"/>